今回のテーマはフォーム入力です。Webフォームへの入力はほぼ毎日、何らかの形で使っています。IT系の人たちにとっては当たり前のフォーム入力も、そうでない人たちにとってはとても面倒なものに感じられることでしょう。
特に最近ではタブレットからフォーム入力を行う機会も多くなっています。そのような中ではこれまで以上にユーザストレスを与えない入力形式を心がける必要があります。
主な機能
リアルタイム入力チェック
フォームを送信したタイミングではなく、その場で入力チェックを行うことで何度も入力させられるユーザストレスを下げるのが狙いです。ただしサーバ側の入力チェックと統一するのは面倒で、フレームワークなどから自動的に入力チェックを生成してくれる仕組みがあれば考えたい仕組みです。
時々フォーカスが当たった瞬間に入力チェックが行われていきなりエラーになる場合がありますが、あれはかえってストレスを与えるので逆効果と言えます。
placeholder → ラベル移動
入力時においてplaceholderだけを使ってラベル代わりにするのはユーザビリティが低いです。自分が何を入力すべきだったかをユーザはいちいち覚えていませんので、入力をはじめたら消えてしまうようなplaceholderではあてになりません。
せめてログイン、パスワードなどの2項目程度の場合に限定するか、placeholderに入っている文字列がラベルに移動していくライブラリを使いましょう。ただしその場合、placeholderとしての役割が変わってしまう場合もあります（placeholderは入力例に使いたい場合もあるので）。
フォームを閉じても再現
時々入力中にフォームを閉じてしまう場合があります。これは大きなショックで、二度と入力したいと思わないはずです。そこであらかじめ入力内容を再現できるライブラリを導入しておきましょう。
この手のライブラリは通常、localStrageを使ってフォームデータを保存します。そのためHTML5対応ブラウザに限定されますが、万一の場合の大きな助けになるはずです。
補完/候補表示
スマートフォンの入力においては候補表示が当たり前になっています。これはフォーム入力において役立つ機能です。入力内容がほぼ固定的なものの場合、ドロップダウンで入力させる手もありますが、それでも数十の中から選択するのは困難です。
また、タグのようにこれまでに入力した値から探す場合や、友達の名前から探す場合など自由入力と候補表示を組み合わせるとユーザビリティが高くなるケースは多いです。
自動入力
郵便番号の自動入力や、まとめてチェックなど入力をスムーズにするために自動入力は欠かせません。ユーザは少しでもストレスを感じると避ける傾向にあります。当たり前ですがよほど強い欲求がなければ、あえて苦痛の道を選ばないものです。
そのため補完や自動入力を使ってなるべくスムーズに入力が完了するようにしましょう。
　

HTML5によってファイルのマルチ選択およびドラッグ&ドロップでのファイルアップロードが使えるようになりました。これによりそれまで感じていたストレスから解放されるようになったという方は多いと思います。
とはいえデフォルトの機能をそのまま使っているのではユーザビリティは高くありません。そこで使ってみたいのがJavaScriptベースのライブラリです。
主な機能
画像サムネイル表示
HTML5のFile APIを使って読み込み、canvas上にサムネイル表示を行うのが一般的です。アップロードしようとしているファイルを見せることでヒューマンエラーを防げます。
複数ファイル指定
HTML5ではinput type="file" に対してmultipleをつけることで複数ファイルアップロードがサポートされています。ただしこの場合、2ファイルと表示されるだけで具体的な内容が分かりづらいこと、一部のファイルだけ差し替えができないといった問題があります。
そこで複数ファイル指定で受け取った内容をサムネイル表示することで、一部を削ったり追加したりと言った操作をサポートできるようになります。
アップロード進捗表示
簡単そうに見えて意外と面倒なのがこの進捗表示です。クライアント側でファイルサイズを把握し、サーバ側からどれくらいアップロード済みか取得することで進捗表示を行うのが一般的です。
もう一つのやり方はFile APIを使ってファイルをスライスし、サーバ側でファイルを結合するという方法です。これはリジューム機能とも関わってくる手法です。
レジューム
Webブラウザでも巨大なファイルをアップロードするようになっています。動画であれば1GBを超えることも珍しくありません。そんなときにネットワークエラーが起きて最初からやり直しというのはげんなりします。
そこでファイルを分割してアップロードすることで、レジュームを実現できます。ネットワーク負荷は多少大きくなりますが、それでも失敗した時のリスクに比べるとユーザビリティが高くなると思います。
ファイルタイプ指定
input type="file" に対して accept="image/*" といった指定をすることで画像だけを指定できるようにできます。
ファイル加工
最近はデジカメやスマートフォンで撮影した写真が10MBくらいあることもざらです。しかしサービス上はそこまでの巨大なサイズはいらないことも多いので、アップロードする前にクライアントサイドで縮小し、サイズを軽減できます。これはサーバ側はもちろん、ユーザにとってもアップロードが瞬時に終わるのがメリットです。
ただしRetina対応を考えた場合、Web上でのサイズの2倍で取得する方が良いでしょう。
ドラッグ&ドロップ
HTML5の大きなメリットと言えるのがこのドラッグ&ドロップではないでしょうか。ファイルをアップロードする際にダイアログでの指定ではなく、ドロップが使えるのはとても便利です。
とはいえ指定した場所にドロップしないといけないといった制約はあるので注意が必要です。また、フォルダを同時にドロップしたりすることはできません。いくらか便利にはなったけれど、まだ不便さは残っています。
　

