過去分はこちら。

2014年01月


2014年02月


2014年03月


2014年04月


2014年05月


2014年06月

今回は7月のまとめです。今回はバラエティーに富んだソフトウェアになったかと思います。開発、デザイン、ナレッジ共有など様々なジャンルのソフトウェアがあります。ちょっと前までHTML5をテーマにしたソフトウェアが多かったですが、その段階は越えて徐々にHTML5が当たり前になってきたのかも知れません。
Epoch – リアルタイム描画に対応したCanvas/SVGグラフライブラリ

Webアプリケーションが企業においても利用されていくようになると必要になるのがグラフです。膨大なデータを見やすく整形して表示し、トレンドを見つけられるようにしなければなりません。そのためには多種多様なグラフライブラリを知り、それがどのニーズにマッチするかを把握しておく必要があります。今回はリアルタイム系グラフに向いたEpochを紹介します。Epochはデベロッパーフレンドリー、リアルタイムグラフ、Canvas/SVG両方への対応が特徴となっています。グラフはリアルタイムに対応しているので刻々と変わっていくデータをどんどん描画し続けられるようになっています。
Odyssey.js – 地図とテキストをミックスした格好いいコンテンツ

地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。Odyssey.jsのコンテンツはMarkdownフォーマットで記述します。ただしcenterやzoomなど特別な気泡も幾つかあります。
Octicons - GitHubで使われているWebFont

他のサイトで使われているリソース、フレームワーク、画像などが気になるということはよくありますよね。そんなとき、有償のものだとちょっと高くて手が出せない場合もあります。しかしGitHubが自社サイトで使っているアイコンリソースをOcticonsとして公開しました。これでGitHub内で気になったアイコンであればすぐに使えるようになります。OcticonsはSVG、TrueTypeフォントで公開されています。そのためWebFontとしてプロジェクトに組み込めるようになっています。
　

今回のテーマはネットワーク管理です。社内には有線、無線LANがあって当たり前で、外に出ればLTEやWiMAX、公衆無線LANが使えて当然のようになっています。しかしだからこそネットワークが使えなくなったり、オフラインの場所に移動すると相当困ることになります。
そこで今回はネットワーク管理を行う類のユーティリティ、ソフトウェアや最近のトピックを取り上げて紹介します。
トピック
認証
無線LANを今更WEPで設定している人はいないと思いますが、さらにセキュリティを高めるためにMACアドレス制限を使っている企業は多いかと思います。しかしiPhoneは今後MACアドレスを取得できなくなりますので、これを使った認証は不可になるでしょう（タブレット、スマホを接続不可とするなら別ですが）。
RADIUSサーバを用いた認証も可能ですが、大掛かりになってしまうのが難点と言えます。ただしRADIUSサーバを構築すれば認証の一元管理も可能なので、煩雑化する認証情報を統合する意味で導入しても良さそうです。
ネットワーク図
無線LANでネットワークを構成すると、線がないためにどのように接続されているのか分かりづらくなります。ケーブルがなければネットワークが使えないというのは分かりやすかったのですが、最近では強度によって使えたり使えなかったりするケースが出ています。
そのため最近では社内の図面とヒートマップを組み合わせてネットワーク図を作成するケースが多いようです。そのためのソフトウェアも活用したいですね。
開発時のネットワーク速度
スマホアプリを開発している場合、社内LANを使っているとネットワーク速度が速いために実際のユーザ体験が再現できない場合があります。そこでネットワーク速度を調整できるプロキシが活躍します。
特に新興地域では3Gネットワークすらおぼつかなかったり、パケットエラーの率がかなり高いので、そういったネットワークを再現できるソフトウェアが必要です。単に速度を遅くするだけでは分からないエラーが起こりえるでしょう。
テザリング
ようやくスマホを使ったテザリングも当たり前になってきました。モバイルバッテリーも軽く、小さくなってきましたのでモバイルルータでなくとも、iPhone/iPadのテザリングを使って一日中ネットワークが使えるようになってきています。
7GBの制限はありますが、筆者の場合そこそこ使っている感覚でも到達しないで過ごせています（動画やダウンロードを行っていないからでしょう）。
Webアプリケーションのオフライン時対応
ネットワークがあるのが当たり前になると逆に気をつけないといけないのがオフライン時です。アプリケーションキャッシュを使ったり、オフラインの判定をして操作できないようにするといった工夫が必要でしょう。
スピードテスト
ネットワーク速度がどうなっているのか、それはいつでも気になる所です。昔であればFlash製のインターネットスピードチェッカーが有名でしたが、最近ではHTML5またはアプリとして提供されるものが使われるようです。
個人的にはWiMAX2のネットワーク速度計測にずっと使っていました。WiMAXは建物内が弱く、場所によってかなり差異が出るので最良の位置が分からないと損するかと思います。
　

