2014年4月26日

Webサイトの画面イメージのキャプチャーの仕方

 今更感満載なんですが、Webサイトの画面設計書の為の画面イメージの取り方ですが皆さんはどうされてますか?

 今までは、1画面に収まらないものは、ブラウザで表示できる分を分割してコピーしてEXCELとかに貼り付けてました。
 簡単にページ全体を撮る為のアドインがありましたので導入してみました。

 Goole Chromeのアドインなんですが、「Awesome Screenshot」というものです。
選択エリアや、ページ全体をショートカットで撮ることができます。

デフォルトだと、「Ctrl+Shift+E」で今表示してるページをキャプチャーし、あと2クリックでクリップボードへ撮ることができます。



「Ctrl+Shit+E」を押すと、ページがキャプチャーされ、下のツールバー的なものが表示されます。
(このタイミングで、いろいろとメモを入れたりもできます。)
完了をクリックします。



次にキャプチャー(編集も含む)したページをどうするかの選択で、「Copy」をクリックします。
クリップボードに保存されます。




あとはEXCELなり好きなところに貼り付けてください。


これで作業効率が劇的にあがると思いますよー。


2014年4月25日

jQueryを使ってエラー発生項目の先頭にフォーカスを当てる

 webの画面でjavascriptで入力項目チェックをした時にエラー項目にフォーカスを位置づける簡単な方法に気づきました。
 
やり方

  1. エラーになった項目のclassにマーク(例えば「item_error」というクラス名)を付ける。
  2. classに"item_error"が付いている一番最初の項目にフォーカスを当てる。
    そのロジックが以下。

ロジックの説明
 classに「item_error」が付いている項目にフォーカスを当てるロジック。
ポイントは、コールバック関数に「return false;」を付けること。
これをしないと、エラーのあった最後の項目にフォーカスがあたる。
(eachを終わらせるための方法)
$(".item_error").each(function() {
    $(this).focus();
    return false;
});
もっと良い方法
 「item_error」というclassが設定されているinput, select, text(, button)要素をに対してフォーカスを当てます。
 くるくる回らなくても良いので(コンピュータ的に)速いです(項目が少なければ人が感じられるほど違いはありません。)。
    $('.item_error:input:visible').eq(0).focus();
これで、エラーがあった項目を保持しておく必要がなくなるな。

Webシステムでの帳票のPDF出力について

 現在開発中のシステムで外部に提出する帳票はPDFで出力したという要望を頂いているのですが、ちょっと調べてみました。
 システムは、Apache+PHP+CakePHP+MySQL+Smartyで構成されています。

ちょっと調べて見ると、以下の様なものが見つかりました。

まともな調査はしていないのですが、帳票をレイアウトするのに座標指定する必要がありなかなか手間がかかる感じがします。

で、ひとつの解決案として以下の方式を考えました。

このプロジェクトで使うブラウザがGoogle Chrome固定いう大前提があります。
Chromeの印刷機能には、PDFへ保存する機能があるではないですか!!
これを使えば、HTMLで帳票をデザインして、PDFへ保存してもらえばそーとーの工数削減がされます。
 これで、開発の手間、メンテナンス性がとても上がります。


みなさんもブラウザは、Google Chromeでっ!

2014年4月18日

EXCEL2010のインデントがキーボードでできない

 EXCEL2010でセル内でインデントを付ける場合、スペースで付ける人がいると思いますが、ナンセンスです。
 または、空の列を追加してインデントしたり…。

 EXCELの機能を使ってやるには、インデント(セルと枠線の余白を増やす)という機能があるのでそれを使います。

 そのアイコンにマウスカーソルを当てると、キーボードのショートカット表示されるので、次からは、マウスではなくキーボードでやってみようと思ってやってみました。
 そしたら、Windows 7のタスク切り替えの状態になってしまいました…。

アプリケーションよりも、OSのほうが強かったという話です。
別にいいんですけどね。マウスでやるんで。

2014年4月16日

SublimeTextとやっておきたい(忘れたくない)設定


プログラミングで使うテキストエディタは、フォントやフォントサイズは見やすいように必ず設定しておく。


Sublime Textの設定は、こう!


フォントの変更

[Preferrences]-[Setting-User]
  1. {
  2. "font_face": "MS ゴシック",
  3. "font_size": 9,
  4. "draw_white_space" : "all"
  5. }
  • 2行目:フォントの種類
    MSとゴシックの間は、スペースを区切る
  • 3行目:フォントサイズ
  • 4行目:スペース、タブを表示する
キーバインドを変更

