Skeleton - レスポンシブサイトを構築するためのベースデザイン MOONGIFT
レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。 そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。 Skeletonの使い方 こちらがデモページのトップです。 デザインのデモ。スマートフォンアプリのランディング風。 3つのグリッドを分けて表示。 画像のレスポンシブにも対応しています。 幅を狭めるとこうなります。 先ほどの3段カラムは縦に並びます。 画像も縦です。 グリッドはよくある12カラムで構成されています。 タイポグラフィ。 ボタン。 フォーム。 リスト。 コード。 テーブル。 Skeletonはごく基本的な機能、部品だけを提供します。このまま本サイトに適用するということは
難読化された読みづらいコードも一発で整形·JSBeautify For Chrome MOONGIFT
JSBeautify For ChromeはWebブラウザ上でJavaScriptを整形して表示するGoogle Chrome拡張。 JSBeautify For ChromeはGoogle Chrome用のフリーウェア（ライセンスはWTFPL）。本格的なWebアプリケーションが普及するにつれて、JavaScriptの利用範囲が拡大している。そんな中ではJavaScriptのファイル自体もサイズが大きくなっている。 Clippyあり版（整形前） そのためJavaScriptを多用するサイトでは余計なスペースや改行を消すなどしてサイズを減らすのが一般的になっている。しかしそれはコードが全て1行で書かれる、とても見づらいものになる。そこでJavaScriptの表示に際して使ってみたいのがJSBeautify For Chromeだ。 JSBeautify For ChromeはGoogle C
IE6〜IE8でもCSS3の機能を使う·CSS3 PIE MOONGIFT
CSS3 PIEはCSS/JavaScript製のオープンソース・ソフトウェア。技術は日々進化しており、新しい機能が追加されている。だが、過去の資産から対応しなければならない場合そうした新しい試みは取り入れることができない。CSS3を使いたくともIE6から対応となれば利用できないだろう。 IEでもCSS3の恩恵を そんな辛い思いを解決してくれるライブラリがCSS3 PIEだ。CSS3自体には多数の機能があるが、一部の処理においてIE6〜IE8でも利用できるようにしてくれる。先進的な取り組みを行っていきたいならば試してみよう。 CSS3 PIEはHTCファイルであり、CSSファイルながらにJScriptを実行できる機能を使っている。対応しているCSS3プロパティはborder-radius、box-shadow、border-image、-pie-background、-pie-watch-
ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン·gameQuery MOONGIFT
gameQueryはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhoneでストリートファイター4が発売になったと話題になっている。最適化処理が行われているのだろうが、意外とiPhoneでも遊べるレベルで動作する。アクションゲームまでこなせるようになるとiPhoneの可能性は飛躍的にあがりそうだ。 なんとストリートファイター系！ しかしもっと手軽に遊びたいならばWebブラウザベースで動作する方が良さそうだ。Webブラウザで動くゲームと言えば、これまではFlash製のものが多かった。だがこれからは違う、JavaScriptでゲームが作れるようになる。それを実現するのがgameQueryだ。 gameQueryでまず目を引かれるのがストリートファイター風ゲーム「JavaScript Fighter」だろう。デモなので自分で動かすことはできないが、二人のキャラ
多数のブラウザでvideoタグに対応する·html5media MOONGIFT
html5mediaはjQuery/JavaScript製のオープンソース・ソフトウェア。HTML5を使って動画を流す場合に使われるのがvideoタグだ。現在主流になっているMPEG4にはライセンスコストがかかるので標準化が困難で、広まるのは難しい状況ではある。 Safariで実行した場合。videoタグのまま そんなvideoタグを使えばFlashを使わない、または使えないブラウザでも動画の閲覧が出来るようになる。だがIEをはじめとしてHTML5に対応していないとvideoタグが使えないので二重の開発を行う必要があるのは問題だ。そこで使ってみたいのがhtml5mediaだ。 html5mediaは多数のブラウザでvideoタグを使えるようにするライブラリだ。記述するのはvideoタグでよく、html5mediaを読み込むことでHTML5に対応していればそのままvideoタグを使い、対応し
Tumblrライクにクリッピングするクリッピングマイクロブログ·Asaph MOONGIFT
AsaphはPHP製のオープンソース・ソフトウェア。Tumblrは手軽なクリッピングサービスとして使っている人が多い。だが公開したくない場合や仲間内だけで共有したい時には公開型というのは不便だ。そこで使ってみたいのは自分でたてるマイクロブログシステムだ。 クリップした内容が一覧で表示される 自分で立ててしまえばローカルやLANの中でも使えるようになる。そうすれば社内の情報共有にだって使えそうだ。そんなマイクロブログシステムの一つがAsaphだ。AsaphはPHP+MySQLで作られており、設置も容易なマイクロブログシステムだ。 Asaphは複数ユーザに対応しており、URLの登録と画像の登録に対応している。専用のブックマークレットを使って任意のサイト上で実行する。そうすると画面上部にバーが表示される。その状態でポストを押せばURLとして登録される。そして表示されている画像をクリックすれば画像
ついに！iPhoneでもFlashが表示できるライブラリ·Gordon MOONGIFT
GordonはJavaScript製のオープンソース・ソフトウェア。iPhoneの最大の欠点とされるのがFlashの表示が未対応という点だ。それによって利用できないサイトがいかに多いことか。今しばらくはAppleの対応は見込めないとあって、我慢の日々が続くだろう。 アニメーションにも対応している だがただ指をくわえて待っていても意味がない。技術者たるもの無理といわれているからこそ挑戦する価値があるのだ。そして一部において問題を乗り越え、見事iPhoneでもFlashを使えるようにしたのがGordonだ。決めてはFlashのSVG化だ。 単なるドローの表示はもちろん、アニメーションについても一部対応している。描画は元のFlashファイルとほぼ変わらず、とても良好な結果だ。もちろん動画や音楽を再生するようなプレーヤレベルはできないが、将来的にはFlashバナー程度ならいけそうだ。 iPhone
Flash製のデスクトップアプリケーションを開発する·HippoHX MOONGIFT
Flashのインタフェースはマルチプラットフォームで共通であり、Mac OSXのUIとはまた違う良さがある。そんなFlashのUIを使ってデスクトップで動作するアプリケーションを構築しようと思うとAdobe AIRがよく知られている。だがAdobe AIRを別途用意しなければならないのが面倒だ。 アプリケーションのビルドは簡単 Flashで作られたソフトウェアをまるでネイティブアプリケーションのようにダウンロードするだけで動くようにするのがHippoHXだ。 今回紹介するオープンソース・ソフトウェアはHippoHX、SWFファイルをネイティブアプリケーション化するソフトウェアだ。 HippoHXはWindowsまたはMac OSX向けに提供されるソフトウェアだ。SWFファイルを指定し、設定をするだけでWindowsとMac OSXどちらでも動作するネイティブアプリケーションを生成する。イン
音楽の保存でもできるLast.fmクライアント·SweetFM MOONGIFT
音楽を聴くのは好みの音楽だけを聴く時と、色々な音楽をただ聴いて新しい出会いに繋がる時とがある。後者はラジオなどからずっと続いているようなやり方だ。そして今ではラジオではなく、Last.fmを使って新しい音楽と出会っている。 シンプルなデザインながら使い勝手の良いLast.fmクライアント Last.fmはWebベースの他に、様々なクライアントアプリケーションが存在する。楽しいデザインのSweetFMもその一つだ。 今回紹介するオープンソース・ソフトウェアはSweetFM、便利な機能が多数のLast.fmクライアントだ。 SweetFMは格好いいデザインのLast.fmクライアントで、検索窓を使ってシンプルにアーティスト、タグ、音楽を指定してストリーミングすることが出来る。今聴いている音楽のCDジャケットも表示され、SweetFMから簡単に購入することもできる。 AppleRemote連携機
MOONGIFT: » 必見！怖くなるくらい優秀なCMS「concrete5」:オープンソースを毎日紹介
これまで多数のCMSを見てきたが、ここまで完成度が高いと言えるものに出会ったことはなかった…そう言えるくらい凄い。このどきどき感はDekiWikiに触れた時に感じたものに近い。 見たまま編集できるCMS CMSと言えば、ユーザ画面と管理画面に分かれていて、管理画面はモジュールやテーマの設定、各項目の並びを指定するのが通常だ。実際の出力結果はシステム任せで、その点が柔軟性に欠ける点でもあった。 しかしこれは違う。見たまま編集でき、さらに高い柔軟性を維持している。 今回紹介するオープンソース・ソフトウェアはconcrete5、デザイン、管理、コンテンツ作成全てが高度なCMSだ。 相当個人的な感情が入ってしまっているのは、同じようなシステムを構築する予定があったからだ。だがconcrete5は完成度も高く、多少の改造さえ施せば十分な気がする。やはり下手に開発コストをかけるよりもオープンソースで探
Mac OSXでアイコンを描くならこれ！·DrawIt Lite MOONGIFT
Mac OSXのアイコンはとても奇麗なものが多い。また、最近はWeb2.0の下にデザインの奇麗な透明感のあるものやポップなものが増えてきた。あのようなアイコンはどうひっくり返っても私からは出てこない代物だろう。 同じように画面のスクリーンショットを格好よく加工したり、角丸に加工したりといったことすらも私にとっては難しい。だがDrawItを使えばもしかしたらできるかも、と思わせてくれた。 DrawItは画像編集＆ドローソフトウェアで、手軽でありながらも高度な画像加工を行えるソフトウェアだ。 DrawItはちょっと独特なインタフェースのソフトウェアだが、Mac OSXらしい作りになっている。素材として使えるのはシェイプ、画像、ベクターそしてテキストだ。それらはドローのように各オブジェクトが独立して配置でき、貼付けた後の移動もできる。 そして画像へのイフェクトが面白い。オブジェクトに対して、イフ
オープンソース+Web+Flash+部屋のレイアウト＝·Flash Floor Plan MOONGIFT
なんかこう…色々なものがオープンソースになっていくという凄い世界を実感してしまう。部屋の模様替えや、引越の際にはレイアウトを考えるツールが必要だ。子供のときには絵に描いて試したものだが、ものが増えてきた今となってはやり直しも面倒で、データ上でシミュレーションするのが良い。 Flashベースのレイアウトツール そのためのツールは幾つかある。だがオープンソースのものは数少ない。というかはじめてみた、それがFlash Floor Planだ。 Flash Floor PlanはFlash製のWebアプリケーションで、GPLの下に公開されている。 Flash Floor Planでは幾つかのFlashファイルによって構成されている。一つが全体のレイアウト図だ。そして各家具がそれぞれ別なFlashファイルになっている。それを選択してドラッグアンドドロップでレイアウト上に配置していく。 家具を配置して
MOONGIFT: » プログラミングを使ってアートをしよう「Context Free」:オープンソースを毎日紹介
プログラミングは単なる文字列の羅列ではない。そこには開発者の思い、情熱の全てが注ぎ込まれている。何となく作ったものは見難く、バグをはらんでいる。しかし愛をもって接すれば、理路整然とした美しいプログラミングコードが生まれることだろう。 まるでアート作品。左側のコードで生成される そんなことをこれを見ていて感じた。アートをプログラミングするのだ！ 今回紹介するオープンソース・ソフトウェアはContext Free、アート用言語を使って見事な作品を描くソフトウェアだ。 これまでにも同様のソフトウェアは幾つか紹介してきた。そうしたものは大抵が幾何学的なものが多く、線や文字を使って表現してきた。だがContext Freeはもっとアナログ的な、まさにアートの世界を描ききる。 これくらいアナログ的な作品もできる ランダムな要素を埋め込むことで、レンダリングを行うたびに異なる結果を得ることができる。どの
JavaScriptで作るiPhoneアプリケーション·Big Five MOONGIFT
iPhone向けのアプリケーションを開発する場合、Objective-Cを習得する必要がある。オブジェクト指向の言語ではあるが、習得のためにはコストがかかるのは確かだ。開発することで一気に世界が開ける可能性もあるが、利用範囲の限られた言語を覚えることに躊躇してしまう人もいるのではないだろうか。 スプラッシュスクリーン そこで普段使い慣れているHTMLやJavaScriptを使ってアプリケーションを構築しようと言うのがこのフレームワークだ。 今回紹介するオープンソース・ソフトウェアはBig Five、Webベースの技術で実現するiPhone/iPod Touchアプリケーションフレームワークだ。 Big Fiveは言わばプロキシを提供するソフトウェアだ。HTMLからJavaScriptを使ってiPhone/iPod Touchの各APIにアクセスを可能にするのだ。現在位置の取得、内蔵カメラを
MOONGIFT: » Railsで有名な37signalsによるシンプル＆カスタマイズ可能なWYSIWYGエディタ「WysiHat」:オープンソースを毎日紹介
WYSIWYGなHTMLエディタは既に数多く存在している。有名なものとしてはFCKEditor、TinyMCEなどが知られている。これらは非常に便利な代物ではあるが、出来上がったものをカスタマイズしようという気にならないくらい重厚な作りになっている。 シンプルな作りのWYSIWYGエディタ もっと自分たちにあったシンプルでカスタマイズが容易なものを！そう願った37signalsは自分たちで作ってしまうことを考えた。 今回紹介するオープンソース・ソフトウェアはWysiHat、カスタマイズ容易なWYSIWYGエディタだ。 WysiHatの特徴はprototype.jsをベースに作られている点だろう。そして文字に対する装飾がメソッドを呼び出すだけで良いというシンプルさもある。選択されている文字などを気にすることなくアクションを呼び出すだけで良い。 prototype.jsベースなのでカスタマイズ
日本語にも対応した手書き文字認識エンジン·Zinnia MOONGIFT
Windows MobileやZaurusなどのPDAで良く見かけるのが手書き文字認識エンジンだ。バーチャルキーボードやPDAの小さなキーボードで入力するよりも素早く入力ができるのが便利だ。 モデルの認識中 OCRも同様だが、入力された内容を読み取ってデジタルなデータに変換するというのは難しい技術だ。だがその部分だけオープンソース化すれば、みんなが手軽に利用できるようになる。 今回紹介するオープンソース・ソフトウェアはZinnia、手書き文字認識エンジンだ。 Zinniaはエンジンのみの提供で、認識の基準になるモデルなどは提供されていない。そしてそのエンジンは機械学習機能（アルゴリズムはSVM）が実装されており、利用していくうちに精度を高めることができる。 Python用テストスクリプト APIを公開しており、それを使うことでC/C++/Perl/Ruby/Pythonなどでもエンジンを利
MOONGIFT: » Flash用ベクター版3Dエンジン「Vectorvision」:オープンソースを毎日紹介
コンピュータは基本二次元で、三次元を表現するのは難易度が高い。それだけに見た人に与えるインパクトは格段に変わってくるだろう。例えばGoogleマップで見た衝撃と、Google Earthで見た衝撃の違いとでも言えるだろう。 ダイナミックに動く3Dライブラリ 今後、3Dをうまく使ったWebサイトは増えていくだろう。その時にはAjaxなどのJavaScriptベースの技術ではなくFlashを使ったものになるだろう。その際に役立つのがこうしたライブラリだ。 今回紹介するオープンソース・ソフトウェアはVectorvision、ベクターベースの3Dエンジンライブラリだ。 Vectorvisionはサンプルを見てもらえればどういったことができるか貰えるだろう。フォントが空間を漂ったり集結して何かの文字を表示したり、マウスの動きに合わせてインタラクティブに大きさや速度が変わっていく。 このような表現もで
MOONGIFT: � JavaScriptだけのダイナミックなグラフライブラリ「ProtoChart」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近は簡単に使えるグラフライブラリが増えてきた。Flashのものは見た目が奇麗で、画像出力のものも見やすさではひけを取らない。だがこうしたグラフは一度表示したが最後、リロードしないと変化しないものが多かった。 パイチャート そうではない、もっとダイナミックに変化するグラフを描きたい場合はこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはProtoChart、JavaScriptだけで描くグラフライブラリだ。 ProtoChartはCanvasを使って、JavaScriptのみでグラフを生成している。Canvasは本来、IE6には対応していないが、外部ライブラリを読み込むことで描画できるようにしている。これにより対応ブラウザはIE6/7、Firefox2/3、Safariとなっている。またSafariに対応しているとあって、iPhone/iPod
AppleのMobileMeでも使われるJavaScriptライブラリ·SproutCore MOONGIFT
インタフェースはとても重要だ。技術的に優れていても、インタフェースが悪いと触ってもらえない。逆に技術的にそれほどすごいものではなくとも、インタフェースが優れていると流行ったりすることもある。 Welcomeページ 技術とデザイン、両立できれば言うことはない。優れたインタフェースを手軽に作るために、このライブラリを使ってみることをお勧めする。 今回紹介するオープンソース・ソフトウェアはSproutCore、リッチなインタフェースを実現するJavaScriptライブラリだ。 SproutCoreはAppleの提供するサービスである、.Macの次期バージョンMobileMeでも一部で採用されているJavaScriptライブラリだ。JavaScriptながら、gemを使ってインストールするのが特徴だ。 ターミナル上でコードを生成する Rubyを使ってWebサーバを立ち上げることができ、ポート番号4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
先進的。HTML5/CSS3対応のデザインフレームワーク·52Framework MOONGIFT