CMSは常に注目の集まるキーワードです。WordPressという大きな主軸がある一方で、多様性あふれるCMSが随時作られています。そこで今回は2014年に紹介した各種CMSと最近のトレンドについてまとめました。
トレンド
特徴をもたせる
汎用的なCMSに人気が集まり、プラグインなどによって必要な機能をあてがっていくというのが一般的です。しかし最近では何かに特化したCMSも人気があります。プラグインは冗長的になったり、CMS全体として品質を担保してくれる訳ではないのでセキュリティリスクにもなりえます。
そこで使う目的がはっきりしているのであれば、それに合ったCMSを導入するというのも検討すべきではないでしょうか。
多機能または単機能
汎用的なCMSは総じて多機能です。様々な機能が含まれる結果、機能が複雑化したり動作が重たくなったりします。とはいえ、多機能であれは様々な目的に応じて使えるというメリットもあります。
その逆に単機能な場合、カスタマイズ前提で作られている場合が多いです。CMSとしては最低限の機能を提供し、足りない機能は自分で補っていきます。この場合、フレームワークを使っているものの方が追加開発がしやすいでしょう。
管理画面不要
ここ数年のトレンドとして管理画面がないCMSが多くなっています。管理画面は解析においては便利ですが、コンテンツを作る際には作成時と見た目が分離してしまうため分かりづらくなります。そのためプレビューと修正を何度も行き来することになります。
管理画面がなく、ユーザの見ている画面上でそのまま修正する場合はそういった面倒さはありません。ただしユーザ管理やアクセス解析などの機能については管理画面がある方が分かりやすいでしょう。
DB不要
データベースを使わないCMSも増えています。コンテンツを履歴管理（バージョン管理利用）している場合は特にその傾向が強くあります。数百万人が使うサイトであればともかく、数千人レベルであればDBがなくとも十分と言ったケースは多いはずです。
DBがなければ設置が容易になったり、小規模な場合は高速に動作するようになります。100ページ程度のコンテンツを考えると、Gitリポジトリ上でコンテンツ管理する方がローカルで編集ができて便利ではないでしょうか。
　

ITの世界は日進月歩で進んでいます。そんな中でITエンジニアとして成長していくための銀の弾は固有の技術ではなく、継続して学習し続けるという心構えです。
そこで新言語を学ぶためのサービス、さらにはプログラミング自体の学習ができるサービスを紹介します。これからプログラミングを学んでいこうとする人たちにとっても役立つはずです。
Webサービス
CodeCombat - Learn how to code by playing a game
ゲームの作成を通じてJavaScriptコーディングを学びます。
Login:CheckiO
プログラミングスキルを通じてゲームの世界を遊ぶというコンセプトのサービスです。Pythonのコードになるようです。
GeekDojo 〜プログラミングの学習にぬくもりを〜
まだ未公開ですが、プログラミングのメンターを見つけるサービスのようです。
Code School - Try jQuery
jQueryの学習ができるサービスです。
　

今回のテーマはWebGLです。iOS 8においてようやくSafariがWebGLをサポートするようになります。これでスマートフォン、タブレットにおいてもWebGL利用が広がっていくと思われます。
そこでWebGL利用を促進させてくれるようなWebサービス、オープンソース・ソフトウェアを紹介します！
Webサービス
HERE
Nokiaが開発した3Dマップサービスです。例えばここがニューヨークの街並みになります。日本は対応していませんが、3Dマップはさくさくと表示されます。
Mozilla and Unity Bring Unity Game Engine to WebGL | The Mozilla Blog
UnityもMozillaと協力し、現在のプラグインベースからWebGLベースのゲームエンジンにしていくと発表しています。今後ゲーム開発者にとって、WebGLは必修の技術になると言えそうです。
3Dfile.io - 3D File Sharing Simplified
3Dモデルファイルをアップロードし、共有できるWebサービスです。3Dモデルデータは作るのが大変なため、こうやって共有される場ができることはWebGLによるゲーム、3D開発を後押ししてくれる存在になるでしょう。
　