[Preferrences]-[Key Bidings-User]
  1. [
  2. { "keys": ["ctrl+m"], "command": "insert", "args": {"characters": "\n"} },
  3. { "keys": ["ctrl+i"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
  4. { "keys": ["ctrl+h"], "command": "left_delete" },
  5.  { "keys": ["ctrl+alt+c"], "command": "clone_file" }
  6. ]
  • 2行目:Ctrl+mでEnterキー
  • 3行目:Ctrl+iでTabキー
  • 4行目:Ctrl+hでBackspaceキー
  • 4行目:Ctrl+alt+cでアクティブはファイルをもう一つ開く(これで同じファイルを見ながら編集ができる)

linuxの時の日本語入力ができるようにする

https://lab.sonicmoov.com/markup/sublime-text-2/

プラグイン
JQuery
CSS
LESS
Emmet
SublimeLinter

JQueryでselectで選択されているoptionのdata属性の値がほしい

 selectタグをJQueryのvalメソッドで値を取得すると選択されているoptionのvalueだったり、コンテンツが取得されます。
 一般的にはそれで良いんですが、valueと違う属性を取得したい場合があります。

例えば、消費税率とか。
 データベースに保存する値としては、消費税率のコードで良いのですが、画面上では、コードではなく実際の消費税率が必要とかという場合です。



例と使い方を書いておきます。

HTML


使い方

HTML上では、リストの4行目(8%の行)が選択されていると想定します。

選択されているリストのコード(value)を取得する
console.log($("#tax_rate").val2());
3
選択されているリストのdata属性を取得する
console.log($("#tax_rate").val2("rate"));
8

JQueryのプラグイン

/**
*   selectタグのoptionに付けられたdata属性の値または、そのオブジェクトの値を取得する
*   @param string data_key data属性のキー名
*   @return 指定したキーの値または、そのオブジェクトの値
*/
jQuery.fn.val2 = function(data_key){
    if($(this)[0].nodeName==="SELECT" && data_key!==undefined && data_key!=="") {
        var index = $(this)[0].selectedIndex;
        return $("option", this).eq(index).data(data_key);
    }else {
        if(data_key!==undefined && data_key!=="") {
            return $(this).data(data_key);
        }else {
            return $(this).val();
        }
    }
}

これで、JQueryのvalではなく、val2を使えば、いろいろと楽になるな。

イヤ、値のセットができないので置き換えではできないな…。
val2というメソッド名も変更しないと…。

2014年4月15日

JQueryでcheckboxの判定にハマったのでメモ

 JQeryでチェックボックスのオン、オフの判定でハマりました。

マウスやキーボードでチェックを付けたり、外したりした場合、JQueryできないことが分かりました。
(前からわかっててJQueryのプラグインを作っていたはずなんだけどダメなコーディングだった。)


判定できない

jQuery(this).attr('checked')

判定できる

jQuery(this).prop('checked')
だそうです。

そのプラグインを公開

/**
*   CheckBoxのチェック状態判定と設定
*   @param boolean checked チェック状態を設定する true..チェックする false..解除する
*   @return true..チェックされている false..チェックされていない
*/
jQuery.fn.checked = function(checked){
    if(checked!==undefined) {
        jQuery(this).prop('checked', checked)
    }
    return jQuery(this).prop('checked');
}

tableタグ内でtrをマウスで移動させるのメモ

 webのシステムで行の移動は簡単ではないですが、マウスを使ってドラッグ&ドロップで行移動をする為のJQueryのプラグインを見つけました。


 GitHubから持ってくるとバージョン0.4と古いので、サンプルを紹介しているページから直接持ってこないとよろしくないようです。
ここからダウンロード(version 0.7)できます。



 ですが、自分の実行環境では、「jquery-2.1.0.min.js」を使っているからなのか、なんなのかサンプル通りにコーディングしてもエラーが起きたり、イベントが起きなかったりしてしまいます。
JQuery1.7に対応していると明記されています。
一部ソースを書き換えたり、サンプルとは違うコーディング方法をしています。

 359行目で、移動先の行が違う場合のみ、onDropイベントを発生させるロジックがあるのですが、このままだとイベントが起きないことがわかりました(原因は不明です。JQueryのバージョンの問題かもしれません。)。
以下のように変更しました。
変更前:if (config.onDrop && (jQuery.tableDnD.originalOrder != newOrder)) {
変更後:if (config.onDrop)) {
きっと、ドロップした先の行番号が違う場合のみthenの処理(onDropイベント発生)を行うのでしょう。

これで、とっても使いやすいシステムが構築できるよ。


ちなみに。
テーブルタグをいろいろできるプラグインを照会しているサイト
http://blog.verygoodtown.com/2011/05/jquery-table-plugins/

2014年4月13日

Apacheとphpでウェブサービス作るときの備忘録

 マルチバイト文字(日本語とか)を使ったフォルダを使っているとダメという話です。

 Apacheとphpとmysqlを使ってwebシステムを作っているのですが、作っているシステムがどうしても動かなくて悩んでいました。
 ふつーは、そのシステムがそもそも動かないんじゃないの?って話になるんですが、違う環境でやると動くのでプログラム的には問題ありません。

環境を軽く書くと以下のとおりです。

最初に動いていた環境


  • OS:Windows7
  • Webサーバー:IIS

動かなくなっていた環境

  • OS:Windows7
  • Webサーバー:Apache

動かなくなった環境で実行するとPHPのソースがそのまま表示されたり、「Fatal error: Unknown: Failed opening required…」と表示されたりいろんなことが発生しました。

結局何が問題だったかというとapacheのDocumentRootに設定していたディレクトリのパスに日本語が含まれていたことです。
 この原因でエラーになっているというのに気づくまですごく時間がかかってしまいました。

 さらに、時間を喰った原因としてWindowsには、シンボリック・リンクという機能があって、フォルダの別名(ショートカットとは違う)を付ける機能があるのですがそれを使えば解決できるのではないかと考えてその設定をしてしまったことです。
 いくらシンボリック・リンクを使っても日本語が含まれるとダメなんですよね(内部的には実際のフォルダ名を使っているんでしょうね。)

なので、apacheで日本語を含むディレクトリでの開発はしないようにしましょう。


なぜこうなったかというとこんな経緯があります。
ごく当たり前の対応だと思います。

  1. プロジェクトのフォルダは日本語名を付けてわかりやすくしたい
  2. ソースはそのフォルダ内に入れておきたい

ですが、これをするとapacheで使えなくなるので方式を考えました。


旧フォルダ構成

140001_日本語のプロジェクト名
   develop
      src        (←ここにソースを入れている)

新フォルダ構成

140001_develop
    src        (←ここにソースを入れている)
140001_日本語のプロジェクト名
   develop    (140001_developフォルダをシンボリックリンクでリンク)
     src

これでプロジェクトフォルダ一つでまとめて管理ができるようになります。
そもそも2つに分けたんだったらそのままえいんじゃ無いの?ってのもありますが…。


教訓

システム開発時のソースファイルは必ずアルファベットと数字だけのフォルダにすることっ!

2014年4月4日

CakePHPでどこでも共通関数を定義して使う

 Controller、Modelのどちらでも同じ書き方かつ、単一のソースで共通関数を定義する方法のメモ。
クラスのインスタンス化すらしたくない。すぐに使いたい関数です。

1./app/Vendorに任意のクラスを定義する


Util.php

<?php

class Util {
    public static function plus($val1, $val2) {
        return $val + $val2;
    }

}

2.使いたいところでimportをする

Controllerであれば、

AppControllerクラスの先頭に以下のように定義する

App::import('vendor', 'Util');

Modelであれば、
AppModelクラスの先頭に以下のように定義する

App::import('vendor', 'Util');

3.使う

staticな関数なのでクラス名とメソッド名を「::」(コロン2つで区切る)

$ans = Util::plus(10, 100);



これで沢山のユーティリティ関数を作ることができます。

2014年4月2日

linuxのディレクトリとファイル毎のパーミッションの変更の備忘録


あるディレクトリ配下のパーミッションを変更するときは、以下のように書いて実行しますが、これだとファイルにも実行権限が付いてしまい気持ち悪いです。

/path以下のファイル、ディレクトリを全て755にする。
通常のファイルも実行権限がつくから気持ち悪い(当然実行はできない)。
>chmod -R 755 /path


フィアル毎、ディレクトリ毎にパーミッションを変更する方法を調べました。
(やはり、同じことを思っている人がいますね。)

findでファイルまたは、ディレクトリを検索して、chmodに渡してパーミッションを変更するようです。


ファイルのみのパーミッションを変更
>find path/ -type f -print | xargs chmod 644

ディレクトリのみのパーミッションを変更
>find path/ -type d -print | xargs chmod 755



参考サイト



今まで作ったシステムは、この気持ち悪い状態になってるよ感がする…。
あとで直しておこう。

2014年4月1日

iPadとPCのgoogle Chromeはスタイルが違う

 今やっているWebシステムのプロジェクトは、Google Chromeに統一して開発しているのです。
なのでブラウザが同じであればどんなプラットフォームでも同じデザインで見えると思っていたのが大間違いでした。

 iPadとPCではやはり見え方が違います。
プラットフォームごとのデフォルトのスタイルが違うんですよね。PCでは正しく見えていたのがiPadでは予想していないところで改行していたりとか…。

 これをある程度吸収するテクニックとして「スタイルシートのリセット」というのがあります。
ちょっと調べてでみました。

よく使われているCSS Resetスクリプトの一覧が載っています。
http://www.cssreset.com/

どれを使うと楽ちんに共通化できるかはこれから検証が必要なようです。

今作っている画面に適用して軽くチェックしてみたところ、「Yahoo! (YUI 3) Reset CSS」が一番しっくりしているようです。
 Tableのセル内にテキストボックスを配置しているケースで一番綺麗に収まっています。
他のリセットCSSだとセルからテキストボックスがはみ出してしまいます。


これを改造して使うことにしました。
http://yuilibrary.com/yui/docs/cssreset/