Skyline - CSSフレームワーク開発のベースに
どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。 そこで使ってみたいのがSkylineです。Skylineはデザインフレームワークという訳ではなく、カスタムスタイルシートフレームワークを構築する差異の出発点として欲しいと考えているライブラリです。 Skylineの使い方 Skylineは4つの階層に分かれています。ベース、エレメント、レイアウトそしてモジュールです。それぞれ目的に沿って、書き加えていきます。SkylineはOOCSS/SCSSを使って書けるようになっています。 HTMLの構造はHTML5に沿って書かれており、モバイルファーストな設計思想になっています。さらにjQueryの組み合
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
micropolisJS - ハマると危険なHTML5製シムシティクローン
これは危険！ 筆者はシムシリーズに良い思い出がありません。例えば夢中になりすぎて学校に遅刻したり、寝不足になったり、気がつくと週末を全てシムシティーやシビライゼーションに費やしてしまったり…ろくな思い出がありません。 そんな触るな危険シリーズの初代シムシティがHTML5/JavaScriptで開発されています。それがmicropolisJSです。 最近のシムシティでは色々なメッセージが出て、街を成長させるパラメータも多彩にありますが、さすがに初代とあって内容がシンプルです。作れるオブジェクトも大して多くありません。 何より怖いのはmicropolisJSはJavaScriptだけで動作しているということです。データを保存する仕組みがないので、中途半端にはじめるとブラウザを終了させることができなくなります（再読み込みすると最初からやり直しです）。 仕事で忙しい方は絶対に下のリンクはクリックし
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
ローカルでTumblrのテーマをさくさく作成·Thimble MOONGIFT
ThimbleはローカルでTumblrのテーマを作成できるソフトウェアです。 Tumblrのブログ数が1億を越え、さらに広がりを強めています。そんな中とあって、テーマを作成する需要も増えています。しかしTumblrのテーマ作成は思いのほか退屈なようで、それを解決してくれるソフトウェアとしてThimbleが登場しました。 まるでTumblrのデザインそのままです。 画像の表示など多数のパターンに対応しています。 Thimbleはローカルに設置してTumblrテーマの作成ができます。つまりPHPでTumblr専用のタグを解釈し、表示を行っているということです。後はローカルファイルを自分の好みのエディターで編集し、再読み込みしてデザインの反映を確認できるようになります。格段に作業スピードが上がりそうです。 ThimbleはPHP製、GPLのオープンソース・ソフトウェアです。 MOONGIFTはこ
面白い！自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
Web上でGoogle Chrome機能拡張のベースを作成·Extensionizr MOONGIFT
ExtensionizrはWeb上でオプションを選択して目的に合わせて最適化されたGoogle Chrome機能拡張のベースがダウンロードできるソフトウェアです。 Google Chrome機能拡張を作る際にぜひ使ってみて欲しいのがExtensionizrです。多様なオプションを使ってGoogle Chrome機能拡張のベースを生成します。 トップページです。 オプションが色々用意されています。 生成されたZipファイルを解凍すると機能拡張のスケルトンが入っています。 まず最初に機能拡張の種類を選びます。隠し、ページアクション、ブラウザアクションの3つがあります。さらにバックグラウンドページやオプションページ、機能の上書きなどをオプションで指定し、最終的にZipファイルとしてダウンロードします。 ExtensionizrはHTML/JavaScript製、MIT License/GPLのオ
これがHTML？と言いたくなるようなPDF変換ソフトウェア·pdf2htmlEX MOONGIFT
pdf2htmlEXはレイアウトの再現性を極めたPDFからHTMLへの変換ソフトウェアです。 PDFはそのままでは容易に編集できないフォーマットです。そこが利点でもあり欠点でもあります。PDFを別フォーマットに変換するソフトウェアは幾つかありますが、今回は驚いてしまうくらい品質高いHTML変換を行うpdf2htmlEXを紹介します。 これがHTMLだと思えないくらいの再現度です。 計算式にも対応。 段組み、画像埋め込みも問題なし。 白黒に限らず扱えます。 中国語。マルチバイト対応です。 まるで素のPDFを表示しているかのような再現度の高さがpdf2htmlEXの売りです。PDFを一つのHTMLファイルとして出力し、色や文字の装飾も反映します。リンクもそのまま使えます。なお、Type3のフォントには対応しておらず、テキスト以外のオブジェクトは画像としてレンダリングされるようになっています。
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
選んだ文字だけをSVG Fontsにまとめる·Fontomas MOONGIFT
FontomasはWebブラウザ上で任意のアイコンだけのSVG Fontsを作成できるソフトウェアです。 Web Fontsを使うと画像を使わずに素敵なフォントをオンライン上で使えます。しかしフォントを読み込むために転送量が大きくなってしまうのが欠点です。そこで使ってみたいのがFontomasです。SVG Fontsを使って自分で選んだアイコンだけをWeb Fonts化できます。 様々なアイコンフォントが並んでいます。自由に選んでいきます。 さらに色々なアイコンがあるので適当に選びます。 アイコンサイズを変更することもできます。 選んだものだけが抽出されます。 SVGが出力されました。これを使えばWebフォントとして使えます。 保存ダイアログです。 Fontomasを使えばフォント全てを読み込まずに選んだものだけを使えるようになります。そのためサイズが小さくなるのが利点です。また、複数のソ
HTML5の中でも使える、使わない方が良い機能を学ぶ·HTML5 Please MOONGIFT
HTML5 PleaseはHTML5の利用推奨度を機能ごとに検索できるソフトウェアです。 HTML5が登場してしばし経ちましたが、それでも積極的に使っていくのを躊躇している人も多いのではないでしょうか。そこでHTML5の中でもどの機能を使っていくべきか、または避けるべきかを教えてくれるのがHTML5 Pleaseです。 トップページです。HTML5対応Webブラウザで見てみましょう。 インクリメンタルなフィルタリングもできます。 使えるか使えないかは色分けして表示されます。 やはり全ての機能が使えるという訳ではありません。 各機能からWebブラウザのバージョンごとのサポート具合が一覧できます。 APIに関連したものだけを抽出して対応状況が見られます。同様にCSS、HTML、JavaScriptといった具合に指定できます。 IEのバージョンごとの指定もできます。 HTML5 Pleaseでは
凄いん…だよな？デザインの自由度を最大化したCMS·Berta MOONGIFT
Bertaはデザインの自由度が高いCMSです。データベースを使わないCMSになっています。 なんか凄いソフトウェア…。BertaはCMSですが、自由度が非常に高く、コンテンツの配置が自由にできてしまいます。その自由度の高さも相まって、デザインや写真家の方が数多く使っているようです。 まずログインします。 サイトをセットアップします。 セクションを作ります。これがメニューになります。チュートリアルのヘルプ付きで分かりやすいです。 セクションを作ったら、その内容を編集します。 これがページです。ほぼ何もありません。ここから自由にコンテンツを配置していきます。 配置する場所はX/Y軸ともに自由です。 ファイルを貼付けたりテキストを入れたりできます。 例えばこんな画像を。場所は自由に設定できます。 実際にBertaを使ったWebサイトです。ポートフォリオ的なサイトでしょうか。 こういった写真系のサ
Webプログラマ必見。HTML5のセキュリティチートシート·HTML5 Security Cheatsheet MOONGIFT
HTML5 Security CheatsheetはHTML5のセキュリティに関するチートシートです。問題点と対象Webブラウザ、対処法が一覧になっています。 HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。 トップページです。様々な項目が並んでいます。 左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。 まだ日本語化されていない部分もあります。 ほぼ全てのWebブラウザが対象になる部分もあるようです。 項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。 HTML5ではありますがIE6など
PCやスマホがなくてもこれがあればツイートできる（ただしモールス信号）·tworsekey MOONGIFT
tworsekeyはモールス信号でツイートを送信するデバイスです。 インターネットはあるけれどパソコンもスマートフォンもない。そんな時でもTwitterをやりたいという方で、モールス信号が打てる方はtworsekeyを用意しておくと幸せになれるかも知れません。tworsekeyを使うとモールス信号のデバイスを使って、ツイートができます。 装置の全体像です。 中はこんな感じ。 デモ動画です。 モールス信号機にイーサネットケーブルがついているというのがなかなかシュールですが、実際にメッセージが送れてしまう辺りがとても面白いです。実際にTwitterアカウントもあり、@tworsekeyでツイートが見られます。 tworsekeyはGPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る モールス信号でツイートも良いですが、何らかのハードウェアとオンラインサービスを組み合わせ
手軽に使える！解凍するだけでnginx+PHPの開発環境を準備·wnp MOONGIFT
wnpはnginx + PHPの環境を解凍するだけで使えるWindows用開発環境です。 最近のWebシステムではApacheではなくnginxを採用するケースも増えています。もし本番環境がnginx + PHPであったら開発環境としてセットアップしたいのがwnpです。 解凍直後のファイル構成です。wnp.exeを実行します。 タスクトレイに常駐します。PHP、nginxを別々にリスタートできます。 localhostへアクセスした時の表示です。 PHPの情報です。色々な拡張が入った状態です。FastCGIで、バージョンは5.2.12となっています。 Webルートのファイル構成です。ここにPHPファイルを作成すれば動作します。 MOONGIFTはこう見る 数年前であればLinux + Apache + PHP + MySQLという組み合わせはLAMPスタックと呼ばれ、Webアプリケーション
Windowsユーザだけじゃない。Adobe AIR製のiPhone/iPadエミュレータ·iBBDemo3 MOONGIFT
iBBDemo3はAdobe AIRで作られたiPhone/iPadエミュレータです。 Windows PCでiOS向けの最適化Webサイトをテストしたい時に使ってみたいのがiBBDemo3です。既にiBBDemo2はありましたが、各種バグフィックスと機能追加を行ったバージョンになります。 Adobe AIRではWebKitをブラウザのレンダリングエンジンに採用しているのでiOSと同じように閲覧できます。 アドレスバーを消すこともできます。 キーボードショートカット一覧です。iPad風にしたり、表示する向きを変える、Flashの有効/無効切り替えもできます。 iPadに変更してみました。 iPadの横向き表示です。検索機能は使えますが、それ以外のボタンは動きません。 Flashを有効にした状態での表示です。 Flashを無効にしている所です。 そうなるとこうやってブランクになります。 キー
あなたのWebアプリケーションは安全か。Google製のセキュリティチェッカー·Skipfish MOONGIFT
SkipfishはSQLインジェクションをはじめWeb向けの脆弱性を発見するソフトウェア。 SkipfishはGoogle製のオープンソース・ソフトウェア。2011年になってセキュリティインシデント関係の話題が飛び交っている。特に大きいのはソニーだろう。あそこまでの規模は相当珍しいが、何も対岸の火事という訳ではない。 オプション セキュリティホールを狙うのは人間に限らない。日々クローラーがWebサイトにアクセスしてセキュリティホールを狙っているのだ。狙われる前にSkipfishを使って自主的にチェックしてみよう。 SkipfishはGoogleが開発したセキュリティチェックソフトウェアだ。ターミナルで動作するソフトウェアで、指定したURLに対してSQLインジェクションやXSSなどWebアプリケーションが狙われやすい脆弱性をついてくる。結果はHTMLベースのレポートとして出力される。 結果は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
