Posts Tagged ‘WEB’
String Encoder / Decoder バージョン1.0.0公開
2013-05-25
ダウンロード
◆ これは何か？
- 文字列を符号化および複合するためのツールです。 現在はURLエンコード（パーセントエンコーディング）、およびBase64に対応しています。
URLエンコードはRFC3986とRFC1866に対応しています。両者の違いは、RFC3986が半角スペースを「%20」と符号化するのに対し、RFC1866では半角スペースを半角「+」記号に符号化します。 - 主にWebアプリケーションの開発者、テスト実施者のために作りました。 HTTPのテストツールやcurlコマンドなどで URLに直接パラメータを埋め込みたい場合に役立ちます。
- それだけでなく、Webサイトの運用者またはマーケッターで、 検索ワードなどの収集を行っている方にとっても有用です。多くのキーワード集計ツールは自動で複合してくれますが、何らかの理由でうまく複合できない場合があります。そんな時に手動で変換できます。
- Web上に本ソフトウェアと同等の機能を提供するサービスがありますが、 本ソフトウェアはネットワーク接続を必要としないので、インターネットに接続できないような閉じたネットワーク環境での実行や、 それらのWebサービスにログを残したくない場合などに適しています。またトラフィックによるレスポンスの悪化を気にする必要もありません。
◆ 動作環境
.NET Framework 4.0 が動作する環境。
（Client Profileでは動作しません。フルインストールが必要です。）
- お使いのコンピュータにまだ .NET Framework 4.0 を導入されていない場合は以下のURLからダウンロードしてインストールを行う必要があります。
https://www.microsoft.com/ja-jp/net/netfx4/download.aspx
◆ 使い方
- 変換方法を以下から選びます。
URL Encode/URL Decode/Base64 Encode/Base64 Decode - 文字列の文字集合（Charset）を以下から選びます。
ASCII/UTF-8/UTF-16/Shift_JIS/EUC-JP/ISO-2022-JP - Input欄にテキストを貼り付けます。Output欄に変換文字列が表示されます。
- コピーボタンを押すとクリップボードにコピーされます。
◆ 利用条件
- 本ソフトウェアはフリーウェアとして公開しています。ご利用に当たり料金は発生いたしません。
- 著作権はクロスラボラトリーにあります。
◆ 免責事項
- 本ソフトウェアは無保証です。ご利用によって生じたいかなる損害に対しても作者は責任を負わないものとします。ご自身の責任においてご利用ください。
—
更新履歴
- v0.0.1 （2013-04-01）
公開 - v0.0.2 （2013-04-14）
.NET Framework 4.0のClient Profileのみがインストールされている場合にURLエンコードを行うと例外が発生するのでダイアログを表示するようにした。 - v1.0.0 （2013-05-25）
アイコンを追加して正式版とする
Posted in 
Tags: 
Windows版EclipseのSymfonyプラグインで任意のバージョンを使う
2013-04-10
私は以前からPHPの開発にも統合開発環境ソフトのEclipseを利用してきた。それでも5年程前のものはあまり使い勝手が良いとは言い切れなかった面があるが、WTPそしてPDTの進化に伴って今では私にとって必要不可欠なツールとなっている。
そしてPHPのWebアプリケーションフレームワークであるSymfony2。バージョン1系に比べたら格段に取っ付き易くなった。そしてさらに開発効率を向上させるのがEclipse用のSymfonyプラグインだ。Eclipseで新規Symfonyプロジェクトを作成すると、基本的なWebアプリケーションのアーキテクチャは既に出来上がっている状態で開発をスタートできる。
ところがこのプラグイン、Symfonyのバージョンは2.0.17と2.1.2しか用意されていない。一応カスタムレイアウトと称して、Symfonyのサイトからダウンロードした任意のバージョンのアーカイブファイルを利用してプロジェクトのセットアップができるようになっている。なのにWindowsで作業をした場合、プラグインの不具合のためかエラーとなってしまい先に進まない。今回はそれを解消する力技を紹介したい。
尚、Eclipseのバージョンは3.7(Indigo)、Symfonyプラグインは2013年4月10日現在マーケットプレイスで入手できる最新版を用いた。Symfonyのバージョンは2013年4月10日現在公式サイトでダウンロードできるバージョン2.2.1を試した。
まず普通に設定を試みる。Eclipseのメニューから ウィンドウ＞設定 を選択し、設定画面を開く。設定画面のメニューから Symfony＞Distributions を選択し、 Custom Symfony distributions 欄の「新規」ボタンを押下する。ファイルダイアログが開いたらアーカイブ（例えば Symfony_Standard_Vendors_2.2.1.tgz ）を選ぶのだが、何故かファイルのあるフォルダを開いてもファイルが見えない。それでもファイル名を直接入力することで登録は可能だ。
次に今登録したアーカイブを使ってSymfonyプロジェクトを作ってみよう。Eclipseメニューの ファイル＞新規＞プロジェクト… を選ぶ。新規プロジェクトダイアログが開いたら Symfony＞Symfony Project を選んで「次へ」ボタンを押下する。 New Symfony project ダイアログが表示されるのでプロジェクト・レイアウトの欄のリストから Custom project layout を選ぼう。すると隣のアーカイブのリストの表示が不自然ではないだろうか。アーカイブを1つしか登録していなくてもリストは2項目表示され、しかも1つ目はドライブレターのみだ。試しに「プロジェクト名」欄に入力してもエラーが表示されて先には進めないはずだ。
これは推測だが、おそらくWindowsのパスに含まれるコロン「:」をUnix系でいうパス区切り文字として処理してしまっているのではないだろうか。その証拠に、リストのアーカイブ名のパスの最後にセミコロン「;」がくっついている。セミコロンはWindowsにおけるパス区切り文字だ。（作者はもしかしたらMacで開発しているのかもしれない。）
しばらく悩んだのだが、これを解決するには直接設定ファイルを書き換えるしかないと思った。この設定ファイルは以下の場所にある。
1 | {ワークスペースのパス}\.metadata\.plugins\org.eclipse.core.runtime\.settings\com.dubture.symfony.ui.prefs |
このファイルをテキストエディタで開き、
1 | Symfony\ distributions=C\:\\path\\to\\archive\\Symfony_Standard_Vendors_2.2.1.tgz; |
となっているところを次のように書き換える。但し、ドライブレターを省略するため、Eclipseをインストールしているドライブである必要がある。
1 | Symfony\ distributions=/path/to/archive/Symfony_Standard_Vendors_2.2.1.tgz\: |
書き換えたら保存してEclipseを再起動してみよう。そして先ほどと同じ様に新規プロジェクトを作成してみて欲しい。今度はエラーもなく、最新のバージョンでSymfonyプロジェクトをセットアップできたはずだ。
余談だが、これをやったら設定画面からは設定し直すことはできない。尤も、設定し直しても全く意味ないが。そのうち作者が気付いてこのような手段をとる必要が無くなるだろう。
—
jQueryにてチェックボックスの状態を取得する
2013-04-01
よくWebアプリケーションで一覧表があると、それぞれのレコード（行）の頭にチェックボックスがついていて、チェックしたものをまとめて更新したり削除したりするようなUIを見かける。そして必ずと言って良いほどそれらチェックボックスの全てにチェックを入れたり外したりする操作ができるようになっている。
その操作の手段としては［全選択］［全解除］というボタンが用意されていたり、ボタンの代わりに全選択／全解除用のチェックボックスが見出し欄に設けてあったりする。どちらの場合でもjQureyを知らなかった時には実装するのはそこそこ大変だったが、jQueryを使えば簡単にできる。ところが後者の場合にちょっと躓いてしまったので整理してみたい。
後者の場合というのは、全選択／全解除用のチェックボックスがクリックされた時に、チェックの状態によって全選択するか全解除するかを決める。だが、チェックボックスのチェック状態を取得しようとして以下のようなコードを書くと動きそうなのだがうまくいかない。
1 2 3 4 5 | $(function(){ $("#checkAll").click(function() { $("#anyForm :checkbox").attr("checked", $("#checkAll").attr("checked")); }); }); |
オブジェクトの属性は .attr() メソッドで取得すると覚えていた。ところが公式のドキュメントをよく読んでみると、オブジェクトの属性（プロパティ）は .prop() で取得した方が良いようだ。以前はうまくいっていたと思っていたのはボタンで実装していたからだった。公式ドキュメントの一部を抜粋して意訳しよう。
jQuery1.6より前のバージョンでは.attr()メソッドで属性を返す時にプロパティを考慮することがあり、時として矛盾した動作をすることがあった。1.6以降のバージョンでは、.prop()メソッドが厳密にプロパティを返し、その一方で.attr()メソッドは属性を返す。 （中略）
W3Cの仕様によると、checked属性は二値なので値があるときはtrue、値が無いか空の場合はfalseである。二値の属性は全て同様である。
尚、公式ドキュメントにはさらに記法による振る舞いの比較表が掲載されている。
| コード例 | jQueryバージョン | 返される値 |
|---|---|---|
elem.checked | — | true（可変） |
$(elem).prop("checked") | 1.6以降 | true（可変） |
elem.getAttribute("checked") | — | “checked”（初期状態・不変） |
$(elem).attr("checked") | 1.6.0 | “checked”（初期状態・不変） |
$(elem).attr("checked") | 1.6.1以降 | “checked”（可変） |
$(elem).attr("checked") | 1.6より前 | true（可変） |
これを見る限り以前は動いていたというのは錯覚ではなかったようだ。つまり、もしjQueryのバージョン1.6以降を利用しているのなら、先ほどのコードは次のように書かなければならないということになる。
1 2 3 4 5 | $(function(){ $("#checkAll").click(function() { $("#anyForm :checkbox").prop("checked", $("#checkAll").prop("checked")); }); }); |
| お飲み物 | |
|---|---|
| ビール（中瓶） | |
| 日本酒（1合） | |
| 焼酎 麦・芋（グラス） | |
| ウィスキー（シングル） | |
| ワイン 赤・白（グラス） |
jQueryで階層を選択する
2013-02-20
階層を選択する方法としては次の4種類が基本。言葉で説明するよりも視覚的に示した方が分かりやすいだろう。子供とか子孫とか兄弟とかいう言い方が英語の和訳で分かりづらい。なので意訳してみた。
Aに直接ぶら下がっているBだけを選択（子供）
Aより下の階層にある全てのBを選択（子孫）
Aと同じ階層で直後に続くBだけを選択（隣接）
Aと同じ階層の全てのBを選択（兄弟）
jQueryで全ての要素を選択する “*”
2013-01-19
全ての要素を選択する。
尚、このセレクタを使用すると動作が非常に遅くなるので注意。（セレクタ単独で使用する場合を除く）
次のデモは現在表示されているページ内の全ての要素（headやbodyも含めて）の数を数える。
ブラウザのアドオンが自動的にsytleやlinkなどの要素を追加している場合はそれらも数えてしまう。
1 2 3 4 5 6 7 | $(function(){ $("#btnDemo1").click(function(){ var elementCount = $("*").addClass("demo").length; alert(elementCount + " 個の要素があります。"); $("*").removeClass("demo"); }); }); |
一方、次のデモは特定の要素に含まれる要素の数を数える。
1 2 3 4 5 6 7 | $(function(){ $("#btnDemo2").click(function(){ var elementCount = $("#test").find("*").addClass("demo").length; alert(elementCount + " 個の要素があります。"); $("#test").find("*").removeClass("demo"); }); }); |
WEBアプリで保存忘れを防止するチェック用スクリプト
2012-10-25
よくWEBアプリケーションを利用していると思わず感心してしまうUIに出くわすことがある。例えばある大手SNSのプロフィール設定画面などがそれだ。プロフィールをいろいろいじっていてやっぱり止めたということはあるだろう。でも逆にうっかり保存しないでリンクをクリックしてしまい、せっかく書いた内容がパーになってしまうというケースもある。
ところが先ほどのSNSでは、保存前の状態で内容に変更があると、別の画面を開こうとした時に確認ダイアログが表示されるのだ。初めて見たときはなるほどと思った。これなら確かにうっかり保存し忘れるということも防げる。優れたUIだと思う。
ではこれを自分で実装してみたいと思った時、どうするか。まず最初に思いつくのはフォーム内のすべての項目の、変更前の値を保持しておき、ボタンが押されたりリンクがクリックされた時に全ての項目について現在の値と変更前の値とを比較するという方法である。愚直だが確実だ。しかし、項目が10個程度の編集画面であれば良いが、100ぐらいを超えるとそのやり方では正直厳しい。
そこで一つの例として、jQueryの serialize というメソッドを使ったやり方を紹介したい。このメソッドはフォームの内容をいわゆる Query String に変換してくれるものだ。データの型は文字列なので保持も比較も簡単だ。
例えば次の例はよくある予定管理のWEBアプリだと思っていただきたい。フォームの内容を適当に編集してから画面上のどこでも良いのでリンクをクリックしてみて欲しい。
もし、何も変更点がなければそのままリンク先のページを開くだろう。
だが、何かしら変更されている場合は確認ダイアログが表示され、OKを押せばリンク先を開き、キャンセルを押せば元の画面のままのはずだ。
これは具体的には次のようなスクリプトを書いている。
(1) 最初に表示したタイミングでフォームの内容を文字列に変換してbeforeという変数に保持しておく。
(2) リンク（ボタンにすることも可能）がクリックされたタイミングで、もう一度フォームの内容を文字列に変換してafterという変数に保持しておく。
(3) before と after を比較し、異なっていれば警告を出す。
ちなみに文字列化したフォームの内容は次のようなものである。フォームの内容を変更すると文字列も変化する様子が確認できるだろう。
1 2 3 4 5 6 7 8 9 10 11 | var before = ""; $(document).ready(function() { before = $("#frm_my_form").serialize(); // (1) $("a").click(function() { var after = $("#frm_my_form").serialize(); // (2) if (before != after) { return confirm("保存されてませんがよろしいですか？"); // (3) } return true; }); }); |