Webサービスの中で画像を加工したいというニーズは多々あります。ちょっとしたものであればアバターの登録もそうです。アップロードされた画像をそのまま使うのではなく、サムネイルにサイズ変更して使ったり、正方形にしたりすることは良くあります。
サーバサイドに仕組みを用意しても良いですが、それでは共有サーバで使えなかったり、インストールが面倒なことも良くあります。そこでWebサービスやクライアントサイドで使える画像加工ライブラリを使ってみるのは面白そうです。
Webサービス
FoodPic! - Make your photo looks delicious!
食べ物の写真を美味しそうに加工するサービスです。食べ物特化というポイントが良いですね。
無料画像加工サイト インデックスカラー減色と言えば | OPTPiX WebFree | ウェブテクノロジ
専門の画像最適化エンジンを使って減色処理を行い、綺麗にします。回転やフィルタリングも可能です。
JPEGmini - Your Photos on a Diet!
JPEG画像のサイズを小さくします。見た目には殆ど変わらず、元画像に比べて1/3以下にまでサイズ軽減できる場合もあるようです。
TinyPNG – Compress PNG images while preserving transparency
こちらはPNG画像のサイズ縮小です。意外とPNGサイズを小さくする処理は重たいので、サーバサイドで一気にできるのは便利かも知れません。
画像加工の無料サイト：写真加工.com
170種類以上の加工が指定できる画像加工サービスです。似顔絵、トイカメラ、ポラロイドなど実に数多くの設定があります。
Home | FaceYourManga
イラスト風の加工をしてくれます。写真をアップロードするだけなので手軽です。
人物の写真修正・画像修正サービス「美女フォト」
女性（だけではないと思いますが）の写真を綺麗にしてくれるサービスです。有料なのがユニークです。
Loupe | Shape Your Photos
写真を並べてハートなどの形にしてくれるサービスです。写真から別な画像を作るのは面白いですね。
Free Watermark. Add Custom Watermark. Protect Your Photos and Images - PicMarkr
写真にすかしを加えます。
　

あなたの好きな軽量マークアップ言語はなんでしょう。高機能なものが好きな方はreStructuredText、見た目にも分かりやすく学習コストが低いものを望む場合はMarkdownを選ぶ傾向があるように思います。
そこで今回は多彩に増えてきた軽量マークアップ言語とその利点、そして各種ソフトウェアをまとめて紹介します。
主な記法
現在主なフォーマットとしては下記のようなものがあります。

Markdown


Textile


reStructuredText


ReVIEW


AsciiDoc


Wikitext


はてな記法

特に大きなシェアがあるのと言えば、Markdownではないでしょうか。コンテンツ量からすればWikipediaでも使われているMediaWiki形式が最も多いかも知れませんが、現在は様々なサービスでMarkdownフォーマットが使われています。
可読性の高さと学習コストの低さ
Markdownが受け入れられた大きな要因は可読性の高さと学習コストの低さでしょう。HTMLのように閉じタグが不要であり、いつも使っているテキストエディタで記述ができます。今では多数のMarkdown専用エディタも作られています。
学習コストの低さによってコンテンツ量が増えるとますます他の記法への乗り換えが難しくなってきます。時に物足りなさを感じることもありますが、拡張フォーマットを使うことで大部分が解決できたり、足りない機能を使いたいと思うケースはあまり多くなかったりします。
他のフォーマットへの変換
軽量マークアップ言語では主にHTMLへの変換がメインですが、中にはPDFやePubへの変換をサポートしているソフトウェアもあります。これら周辺環境（ソフトウェア）が揃っているかどうかも記法選択時の大きな要因になると言えます。
システムとの繋ぎ込み
API BlueprintではMarkdown記法をベースにシステムと連携できるフォーマットに変換できるソフトウェアを提供しています。かつてWSDLやUMLが担っていたような領域を軽量マークアップ言語が担える可能性があります。
パーサーが存在するということは記法が統一されており、HTMLへの出力以外の用途にも使うことができます。またAPIドキュメントを書いたり、システム面でも様々な応用が行われています。
今後の課題
現在の主だった記法は単純に書きかたが定義されているのみで、足りない機能は使えないというのが一般的です。しかしそれでは足りない機能があればそもそも記法が採用できなかったり、用途に合わせて記法を選ばないといけません。
そこで拡張性をもたせた記法が登場してきています。各種プログラミング言語がライブラリ管理を供えるのと同様に、記法も拡張ライブラリを備えていくのは良い傾向といえます。ちょうどWikiにプラグインが出てきたのと同じような感じです。