iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク·ChocolateChip MOONGIFT
ChocolateChipはHTML5/CSS3/JavaScript製のオープンソース・ソフトウェア（BSD License）です。 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版とも言えるChocolateChipを紹介します。 例えばこちらはiPhone風。iOS 7に似ています。 同じ内容でAndroid風。 こちらはWindows Phone向け。 Todoなどで使えるリスト。 同じ表示もAndroid風にすると印象が随分変わりますね。 AndroidでスイッチUI。 iPhoneでレンジ。 削除できるリスト。 ポップアップ。 ポップオーバー。 タブバー。 ページネーション。 シート。半透明なのがiOS 7に似ていていい感じです。 リスト。サムネイル付きです。 アイコン付きリスト。 ChocolateChipはiOS 7風UIに対
はてなブックマークの共有機能をiOSアプリに組み込もう·Hatena-Bookmark-iOS-SDK MOONGIFT
Hatena-Bookmark-iOS-SDKはiOS用、Objective-C製のオープンソース・ソフトウェア（MIT License）です。 日本における最大のソーシャルブックマークサービスと言えばはてなブックマークです。TwitterやFacebook同様にソーシャルの拡散を期待するなら見逃せない存在です。そこでiOSアプリからでも情報を共有できるSDK、Hatena-Bookmark-iOS-SDKを使ってみましょう。 デモアプリです。右上の共有ボタンを押してみます。 共有ダイアログが出ます。はてなブックマークを選択します。 認証が必須です。筆者環境ではなぜか認証が完了できませんでした。 OAuth認証が行われます。予めコンシューマキーの設定が必要です。 こちらは公式サイトより。コメントやタグの入力が容易にできるようになります。 Hatena-Bookmark-iOS-SDKはブラ
iOS 7風UIをWebで再現·Project-Tyson MOONGIFT
Project-TysonはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 間もなくリリースすると思われるiOS 7。あのがらっと変わったUIをWebで再現するのがProject-Tysonです。 コンタクトリスト。スクロールしてもヘッダ部は残ります。 コンタクトを選ぶとメッセージ送信フォームになります。 送信しました。 アバウト。アニメーションが下から発生するようになっています。 Project-Tysonは詳細を説明するブログ記事も書いており、そのエッセンスがコードとブログ記事の両方から学べるようになっています。今後iPhone向けのWebサイトを開発する際にはチェックした方が良いでしょう。 MOONGIFTはこう見る iPhoneが登場した直後からiPhoneアプリ風UIを模したWebテンプレートが多数登場しました。iOS 7の登場以
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
MySQL/SQLiteのER図を描くPHPスクリプト·mysqlviz MOONGIFT
mysqlvizはMySQL/SQLiteの構造を可視化するライブラリです。 DBを使ったシステムを構築していると必要になるのがER図ではないでしょうか。そんなER図を実際のデータベースのダンプファイルをベースに描き出すのがmysqlvizです。 ヘルプです。 まずdotファイルを生成します。 さらにdotファイルをpngに変換して得られた結果です。 mysqlvizはMySQLとSQLiteに対応しています。MySQLの場合はダンプファイル、SQLiteの場合は実際のデータベースファイルを読み込んでdotファイルを出力します。後はGraphvizを使ってPNG画像に変換する仕組みになっています。 mysqlvizはPHP製、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る mysqlvizの面白いところはMySQLについてはダンプファイルを使っているということ
熱意に期待。将来Web上で初音ミクが踊る日がくるかも？·mmd.js MOONGIFT
mmd.jsはMikuMikuDanceのファイルをJavaScriptでWeb上に描画するライブラリです。 初音ミクを踊らせることができるソフトウェア、MikuMikuDanceをWebブラウザ上で再現しようと試みるソフトウェアがmmd.jsです。まだまだ開発途上のようですが今後が楽しみです。 現状はこんな感じです。 理想的な形（公式サイトより）。 MMDのファイルは仕様が公開されていないらしく、実際のファイルから意味を読み取って実装しているというかなりマニアックなソフトウェアになります。初音ミクへの愛情がなければ、決してここまでできないでしょう。まだ特徴点を読み取るレベルですが、近い将来Webブラウザ上でも初音ミクが踊っているかも知れません。 mmd.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこ
仕事をこなして経験値を積み重ねるRPG風タスク管理·HabitRPG MOONGIFT
HabitRPGはタスクやゴール管理システムをRPG風にしたソフトウェアです。 Todoをただこなしているだけではモチベーションも上がりづらいでしょう。そこでゲーム的にしてしまおうと考えたのがHabitRPGです。RPGのように一歩ずつ着実に成長しながらタスクをこなすのです。 トップページです。最初はレベル1からのスタートです。 タスクをクリックすると詳細が表示されます。 タスクを処理すると経験値が上がっていきます。 アイテムを購入するとHP（？）が消費されます。 レベルが上がるとリワードが増えます！ HabitRPGはタスク管理の他、自分のゴールを定めて、その目標に向かって着実に成長していくという過程を楽しむこともできます。機械的にただこなすだけでは味わえない楽しさがあるはずです。 HabitRPGはnode.js製、GPLのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
JavaScriptを使ってSVGでグラフを描く·Morris.js MOONGIFT
Morris.jsはjQueryを使ったSVG描画型のグラフライブラリです。 Webブラウザ上でグラフを描画しようと思ったら従来はサーバサイドの仕組みかFlashを使うのが一般的でした。しかし今後はJavaScriptが便利です。Morris.jsはjQueryを使ったグラフライブラリです。 二つのデータがある折れ線グラフ。 棒グラフ。 エリアグラフ。 パイチャート。 今のところ対応しているのは折れ線、棒、エリア、ドーナッツチャートになっています。それぞれ豊富なオプションが用意されています。また、マウスオーバーで値をフローティング表示してくれるのも便利です。データはJavaScriptで与えますが、グラフはSVGで出力される仕組みになっています。 Morris.jsはjQuery/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
Webブラウザ、Google ChromeでJSON構造の確認、編集·JSON Editor Online MOONGIFT
JSON Editor OnlineはWebブラウザやGoogle Chrome機能拡張として動作するJSONビューワー、編集ソフトウェアです。 RESTfulのWeb APIなどでよく使われるようになったJSONフォーマット。構造が分かりづらかったり、自分で手作業でJSONファイルを作成したりするといった時に便利なのがJSON Editor Onlineです。 トップページです。左側がJSON、右側がその解析結果のツリービューです。 項目を追加しました。中央にある左右の矢印ボタンをクリックすると反映されます。 右側でツリーを使って値を変更したりキーを追加したりできます。 その結果を逆に差し戻すこともできます。 配列も表現されています。 検索機能もあります。 URLを指定してJSONの取得ができます。 JSONの内容は小さくすることも可能です。 JSON Editor OnlineではJS
テーブルデータからCSSベースのグラフを生成·Magna Charta MOONGIFT
Magna Chartaはテーブルデータを読み込んでグラフを生成するJavaScriptライブラリです。 Web上で奇麗なグラフを見せるためのライブラリは多いですが、そのデータ指定周りは面倒という印象があります。そこで使ってみたいのがテーブルデータをグラフにしてくれるMagna Chartaです。 通常の横棒グラフと積み立てグラフ。 実際のデータ。テーブルのデータがグラフになります。 複数の項目が合わさったグラフ。 実際のデータ。その下にサイズの異なるグラフも表示されています。 マイナスの値をつけることもできます。 データは単純にマイナスの値になっているだけ。 Magna ChartaのグラフはSVGやCanvasではなく、スタイルシートで行われています。そのため、色や太さなどのカスタマイズが容易に行えるのが利点です。今のところ横棒グラフのみですが、他のグラフにも対応してほしいライブラリで
デバイスに応じて情報量を制御したい時に使えるjQueryライブラリ·Responsive Content MOONGIFT
Responsive Contentは画面幅に応じてコンテンツの出し分けを行うためのjQueryライブラリです。 レスポンシブWebデザインの弱点として、送信するデータ量はデバイスの大きさに関わらず同じというのがあります。非表示にすることはできますが、データが送られているのには変わりません。そこで使ってみたいのがResponsive Content、デバイスに応じて送信コンテンツ量を制御できるソフトウェアです。 参考例。デスクトップであれば20件程度の記事が出ます。 画面幅を縮めた場合、5件程度の記事になりました。 Responsive Contentの仕組みはシンプルで、jQueryを使ってデバイスの幅や種類を送信します。それをサーバサイドで受け取って、送信するコンテンツ量を制御するという仕組みです。 Responsive ContentはjQuery/JavaScript製、MIT L
スマートフォンにも対応。Webブラウザ用IRCクライアント·WebIRC MOONGIFT
WebIRCはデスクトップ/スマートフォンに対応したIRCクライアントです。 今はメッセンジャー、チャットなど様々なコミュニケーション手段がありますが、その元祖とも言えるのがIRCです。そんなIRCを今風にWeb対応させてくれるのがWebIRCです。 トップページです。 接続しました。 チャットルームにも入れます。 スマートフォンにも対応しています。 パスワード設定も。 WebIRCはデスクトップはもちろんスマートフォンにも対応しています。WebIRCを使えばスマートフォンのアプリやWebブラウザなど様々なクライアントからIRCの利用ができるようになるでしょう。 WebIRCはRuby/Sinatra製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る IRCは個人的にとても好きな技術ですが、難点としてはテキストオンリーで普通の利用者にとっては使い勝手
JSONを使った開発のお供にどうぞ·jq MOONGIFT
jqはターミナル上で使えるJSONパーサーです。 JavaScriptの台頭に伴ってJSONを共通のファイルフォーマットに使うことが増えてきました。システムから取得したJSONファイルの内容を調べる時に使いたいコマンドがjqです。 元のJSONです。 resultsの1つ目だけを出力。 2つ目だけ。 一つ目、さらに項目を指定して出力。 全ての結果、ただし項目を指定して出力。 さらに情報を追加して出力もできます。 jqはMac OSXやLinux向けのコマンドであり、標準出力されたJSONファイルを読み込み、加工した上で出力できます。かつインデントを含めて成形してくれるのでデータの見やすさが格段にあがるはずです。プログラミング言語のライブラリから扱うよりも手軽ではないでしょうか。 jqはC製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web AP
最低限かつ十分なスタイル設定が特徴のCSSフレームワーク·Kube MOONGIFT
Kubeはプロフェッショナル向けのCSSフレームワークです。 見やすく、かつ様々なニーズに対して即座に答えられるようなデザインを考えるのはとても大変なことです。しかしその道のプロが作り出したスタイルシートフレームワークであるKubeを使えば実現しやすくなるかも知れません。 デモページです。リンクやサイドバーが並んでいます。 こちらはシンプルなベース表示。 iPhoneに対応。 全て一列になって表示されます。 タブレット向け。こちらも最適化されます。 横向きだとうまくいかず…残念。 こちらは表示例。Bootstrapのようなrowが使えます。 フォーム。 テーブル。 リンクの色変更も用意されています。 ボタン。 Kubeの特徴は優れたタイポグラフィ、グリッド表示、フォーム、テーブル、様々なクラスユーティリティ（.width-50とすれば半分になるなど）、ボタンなど最低限ながらも実用的なスタイ
手軽に電子書籍を作成できるコマンドツール·easybook MOONGIFT
easybookは電子書籍作成のためのベース生成、PDF/HTML生成をコマンドベースで行えるソフトウェアです。 電子書籍を作成するのは大変そうなイメージがありますが、easybookを使うとごく手軽に作成を進められます。書籍作成プロジェクトの作成から実際の電子書籍生成まで一通り面倒みてくれます。 とりあえず実行しました。幾つかのコマンドが用意されています。 まずは新規ブックを作成します。 作成しました。 構成はこういう形になっています。 設定ファイルの内容です。 次に作成です。文書のタイトルとエディションを選択します。例えばprintはPDF生成します（設定できます）。 生成されました。奇麗なPDFです。 目次も生成されています。 コードも奇麗です。 エディションをwebにするとHTMLが生成されます。 コード部分も奇麗です。 デモ動画です。 easybookはコマンドラインでファイルを
Mac OSX版PhoneGap。Web技術でアプリを開発·MacGap MOONGIFT
MacGapはHTML/JavaScript/CSSを使ってMac OSXアプリを開発できるフレームワークです。 PhoneGapと言えばApache財団に寄贈され、Apache Cordovaと名前が変わったプロジェクトですが、iOSやAndroidなど各種スマートフォン向けのアプリがHTML/JavaScript/CSSで開発できます。そしてMacGapも同様のWeb技術でMac OSXアプリが作れてしまいます。 まずベースを作成します。 ビルドしました。MacGapと表示されています。 5秒後にGoogleが表示されました。 Growlによる通知にも対応しています。 自動生成されるHTMLです。 MacGapはシステムのビープ音、別なアプリの起動、ウィンドウの移動や別ウィンドウのオープン、ドックのバッジ操作、音楽の再生、Growl、通知、エベントの取得などがサポートされています。簡単
管理画面もあるPHP製の認証システム·AuthManager MOONGIFT
AuthManagerは認証およびユーザ管理を提供するシステムです。 Webサイトを作っていて認証はよく必要になります。しかしその度に作っていては面倒に感じることでしょう。そこでAuthManagerを組み入れてみましょう。認証とユーザ管理を一手に引き受けてくれる便利なソフトウェアです。 登録画面です。 ログイン画面です。 ログインしました！アイコンも表示されています。 こちらは管理向け。ユーザ管理画面です。 設定です。 reCAPTCHAの設定です。 AuthManagerの主な機能は指定されたコードを埋め込むことでコンテンツへのアクセスを制限できるようにする、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポートとなっています。 AuthManagerはPHP製のソフトウェア（ソースコード
Google Driveを使ったオンラインコードエディタ·Neutron Drive MOONGIFT
Neutron DriveはGoogle Drive連携のコードエディタです。 Google Driveで気になるのはGoogleドキュメントと完全には連携しておらず、オンラインでのファイル編集ができないことです（一旦エクスポートしないといけないのは不便です）。そんな中注目したいのはNeutron Drive、Google Drive連携型のプログラミングコードエディタです。 インストールします。 Googleアカウントと紐づける必要があります。 Googleドライブ、ドキュメントへのアクセス権限が必要です。 メイン画面です。左側は検索とファイルツリー、右側が編集画面です。ファイルが色々とあるのでファイルツリーはお見せできませんが…。 一気に寄せて編集部を大きく出来ます。 設定ウィンドウです。 複数ファイルを開けます。 https://www.youtube.com/watch?v=Piy
Google製。Google Chromeを使ったスクリーンキャプチャツール·Screen Capture (by Google) MOONGIFT
Screen Capture (by Google)はGoogle Chrome上でWebサイトのスクリーンショットを取得、加工できるソフトウェアです。 Webサービスを作っているとスクリーンショットを必要とする機会は多いのではないかと思います。Windowsデフォルトのスクリーンショット機能を使う人はいないと思いますが、今回はScreen Capture (by Google)を紹介します。Chrome上でスクリーンショットの取得、加工が行える便利な機能拡張です。 インストールはChromeウェブストアでできます。 右上のメニューが機能になります。 まず一部だけのキャプチャ。 キャプチャした後、簡易的な編集ができます。 簡単にぼかしが加えられるのは良いかも。 囲んだり線を引いたり文字を追加したりできます。 続いて長いページの場合、上から下までスクロールしてキャプチャできます。 後は見えて
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