今回のテーマはデータベース管理です。Webシステムでは使うのがほぼ当たり前になっているデータベースですが、そのパフォーマンスを最大限引き出すためにもデータベースの管理は必須です。
管理は実データの管理と設定値を含めた管理があると思いますが、今回は実データ側の管理に重点を置いてご紹介します。
トレンド
MongoDB
ここ数年、MongoDBに対する注目が高まっているようです。NoSQLの筆頭とも言える存在であり、かつ位置情報を柔軟に扱えるというのが大きいのだと思います。そのため、フロントエンドもMongoDBに対するものが多く出てきています。
ローカル
昔はフロントエンドをWebサーバ上にインストールして利用していましたが、最近はGUIフロントエンドも増えています。とは言え、これは稼働しているDBサーバのものを扱うのではなく、開発時にローカルのDBを操作するためにあるようです。
クラウド
最近はやはりクラウドが隆盛で、MongoHQのようにクラウドベースでデータベースを提供するサービスが増えています。ビジネスの肝になる存在だけに、運用を慣れたところに任せたい、サーバを立てる手間を軽減したり、スケーラブルにしたいといったニーズがあるようです。
マイグレーション
Ruby on Railsからはじまった流れだと思いますが、データベースのスキーマを適切に管理したいというニーズは強くあります。現在ではRailsに限らず、各プログラミング言語向けにマイグレーションライブラリがあります。
さらに既存のデータベースに対してもスキーマの差分を表示するライブラリがあったりと、データベースもプログラマブルに管理するのがトレンドになっています。
　

今回はWordPress以外のブログエンジンを紹介します。発信する、という目的だけを考えればASPサービスやWordPress/MovableTypeなどを使う方が効率的です。しかし開発者たるもの、そこに甘んじることなく、自分の道を切り拓きたいですよね。
ということで最近のトレンドと合わせてご紹介します。
トレンド
静的
ブログエンジンと言えば動的なシステムによって生成されるものが多かったのですが、最近では静的HTMLを生成するタイプが増えています。コメントはDiscusなどを使って管理しています。MovableTypeのコンセプトに立ち戻っているようですが、管理画面がない（そもそもローカルでコンテンツを作成する）のが異なる点です。
コンテンツのリポジトリ管理
データベースにコンテンツを保存せず、Gitで管理するタイプが増えています。こちらのがシンプルですよね。
node製が増加
ここ1、2年のトレンドとしてnode製ブログエンジンが増えているようです。ブログエンジンは作りやすいということもあると思います。おそらく今年、来年はGo製のブログエンジンが増えていくのではないかと思います。
フォーマットはMarkdownで
コンテンツの書き方として一番人気があると思われるのがMarkdownです。今や様々な場所で使われるようになっていますね。メモ書きとしてMarkdownで書いておく癖をつけておけば、後は一般公開もしやすいのではないでしょうか。
　

今回のテーマはJSONです。Web APIでJSONを利用するのが当たり前になっている現在ですが、その利点や関連オープンソース・ソフトウェアを取り上げます。もっと違った利用法が見えてくるかも知れませんよ。
利点
冗長性が低い、可読性が高い
Web APIとしてXMLが嫌がられたのは記述が冗長的であったことだと思います。JSONではYAMLに比べると波括弧が多い分、冗長的に見えますがそれでもXMLに比べると閉じ括弧がない分、すっきりとしています。その分、可読性が高くなっています。
Webブラウザで容易に扱える
JSONなのでJavaScriptから簡単に扱えるという利点はかなり大きいです。プログラミング時はもちろん、Webインスペクタのコンソール上でもJSONの内容を確認したり、変更したりする際にも使えます。
対応プログラミング言語が多い
今では大抵のプログラミング言語でJSONが扱えます。ただしライブラリによってパースが遅かったり、エラーが出るといった場合もあるので注意が必要です。特に速度面はライブラリによる差異が大きいように思います。
さらにJSONは単純なテキストデータであるため、そのままMySQLに入れておけるというメリットもあります。一時PHPのシリアライズをパースする手法もありましたが、JSONの方がより汎用性が高く、採用されるケースが多かったようです。
簡単に作れる
冗長性が低いのとかぶりますが、構文がシンプルであるために手作業でも作成できるのがメリットです。そのためWebシステムを通さないデータのやり取りに際して手動でJSONファイルを作成して外部システムに送るという方法がよく使われます。
例えば都道府県のマスタをAjaxで送るようにした場合、そんなのはシステムを使わずにJSONを静的に作ってしまってファイルを配置するだけでも十分だったりします。
拡張が容易
元々JSONには検証するための仕組みがありませんでしたが、最近では送受信されるデータのフォーマットチェックにJSONスキーマを使うケースが出てきています。より業務やエンタープライズ系での利用が進んでいる証拠かも知れません。
　

