Volt·クライアントとサーバサイドが両方Rubyで書けるフレームワーク MOONGIFT
最近、新しいプロジェクトをやろうと思う度に使う言語で悩んでいます。好きなのはRubyまたはnodeなのですが、テンプレートエンジンやWebブラウザで使う言語を統一したいと思うとnodeが最適に思えます。 しかしそんな中、Rubyでもサーバサイドとクライアントサイドを統一できるフレームワークが出てきました。それがVoltです。 Voltの使い方 VoltはOpalを使うことでクライアントとサーバのコードを一緒に書くことができます。以下はデモのTodoアプリ。 サーバサイドに遷移することなく描画が更新されます。WebSocketを使っています。 二画面にした場合にも同時に反映されます。 VoltはHerokuにデプロイすることもできます。YouTubeの動画を見ると分かりますが、まるで魔法のようにサーバ向けに書いたRubyのコードがそのまま使えたりと、サーバとクライアントの区別がなくどんどん開
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
Jailed - 任意のJavaScriptを安全にサンドボックス実行
ユーザがJavaScriptを自由に実行できると嬉しいですが、中には悪意をもって実行する人たちがいます。そのためクロスドメイン、Cookieの許容範囲など制約が幾つも存在します。これらがあるために、ユーザにJavaScriptの記述を許可しないといったサイトも少なくありません。 しかし安全なJavaScriptだけであれば通しても良いのではないでしょうか。そのための仕組みがJailedです。 Jailedの使い方 JailedはWeb Workersを使ってJavaScriptを実行することで画面をロックさせない仕組みになっています。また、許可していないコード（例えばalertなど）は実行できないようになっています。 面白いのは while(true); のようなコードを実行しても画面はロックされず、しばらく待つとエラーが出るといった仕組みになっています。実行結果を受け取るだけの仕組みなの
js-xlsx - JavaScriptでXLSXファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました やり方は分かるんですが本当にやってしまうのが素晴らしい。 MS Office 2007以降ではファイルフォーマットがXMLをベースにリソースファイルなどをZipで圧縮したものになっています。そのためZipを解凍すればファイルの内容を読み取ることもできます。 とは言え記法の問題もあって読めるのと情報を読み取れるのとでは意味合いが違っています。そこで作られたのがjs-xlsxです。ExcelファイルフォーマットであるXLSXファイルを読み取るJavaScriptライブラリです。 デモのHTMLファイルにXLSXファイルをドロップします。 CSVとして解析させるとちゃんとファイルの内容がカンマ区切りで取り出せているのが分かるかと思います。 JSONにするとさらにJavaScriptとの連
ダイナミックなアニメーションを実現する·Anima MOONGIFT
AnimaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。 CSS3になって、スタイルシートを駆使すれば華麗なアニメーションが実現できるようになってきました。しかしそこには限界もあります。そこでより本格的なアニメーションを作り上げたいと考える方はAnimaをベースにしてみると良さそうです。 元素記号が踊るアニメーションです。3Dになっており、視点を変えられます。 奥に傾けたり… 右側を奥にしたりできます。 ボールがバウンドします。徐々にバウンドが緩んでいくアニメーションをスタイルシートで実現しています。 これだけでは分かりづらいのですが、右から左へバウンドしながら跳ねていきます。 遅延を使ってシーンごとのアニメーションを実現しています。 AnimaはCSS3ベースのアニメーションに対して実行や停止、そのイフェクトをJavaScriptを使って
データの追記読み込みに対応するテーブル·StreamTable.js MOONGIFT
StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。 ページネーションもどんどん増えていきます。 検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。 仕組みとしてはAjaxでデータを取得しています。 StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
動画をnode.jsを使ってリアルタイムイフェクト·Seriously.js MOONGIFT
Seriously.jsはnode.js/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MozillaではWebの最新の技術を使ってどんなことができるのか、その最先端の体験をソフトウェアでさせてくれます。今回は動画を使ったSeriously.jsを紹介します。 一件何の変哲もない動画ですが… ボタンを押すと場面が変わります。 さらに変わります。人物は同じですね。 実際の撮影動画。いわゆるクロマキーです。 つまりこれはHTML5/node.jsを使って動画をリアルタイム合成しているという訳です。背景は動画でなく写真ですが、若干動くようになっています。 Seriously.jsではボタンを押すと背景がその場で変更できます。GPUを使う事で60FPSを維持します。入力は画像、動画、Canvasが選択でき、出力はCanvasになります。2Dイフェクトやテキス
SVGをCSSを使ってHTMLで表現·svg2css MOONGIFT
svg2cssはPython製のオープンソース・ソフトウェア（MIT License）です。 SVGのベクター画像はもっと使われるべきだと思うのですが、レガシーなブラウザでは表示ができないのが躊躇させてしまう要因です。そこで試してみたいのがSVGをCSSで表現してしまうsvg2cssです。 使い方は簡単で、ターミナルでSVG画像を指定する程度です。 元のSVG画像です。半透明の部分があります。 こちらがHTML化されたものです。再現性はとても高いです。 ソースを見るとCSSのスタイルが数多く出力されているのが分かります。 日本語のテスト。ばっちり出力されています。 ぼかしを加えた版もあります。こちらも問題なさそうです。 複数のデータをスライド式にしたSVGのテストです。左右をクリックして切り替えられます。 こんな感じです。 画像のテスト。画像の形を変えたり、一部だけを表示したりする事もでき
Yahoo製、軽量なレスポンシブWebデザインフレームワーク·Pure MOONGIFT
Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。 Webサービスのデザインテンプレートとして一躍有名になっているBootstrap。そのライバルとも言える存在、Pureが登場しました。開発元はあの米Yahooです。 様々なテンプレートが登録されています。こちらはフォーム。 ボタン。フラット系の色合いです。 メニュー。ドロップダウン付きのメニューもサポートされています。 もちろんページネーションも用意されています。 サンプルデザイン。メール風。 Pureは短縮化およびGzip圧縮して5.7KBと小さいサイズなのが特徴です。もちろんレスポンシブWebデザインをサポートしています。ガチガチなデザインテンプレートではなく、必要な場所だけをピックアップしたり、自分なりのカスタマイズが行えるのが特徴に上がっています。 MOONGIFTはこう見る Boostrapは
工業製品風の出力をWebに·Industrial.js MOONGIFT
Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。 処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。 メーター表示です。液体や温度計風で面白いです。 その他LED、電光掲示板風もあります。 Industrial.jsではタンク、温度計、LED、電光掲示板、ゲージと種類が用意されています。いわゆる工業系の計測機器、出力機器を模しています。それぞれJavaScriptで指定するだけで使えるので手軽です。素材などを用意する必要もないので、プログレスバーの代わりに適用することも考えられるでしょう。 Industrial.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る リアル、ネットに限らず顧客がい
PHPのAPIドキュメントを生成·Sami MOONGIFT
SamiはPHP製のオープンソース・ソフトウェア（MIT License）です。 システムのドキュメントを生成するタイプのソフトウェアは幾つかありますが、そのコマンドの書き方を忘れてしまったりします。そこで設定ファイル化することで定期的なドキュメントアップデートを可能にするSamiを紹介します。 Symfony2のソースコードをドキュメント化したデモです。左にクラス、右は一覧が出ています。 適当に選択してみました。メソッドやその詳細が表示されています。返り値もちゃんと出ていて分かりやすいです。 メソッドの説明。引数や返り値、説明文も出ています。 内容によってはphp.netへのリンクにもなっています。 検索はインクリメンタルに行われます。検索結果の一部が太字になります。 Symfony2やTwig、Zend Framework2などのフレームワーク向けの設定が用意されています。後はこれをP
一行の記述で使えるJavaScriptグラフライブラリ·Chartkick MOONGIFT
ChartkickはRailsやそれ以外のシステムで手軽に使えるグラフライブラリです。 Web上にグラフを描こうと思うと途端に面倒な気がしてしまいます。そこで使ってみて欲しいのがChartkickです。Railsとの親和性の高いグラフ描画ライブラリです。 線グラフ。 円グラフ。 棒グラフ。 複数シリーズ（円グラフは対応していません）。 ChartkickはGoogleチャートまたはHighchartsを使ってグラフを描きます。Railsでは1行で出力できていますが、実際にはJSONデータを出力しているだけなのでRailsでなくとも使えます。さらに直接JSON出力ではなく、scriptタグを使ってグラフデータの読み込みを別処理化することもできます。 ChartkickはRuby/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グ
これまでの資産も活かせる！Web/アプリ対応のノベルゲームを開発しよう·ティラノ・スクリプト MOONGIFT
ティラノ・スクリプトはWebベースで動作するノベルゲームを開発するフレームワークです。 Webブラウザベースでノベルゲームを提供したいと思ったらその基盤にぜひティラノ・スクリプトを使ってください。HTML5ベースのノベルゲームを作成できるでしょう。 まさにノベルゲームそのままな画面です。 メニューです。 タイトルも表示されます。 読みながらティラノ・スクリプトの使い方が勉強できます。 ティラノ・スクリプトはKAG3/吉里吉里と高い互換性を持っています。そのため既存のWindows用ゲームからティラノ・スクリプトに対応したゲームを簡単に作成できます。つまり既に既存の作成ツールは多数ある訳で、そのデータを使ってWebベースのノベルゲームが作れるわけです。さらにPhoneGapでラッピングしてアプリ化もできます。 ティラノ・スクリプトはJavaScript製、MIT Licenseのオープンソー
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アプリケーションフレームワーク·Emy MOONGIFT
Emyはスマートフォン向けのWebアプリケーションフレームワークです。 スマートフォン向けのWebアプリケーションフレームワークは幾つか存在します。有名なところではjQuery MobileやSenchaでしょうか。その土俵に乗り込まんとするEmyを紹介します。 良くあるiPhoneアプリ風のUIです。 色々なデモが用意されていますので試してみて下さい。 パネル系UI。 キーワード検索用ボックス。 ボタン。 リスト。 音楽アプリのデモ。 実際に音楽が流れます。タブを切り替えてもちゃんと音楽は流れ続けます。 コンタクトリストアプリのデモ。 ノートアプリデモ。 ちゃんと追加できます。 マップアプリ。マップは色々な表現でデモが用意されています。 Instagram連携。表示のみですが。 テーマを変更して。こちらはAndroid風。 Windows Phone風。 拡張もできます。 拡張の一つ。ア
Rubyを実行できるWebKitベースのブラウザ·Decaf MOONGIFT
DecafはWebKitからフォークし、Ruby実行エンジンを載せたWebブラウザです。 Webブラウザで使えるプログラミング言語はJavaScriptだけです。ActionScript/.NET/Javaも使えますが、それはプラグインを使わないといけません。そんな状況に反旗を翻し、Rubyが動くようにしてしまったのがDecafです。 サンプル。クライアントサイドでRubyを実行して、その結果を描画しています。 コンソールも使えます。 CSSやJavaScriptのURLやパスを指定して読み込んでいます。 AjaxのようにGETでファイルを取り込めます。 Hello Worldを出力した例。 DecafはWebKitからフォークし、Rubyを組み込んだWebブラウザです。scriptタグにおいて、typeをtext/rubyとしてRubyコードを実行することができます。今のところMac O
深いインデントであっても色付けすれば見やすく·JavaScript Scope Context Coloring MOONGIFT
JavaScript Scope Context Coloringはシンタックスやスコープによる色づけができるJavaScript用ハイライトライブラリです。 JavaScriptのプログラミングではコールバック方式のコーディングが多いため、インデントが深くなりがちではないでしょうか。そこで使ってみたいカラーリングツールがJavaScript Scope Context Coloringです。 分かるでしょうか。スコープによってカラーリングが変わっています。 こちらは通常のシンタックスによるカラーリング。 さらに分かりやすくするとこんな感じに。8階層までサポートされています。 インデントがあまり深くなると可読性が下がるために個人的には好きではないのですが、深くなってしまうのであればそれに向いた見せ方があると思われます。変数のスコープも色づけで分かるようになったりすると変な不具合が紛れ込まな
jQuery Mobileを使ったサイトでフラットUIを実現·jQuery Mobile Flat UI Theme MOONGIFT
jQuery Mobile Flat UI ThemeはjQuery Mobile用のフラットUIテーマです。 スマートフォン向けのWebサイトをjQuery Mobileで構築しているなら試したいのがjQuery Mobile Flat UI Themeです。最近流行のフラットなUIをサポートしたテーマです。 ボタン類。アイコンも使えていい感じです。 リストと見出し付きコンテンツ。見出しをクリックすると内容が表示されます。 アイコンやツールバー。スライダーもあります。 主なカラーは黄色、緑系2色、赤、青そして白黒となっています。色を使いすぎないシンプルさ、影などがないフラットな見た目が好感です。 jQuery Mobile Flat UI ThemeはjQuery Mobile用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 有名なフレームワーク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
