なんと！Webブラウザ上で動作するLinuxエミュレータ·jor1k MOONGIFT
jor1kはJavaScript製、GPLのオープンソース・ソフトウェアです。 JavaScriptを頑張れば何だってできる、確かにそうかも知れません。しかしここまでできるとは思いもしなかった。jor1kは何とJavaScriptによるLinuxエミュレータです。 実行中。左がコンソールです。 立ち上げ中。 viだって使えますよ！ cat使って内容の出力ももちろん可能。 topだって使えちゃう！ X Windowも実装されています。速度はあれですがちゃんと動くだけですごいです。 マウスでウィンドウを動かしたりすることだってできます。 メニューも出せます。 jor1kはOpenRISCを使ってJavaScriptで作られたLinuxエミュレータになります。速度面では多少の難がありますが、10年くらい前のマシンはもっと遅かったイメージがあるので十分満足できる速度ではないかと思います。 何より再
Web上で3D型のキューブを回転させるイフェクト·HexaFlip MOONGIFT
HexaFlipは写真などのコンテンツを立方体にして回転させられるJavaScriptライブラリです。 写真やコンテンツの見せ方を工夫すれば、閲覧した人の受ける印象は全く変わってきます。ただ表示するだけでは面白くない、と考える方はHexaFlipを使って回転するコンテンツなんていかがでしょう。 並んだボックスが不定期に回転します。 こういう写真の回転も格好いいです。 時間表示。マウスでドラッグして時間を変更できます。 デモ動画です。 写真のようなコンテンツやロゴが回転したりしていても面白いかも知れません。回転するアニメーションGIFはよくありますが、JavaScriptで実装しているのでユーザに合わせたコンテンツや、イベントによるアクションが実現できるのが魅力でしょう。 HexaFlipはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTは
Bootstrapで使えるWYSIWYGエディタ·bootstrap-wysiwyg MOONGIFT
bootstrap-wysiwygはBootstrap用のリッチなWYSIWYGエディタです。 使い勝手の良さもあってBootstrapを使ったWebサイトが増えています。より便利に使うためには多彩なウィジェットが欠かせません。今回はBootstrap用WYSIWYGエディタ、bootstrap-wysiwygを紹介します。 シンプルなUIで使い勝手が良さそうです。 文字の装飾は簡単にできます。ツールチップが出るのもいい感じです。 画像の埋め込みにも対応しています。ファイルフォームを使って画像を読み込む形になっています。 URLの埋め込み。ダイアログではないのがポイントです。 文字サイズの変更もできます。 bootstrap-wysiwygではさらにマイクアイコンをクリックして音声によるテキスト入力にも対応しています（Google Chromeの機能を使っています）。さらにホットキーへの対
哀愁漂う懐かしのデザインを現在の技術で再現·Geo MOONGIFT
GeoはBootstrapを使って懐かしのジオシティーズ風デザインを施すテーマです。 かつてホームページホスティングの代表として知られたジオシティーズ。Yahoo!に買収された後、2009年に解散していますが、そんなジオシティーズ風ホームページを現在の技術で作り上げたのがGeoです。 おお、このカオスっぷり。まさに90年代後半のテキストサイト風です。 無意味にアニメーションGIFが使われています。それっぽいです。 ボタンやフォームの囲みもそれっぽい。placeholderはいけてないですが。 工事中もよく見かけました。工事中のまま終わったホームページも多かったことでしょう。 派手な色遣い、カウンターなどそれっぽいです。 今時、こういったテイストのWebサイトを見かけることはまずないですが（日本では一部病院のサイトがありますが）Geoを使うとかつてあった懐かしい感じの微笑ましいWebサイトが
絵本のようにページがめくれる操作·BookBlock MOONGIFT
BookBlockは任意の画像コンテンツにめくる操作を提供するライブラリです。 電子書籍を閲覧する際に欠かせないのがめくるようなフリップ操作です。今回は任意のコンテンツに対してフリップ操作を提供するBookBlockを紹介します。 何となく絵本風のデザイン。 クリックで次のページに切り替わります。半分に折れる感じでめくれるのがいい感じ。 スライダー風に表示することもできます。 こちらはまさに電子書籍風。 ページ内に隠れたアクションを埋め込むこともできます。 BookBlockは紙のようなめくりというよりは絵本のような厚めの紙をめくるような操作を提供します。めくれ方は気持ちがいいです。また、コンテンツの中に別なコンテンツを隠すと言ったような面白い機能も提供しています。 BookBlockはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこ
Webサイトの説明をまとめて表示してくれるヘルプライブラリ·Chardin.js MOONGIFT
Chardin.jsはWebサイトの画面上に項目の説明を表示するJavaScriptライブラリです。 スマートフォンアプリをはじめ、Webアプリケーションで最初に表示した時に説明を表示するタイプのWebサイトが増えてきました。凝ったものもありますが、もっとシンプルに実装したい時に使えそうなのがChardin.jsです。 最初の表示です。ボタンを押します。 各DOMごとに説明が表示されます。 ソースを見ると分かりますが、data-*で表示する内容を指定しています。 Chardin.jsは説明用のテキストとその表示位置（上下左右）、さらに一度表示した後ボタンを非表示にしたり、逆に別な要素を表示したりすることもできます。汎用的ではないかも知れませんが、手軽にチュートリアルやヘルプ画面を実現するのに便利そうです。 Chardin.jsはJavaScript製、Apache License 2.0の
熱意に期待。将来Web上で初音ミクが踊る日がくるかも？·mmd.js MOONGIFT
mmd.jsはMikuMikuDanceのファイルをJavaScriptでWeb上に描画するライブラリです。 初音ミクを踊らせることができるソフトウェア、MikuMikuDanceをWebブラウザ上で再現しようと試みるソフトウェアがmmd.jsです。まだまだ開発途上のようですが今後が楽しみです。 現状はこんな感じです。 理想的な形（公式サイトより）。 MMDのファイルは仕様が公開されていないらしく、実際のファイルから意味を読み取って実装しているというかなりマニアックなソフトウェアになります。初音ミクへの愛情がなければ、決してここまでできないでしょう。まだ特徴点を読み取るレベルですが、近い将来Webブラウザ上でも初音ミクが踊っているかも知れません。 mmd.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこ
円や棒グラフをサポートしたCanvasによるグラフライブラリ·Chart.js MOONGIFT
Chart.jsはHTML5/Canvasを使ったグラフライブラリです。 Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。 折れ線（曲線）グラフです。 棒グラフ。 レーダーチャート。 円のエリアグラフ。 円グラフ。 ドーナッツチャート。 Chart.jsはHTML5/Canvasで表示されているのが特徴です。なおサポートブラウザとしてはIE7から対応しています。対応しているグラフは折れ線、棒、レーダー、円のエリア、円、ドーナッツの6種類になります。表示の際にはアニメーションが実行されますが、その後はマウスクリックなどには反応しないようです。 Chart.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフト
Google Playから消えてもインストールできる広告遮断アプリ·AdAway MOONGIFT
AdAwayはAndroid用の広告遮断アプリです。 先日GoogleがAndroidにおいて広告ブロックアプリを相次いで削除しました。理由はともあれGoogleが認めなければGoogle Playでは配信ができません。しかしAndroidには独自で配布するという道が残っています。そこで紹介したいのがAdAwayです。 Google Playから削除されたのでF-Droidからインストールします。 メイン画面（公式サイトより）。 最新のサービスリストをダウンロードします（公式サイトより）。 設定画面（公式サイトより）。 AdAwayはhostsファイルを書き換えることで広告配信サービスのURLを遮断して広告表示を行わないようにします。言われてみれば簡単なことですが、それをアプリによって自動化してしまった所が利点です。なお利用に際してroot化する必要があります。 AdAwayはAndroi
Web上でGitの使い方をレクチャー·Learn Git Branching MOONGIFT
Learn Git BranchingはWebベースでGitの使い方を学べるソフトウェアです。 企業においてもバージョン管理にGitを利用するケースが増えてきました。しかしその機能を使いこなせていないことも多いのが事実です。そこでGitリポジトリ、特にブランチに関して学べるLearn Git Branchingを使って学習してみましょう。 トップページです。 自動的にコマンドが入力されて、右側のツリーが更新されていきます。 解決するとコミットが飛んでいきます。 ここからが本番です。 基本的にチュートリアルの通りに進んでいくのみです。 まずコミットから。 入力中は答えが見えないように隠されます。にくい演出です。 Learn Git Branchingは実際のコマンドを入力しながら、それがツリーにどういう影響を与えるかをビジュアル的に確認できます。Learn Git Branchingを通して
パズドラのパズルアクションだけをずっと楽しめる·Mugen Pazdora MOONGIFT
Mugen Pazdoraはパズドラのパズル部分を無限に楽しめるクローンです。 1,000万ダウンロードを突破し、ますます人気になっているパズル&ドラゴン（以下パズドラ）。そのパズドラの基本と言えるパズル部分を無限に楽しめるのがMugen Pazdoraです。 見た目はともかくシステム的にはまさにパズドラです。ボールを移動させます。 消しました。 消した分は自動的にボールが落ちてきます。連鎖を狙いましょう！ Mugen PazdoraはHTML5で作られており、マウスはもちろんスマートフォンのタップでも操作できます。パズドラとは異なり4秒制限はなく、タップし続けている限りは動かし続けられます。効率的なボール運びを学ぶための練習にぴったりではないでしょうか。 Mugen PazdoraはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されてい
Googleリーダーに似たUIのWebフィードリーダー·Leselys MOONGIFT
LeselysはGoogleリーダーライクなUIのWebベースのフィードリーダーです。 Googleリーダーが7月1日で終わりというニュースを受けて、世界中のITエンジニアがざわついています。代替のサービスを探す人、これを機に情報収集スタイルを変える人、そして自分でサービスを作ってしまう人もいます。今回はその一つLeselysを紹介します。 ログインします。 メイン画面です。左側にフィード一覧が表示されています。 フィードを選ぶと記事タイトルの一覧が出ます。 記事タイトルをクリックすると記事本文が表示されます。 未読の記事はタイトルが太字になっています。 設定画面です。 購読しているフィード一覧。 LeselysはGoogleリーダーと似たスタイルでの購読ができます。現時点ではキーボードショートカットがなかったり、記事本文を表示する際のアニメーションがちょっと面倒であったりしますが、今後の
JavaScriptの開発に。スローモーションで実行して結果確認·SlowmoJS MOONGIFT
SlowmoJSは記述したJavaScriptを一行ずつ実行し、その結果を出力するライブラリです。 JavaScriptをデバッグする際にはconsole.logを使うのが一般的です（一部のIDEではブレークポイントもありますが）。しかし今回はJavaScriptを一行ずつ実行させられるライブラリ、SlowmoJSを紹介します。 実行例。お分かりでしょうか。上に書かれたコードを一行ずつ評価して、その際の変数の値を出力しています。 関数を作った場合も同様です。 SlowmoJSではprintという命令を使って出力を行えます。書いたコードがリアルタイムに評価され、その結果が表示されていくというのは非常に面白いです。ぜひお試しを。 SlowmoJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 今はWebインスペクタやChrome
バイナリハックの際の必需品！·Hex Fiend MOONGIFT
Hex FiendはMac OSX用のバイナリエディタです。 ここ数年、バイナリハックが流行っています（特にJavaScript界隈で）。そこで必要になるのがバイナリエディターではないでしょうか。今回はMac OSX用のHex Fiendを紹介します。 適当なバイナリファイルを開いた図。 右または左側のデータを選択すると逆側の該当箇所がハイライトされます。 もちろん検索もできます。 もちろんエディターなので閲覧の他に編集もできます。バイナリの区切りは自由に変更が可能で、2/4/8/16バイトなどで区切りを変更できます。二つのファイルの差分を見ることも可能です。またテストは118GBもの巨大なファイルで行われており、メモリ上にデータを置かないのも特徴となっています。 Hex FiendはMac OSX用のオープンソース・ソフトウェア（BSD License）です。 MOONGIFTはこう見る
自分で立てるInstagram風サーバ·ownStaGram MOONGIFT
ownStaGramは独自に立てられるInstagram風サーバです。 Instagramは格好いい写真が並んでいて良いんだけど、Facebookに買収されたり規約の変更問題があったりして自分のデータがちゃんと自分のものであり続けられるか心配…といった方はownStaGramを使って独自のInstagramサーバを立てちゃいましょう。 写真ページ。写真が大きく表示されていい感じです。 一覧ページ。地図にマッピングされているのが良いです。 個人のページももちろんあります。 ownStaGramではAndroidアプリも配布しており、サーバのアドレスを自由に変更した上でログインできるようになっています。Androidアプリの方はオープンソースではないようですが、写真を撮影してフィルターをかけてといった操作はできるようです（筆者が試した限りではログインでエラーになってしまうのですが…）。 own
APIやモジュールによる拡張、管理画面を備えた柔軟なCMS·ProcessWire MOONGIFT
ProcessWireはPHP製のCMSで、入力フィールドのカスタマイズも可能なソフトウェアです。 WebのCMS、特にPHPといえばWordPressが真っ先に思いつくかも知れませんが不得意な領域も必ず存在します。それだけに他のCMSについても把握しておくのは利点が多いはずです。今回はProcessWireを紹介します。 デモサイトです。こちらはトップページ。 一覧。 詳細。地図とも連携しています。 アバウト。 こちらは管理画面です。 ページ一覧。シンプルです。 編集画面。こちらは項目がない、タイトルだけのものです。 階層管理されているので子供のリストがあります。 さらに展開もできます。 こちらはページ内容がある場合。 ページごとの設定画面。 アバウトの編集画面。 モジュールはたくさん用意されています。 アクセス権限管理。 ProcessWireはPHP/MySQLで作られています。デー
これは面白い。Amazonのメニュー表示の仕組みをjQueryで実装·jQuery-menu-aim MOONGIFT
jQuery-menu-aimはAmazonの右上メニューの動作を真似たjQueryライブラリです。 このソフトウェアを見てはじめて気がついたのですが、Amazon.(co.jp|com)の左上にあるメニューはとても面白い動きをしています。一階層目のメニューはマウスオーバーで二階層目の内容がリアルタイムに反映されるのですが、二階層メニューにマウスポインタを動かす際に多少別なメニューに被ったとしても内容が変わりません。それをjQueryで実装したのがjQuery-menu-aimです。 クリックでメニューを表示。 マウスを下に移動すると右側に項目を表示します。 反応はとてもいいです。 通常であれば二階層目の表示反映タイミングを遅らせるようにするか、マウスの動きに過敏に反応して二階層目に移行したら別なメニューの内容を表示してしまった、なんてことになりかねません。縦と横の動きをうまくキャッチする
多数のマークアップに対応したドキュメント変換プレビューツール·Markup Previw Command MOONGIFT
Markup Previw Commandは各種軽量ドキュメントマークアップの変換、プレビューソフトウェアです。 軽量なマークアップ言語は種類が増えていますが、その作成は容易でもプレビューが意外と面倒です。そこで使ってみたいのがMarkup Previw Command、コマンド一つで各種マークアップのHTMLとプレビューが実現します。 実行しました。Webブラウザがさっと立ち上がって便利です。 使い方。ファイルを指定しつつ、-o browserをつけるとブラウザが立ち上がります。 対応しているフォーマットはMarkdown、textile、Rdoc、Org、Creole、MediaWiki、ReStructuredText、AsciiDoc、Podとなっています。拡張子をつけておけばマークアップは自動設定なので手軽に使えます。 Markup Previw CommandはRuby製、MI
シンプルなフラットを追求したデザインテンプレート·Flat UI MOONGIFT
Flat UIはプラスチック的質感を持った柔らかいデザインのテンプレートです。 格好いいUIのWebサービスを作るかどうかで最初のウケは全く違ってくるでしょう。Bootstrapで作るとどうも臭いがとれなくて…とお悩みの方はFlat UIを使ってみましょう。 基本的なオブジェクト。ボタンやメニューです。 フォーム系。タグやトグル入力もサポートされています。 ベクター画像やアイコン。 サンプル。プラン選択もよさげです。 おお、インスピレーションがわきますね。 Flat UIは何となくプラスチックのような質感で、すっきりと見やすいデザインになっています。色合いもポップで柔らかく、原色系のはっきりとした感じはありません。Webサイトに柔らかさを求める際に良さそうです。とは言えこの手のフラットなデザインは使いこなしも難しいので注意が必要です。 Flat UIはHTML/JavaScript/スタイ
400種類を越えるカメラに対応したJavaScriptによるRAWファイルビューワー·rawson.js MOONGIFT
rawson.jsはデジタルカメラのRAWファイルを読み込み、描画するJavaScriptライブラリです。 デジカメで撮影した際のフォーマットではJPEGが最も一般的ですが、よりこだわる人はRAWファイルとして保存して自分で加工するのではないでしょうか。そんなRAWファイルをWeb上で閲覧するためのソフトウェアがrawson.jsです。 デモです。RAWファイルをドロップします。RAWファイルはソニーのRAWデータダウンロードよりお借りしました。 読み込み中…かなり待たされます。 読み込まれました。超巨大です。 もちろんメタデータの読み込みにも対応しています。 RAWファイルは特に統一された規格はなく、メーカーによってまちまちな構造になっています。そのためrawson.jsでは各社の仕様に対応し、なんと400以上のカメラに対して対応しています。サイズはそれなりで、500KBもある凄いJav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