今回はアニメーションGIFがテーマです。動画全盛の時代になってなお、アニメーションGIFの魅力は衰えていません。Twitterでサポートを開始したアニメーションGIFは実際には動画にしているようですが、Vineと同様に無音で繰り返し再生される動画というのはインパクトもあって面白いものです。
使う人たちが多いということは、そこに便利なツールやサービスがあると流行る可能性があります。そこでアニメーションGIFを扱うソフトウェア、Webサービスを集めました。
Webサービス
Webでアニメ（GIF）作成サービス
シンプルなサービスで画像をどんどん追加していくことで最終的につなげて一つのアニメーションGIFにします。さらに画像の上にテキストを重ねることも可能です。
GIFアニメ(アニメーション)作成 | 画像加工編集サイト・フリーソフト：無料写真加工ならバナー工房
最大30枚の画像を合わせたアニメーションGIFが作成できます。点滅間隔、ループ設定が可能です。サーバサイドで処理します。
GIFPAL - Make GIF animations online with webcam and images
Webカムからの映像または任意の画像からアニメーションGIFが作成できます。
Mothereffing animated gif
HTML5で作られています。ドラッグ&ドロップで画像を追加して作成します。クライアントサイドでアニメーションGIFを生成します。
Dynamic Drive: Animated Gif Generator
任意の数の画像をアップロードしてアニメーションGIFを生成します。サイズやスピード、ループ回数の指定が可能です。
GIFMAKE - Gif Generator
HTML5のドラッグ&ドロップを使うことでまとめて画像を登録してアニメーションGIFが作成できます。
オンラインGIFアニメ作成ソフト - GIF Animation Creator
画像5枚までをつなげたアニメーションGIFが作成できます。透過色指定ができます。
　

開発はトータルで見ると、実際にコードを書いている時間よりもテストやデバッグにあたっている時間のが多いように感じます。ことテストにおいてユニットテストや結合テスト、負荷テストなど様々なソリューションが出ていますが、全てのパターンが網羅できる訳ではありません。
やはり不具合は常につきもので、大事なのは問題が起こった時にその詳細を把握して修正できる手段が整っているかどうかでしょう。そこで今回は各種デバッガーを取り揃えてみました。
大事な要素
集中させる
デバッグに必要な情報が分散されてしまうと、その関連性が見えなくなったり、時系列がずれたために全く役に立たない可能性があります。そのためログなどは極力一カ所で管理し、閲覧も串刺しにできるようになっているのが良いでしょう。
エラーは通知系が良い
例えばエラー情報をBTSやプロジェクト管理の自動登録するような仕組みがあるのですが、個人的な経験では気がつくまで見られない（放置される）ように思います。そうならないためにはメールやチャットへの通知など、リアルタイムに問題が起きていることを可視化するのが良いようです。
アプリとWebで欲しい情報が全く違う
スマートフォンアプリとWebではデバッグに必要な情報が全く違います。特に再現性においてはアプリは難しい場合が多いようです。そのため、クラッシュログであったり、操作ログなどを収集できるように作り込んでおく必要があるでしょう。
Webの場合は再現性は高いですが、JavaScript周りのエラーはアプリと同じようにデータをうまく収集していく必要があります。
Android周りは環境依存度が高い
iPhoneは世界中で同じ端末で動作しているので、原因も特定しやすいですが、Androidはデバイスの種類が多彩であり、搭載されている機能もそれぞれ異なるのが問題です。同じ端末が用意できないケースも多いでしょう。
そのため、クラウドで仮想端末を貸し出すというサービスもあります。再現性は高いようなので、Androidのデバッグはそういったサービスを使っていくのが良いようです。
　

今回のテーマはWeb Fontです。アイコンとして使うほか、オープンソースのフォントを中心にWeb Fontを提供するソフトウェアが増えています。そこでWeb Fontを使うメリット/デメリットと関連オープンソース・ソフトウェアを集めました。
利点
サイズ、色が自由に変えられる
Web Fontの最大のメリットがサイズ、色を自由に変更できる点です。2色しか使えないように思われていますが、Stackiconsのように複数の文字を重ねることで多色展開するテクニックもあります。
サイズを変更しても綺麗に表示されるのもメリットです。様々なサイズの画像を用意するのは大変ですが、Web Fontであれば一つの素材で済みます。
ワンパックに収まる
画像であればCSS Spriteを使って一つにまとめる技術がありますが、位置指定がピクセル単位で面倒です。Web Fontは全て一つに収まっている状態で、スタイルシート側で何の文字を出すかを指定すればいいので扱いやすさはいいです。
一つのファイルに収まるということはネットワークも一度のアクセスで済むのがメリットであり、キャッシュも効きやすいということです。
SEO的に有利
これは一概にメリットがあるか分かりませんが、テキストなのでそのままWebクローラーに食わせられるというメリットがあります。alt要素のように忘れることもありません。また、スクリーンリーダーとの相性も良さそうです（アイコンフォントは違うでしょうが）。
システム連携が容易
画像の場合、ユーザが選んで入力させるのは面倒ですが元がテキストであれば扱いやすいでしょう。また、JavaScriptとの連携を考えた場合もバイナリを扱うよりは使いやすいはずです。
欠点
種類が多い
デスクトップ環境では一般的に使われるのはTrueTypeフォントが多いようですが、OpenType/WebOpenFontFormat/EmbeddedOpenType/SVG Fontを用意するのが一般的です。特にWebOpenFontFormatはWeb用に開発されているのでサイズも小さくて済むようです。EmbeddedOpenTypeはいつもと同じようにMicrosoftが開発したIE専用のフォーマットになるようです。
非対応ブラウザがある
Web Fontは幅広いWebブラウザで使えますが、それでも一部のブラウザでは使えないので注意が必要です。なおIEはバージョン4から対応しているなど、Web Fontについてはかなり先進的です。ただし現在はeotのみ対応とガラパゴスな存在になってしまっています。
読み込みに失敗すると豆腐になる
フォントのURLが切れている場合、豆腐表示になってしまいます。アイコンである以上、意味ある情報を分かりやすく表示する必要があるため豆腐になってしまうと操作上大きな問題になる可能性があります。
アイコンをあまり過信せず、テキストと一緒に表示すると言った工夫が必要でしょう。
メンテナンスが大変
Web Fontをダウンロードして利用するだけであれば問題ないでしょうが、作成側になるとメンテナンスがかなり大変な分野と言えるのではないでしょうか。フォーマットが複数ある上、編集と書き出しは専用のソフトウェアが必要です。それゆえ社内で独自のWeb Fontを作成して提供…というのはかなり工数が必要でお勧めできません。
日本語フォントのサイズ
英語、アイコン系Web Fontはサイズがそれほど大きくありませんが、日本語Web Fontは総じてサイズが大きく、オンラインで無制限に使うのに適しません。ただし最近のWeb Font配信サービスではHTML上のテキストを解析して使われている文字だけを動的にWeb Font化するようになっています。これによりキャッシュは効きづらいですが、サイズを軽減できるようになっています。
　

今回はTumblrに関するツールをまとめて紹介します。Yahooに買収されて若干勢いが失われたか、といった感もあります。しかしそれでもデザイン性もあって関連ソフトウェアが次々と登場しています。そこでMOONGIFTでのTumblrの使い方と、関連ソフトウェアを紹介します。
MOONGIFTではコーポレートサイトがTumblrで構築しています。Flatteryというテーマを購入して使っています。テーマのマーケットプレイスがあり、経済圏があるのはデザイナーの方にとって魅力ではないでしょうか。
カスタムドメインが無料で使えるのも魅力と言えます。MOONGIFTではコーポレートサイト以外でも幾つかブログがTumblr上に構築しています。例えばDevRel.jpもその一つです。ちょっとしたWebサイトを素早く構築するのにとても良いです。
他、海外ではメディアサイト自体をTumblr上に構築しているケースがあります。例えばThe Changelogがその一つです。多機能ではありませんが、十分なカスタマイズが可能ということでしょう。
その他、一般的にはスクラップブック目的であったり、写真をストックしたりそれを眺めるために使っているかと思います。この場合はTomblooのような機能拡張を入れておく人が多いかと思います。
WordPress.comでもブログは作れますが、自分で立てた場合に比べて制限が多いように感じます。有料でもカスタマイズできる範囲やプラグインに制限があります。そういったできないことで感じるストレスがあるならば、Tumblrの元々制限がある中で利用した方がスムーズだったりします。テーマのカスタマイズでも意外と作れるサイトの幅が広いです。
カスタムドメインが使えるということはいざとなれば他への乗り換えが効くということです。ブログやWebサイトを作りたいと思ったら、まずはTumblr上で立ち上げてしまって、制限を超えて使いたいと思ったら自分でサーバを立てて乗り換えると言った方法もおすすめです。