GOLD Bootstrap - Bootstrapに黄金比の魅力を
黄金比はご存じでしょうか。彫刻や絵画、さらにAppleの製品などでも使われている最も美しいと言われる比率のことです。縦横のバランスだけでなく、配置なども黄金比に沿っておくことで美しく仕上がると言われています。 そんな黄金比に沿ったサイトを簡単に作れるのがGOLD Bootstrapです。そう、Bootstrapで作ったサイトを黄金比にしてくれます。 GOLD Bootstrapの使い方 GOLD Bootstrapのデモです。なんとなく黄金っぽいテーマなのが面白いですね。 グリッドの指定法です。 ナビゲーションバーとボタン。 タイポグラフィ。 テーブル。 フォーム。 タブなど。 アラート、プログレスバー。 リスト、パネルなど。 GOLD Bootstrapは基本的にグリッドに関して独自の変更を施しているようで、コンポーネント系は標準のBootstrapと変わりません。すでにBootstra
Salted – シンプルなHTMLメールテンプレート
テキストメールではユーザにスルーされがちで、より高いレスポンスを求めるのであればHTMLメールにする必要があります。ただしHTML化と言っても難しさがあります。それは閲覧デバイスが増えており、それぞれに最適化する必要があることです。 そのためにHTMLメールはレスポンシブにしなければなりません。昔からあるメーラー、GmailのようなWebメーラーなど様々なクライアントを考えた上でのHTMLメールテンプレートとしてSaltedを紹介します。 Saltedの使い方 下の画像が実際のテンプレートです。 コンテンツの幅、画像の幅が自動調整されます。 リスト表示もこのようになります。 レスポンシブなので幅を狭めるとこのように表示されます。 ボタンは幅いっぱいに大きくなります。 当たり前ですがメディアクエリーに対応しています。 デザインも最低限なのでカスタマイズは容易そうです。 Saltedを使うとH
スクロールしよう。iPhone 5sのページを再現·jQuery One Page Scroll MOONGIFT
jQuery One Page ScrollはjQuery/JavaScript製のソフトウェアです。 ここ最近スクロールを上手に使って効果的な見せ方をするサイトが増えています。その一つがiPhone 5sの商品紹介ページです。その表示を真似したソフトウェアがjQuery One Page Scrollです。 トップページです。iPhone 5s風のイラストですね。 ちょっとスクロールしようとすると一気に2つ目のスライドまで滑っていきます。 さらにその下まで。3つのスライドがスクロールで切り替えられます。 ウィンドウ幅を縮めてもいい感じに表示できます。 使い方は簡単で、sectionタグごとにコンテンツを記述します。後はjQuery One Page Scrollを読み込んで$(".main").onepage_scroll()のようにメソッドを実行すれば良いだけです。 Webデザインは模
面白い！自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
見通しの良いスタイルシートを維持するために重複した定義を見つけよう·csscss MOONGIFT
csscssはスタイルシート上の重複定義をチェックするソフトウェアです。 スタイルシートの便利なところは多少間違っていたとしてもWebブラウザ側が良いように解釈してくれて描画してくれることです。そのため、更新を繰り返すと徐々に不要な定義ができたり、重複したりして思わぬミスにつながったりします。それを防ぐのに使えそうなのがcsscssです。 例です。複数のスタイル定義が重なっているとのことです。 csscssを使うと複数のスタイルシートについて、その重複度合いをチェックできます。ローカルのファイルはもちろん、URLを指定してリモートのファイルに対してチェックを行うこともできます。さらに最小のマッチ回数も指定できますので、重複が多い箇所だけを洗い出すと言った目的にも使えます。 csscssはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 決ま
Googleリーダーに似たUIのWebフィードリーダー·Leselys MOONGIFT
LeselysはGoogleリーダーライクなUIのWebベースのフィードリーダーです。 Googleリーダーが7月1日で終わりというニュースを受けて、世界中のITエンジニアがざわついています。代替のサービスを探す人、これを機に情報収集スタイルを変える人、そして自分でサービスを作ってしまう人もいます。今回はその一つLeselysを紹介します。 ログインします。 メイン画面です。左側にフィード一覧が表示されています。 フィードを選ぶと記事タイトルの一覧が出ます。 記事タイトルをクリックすると記事本文が表示されます。 未読の記事はタイトルが太字になっています。 設定画面です。 購読しているフィード一覧。 LeselysはGoogleリーダーと似たスタイルでの購読ができます。現時点ではキーボードショートカットがなかったり、記事本文を表示する際のアニメーションがちょっと面倒であったりしますが、今後の
最低限かつ十分なスタイル設定が特徴のCSSフレームワーク·Kube MOONGIFT
Kubeはプロフェッショナル向けのCSSフレームワークです。 見やすく、かつ様々なニーズに対して即座に答えられるようなデザインを考えるのはとても大変なことです。しかしその道のプロが作り出したスタイルシートフレームワークであるKubeを使えば実現しやすくなるかも知れません。 デモページです。リンクやサイドバーが並んでいます。 こちらはシンプルなベース表示。 iPhoneに対応。 全て一列になって表示されます。 タブレット向け。こちらも最適化されます。 横向きだとうまくいかず…残念。 こちらは表示例。Bootstrapのようなrowが使えます。 フォーム。 テーブル。 リンクの色変更も用意されています。 ボタン。 Kubeの特徴は優れたタイポグラフィ、グリッド表示、フォーム、テーブル、様々なクラスユーティリティ（.width-50とすれば半分になるなど）、ボタンなど最低限ながらも実用的なスタイ
Adobe製。高品質なフォントファミリー·Source Sans Pro MOONGIFT
Source Sans ProはAdobe社がリリースしたオープンソースなフォントファミリーです。 Adobeは言わずと知れたグラフィックス系ソフトウェアの最高峰とも言える企業なので、デザインに対する意識は並々ならぬものがあります。そんなAdobeがはじめてリリースするオープンソースのフォント、それがSource Sans Proです。 フォントのサンプルです。Black。 Bold。 Extralight。 Italic。 Light。 Regular。 Semibold。 縦長のプロポーションですっきりとして見やすく、色々な場面で使えるのではないでしょうか。なおTrueType Fontの他、OpenType Fontもリリースされています。 Source Sans ProはOpen Font Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Source
すげえ！FlashLite1.1を解析してHTML5に変換·FlashForward MOONGIFT
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
自前のDropboxを実現する1ファイルのシェルスクリプト·vbox MOONGIFT
vboxはシェルスクリプトで作られたDropboxライクなソフトウェア。 vboxはシェルスクリプト製のオープンソース・ソフトウェア。みんな大好きDropbox。指定されたフォルダを自動的に同期してくれて、別なPCともファイルが共有できる上にバージョン管理までしてくれる。普段は何もしないというのが良い所だ。 動作中 しかしそんなDropboxが便利だと感じる反面、自分だけのDropboxサーバを立てたいと感じている人も少なからず存在する。そんな方はvboxを使ってみるといいだろう。 vboxは何とたった一つのシェルスクリプトファイルでできている。技術的に言うと、自分でサーバを立てて、そこにある特定のディレクトリとローカルのディレクトリをrsyncで同期する。それでは単なるバックアップであり、vboxはリモートではGitを使ってバージョン管理を行っている。 複数のコンピュータで同期することも
必見。スマートフォン対応、WebベースのHTML5オーサリングソフトウェア·Maqetta MOONGIFT
MaqettaはIBMからDojoに寄贈されたWebベースのHTML5対応オーサリングソフトウェア。 MaqettaはWebベース、Java製のオープンソース・ソフトウェア。HTMLのオーサリングツールと言えばDreamweaverをはじめとしてローカルソフトウェアで行うのが一般的だ。だがその結果をレンダリングするのはWebブラウザだ。この環境の違いで作りやすさが変わってしまう。 メイン画面 どうせWebブラウザ上で動かすならば、元々Webブラウザ上で作ってしまうのはどうだろう。IBMが開発し、先日Dojoに寄贈されたMaqettaを使えばそれが実現する。 MaqettaはHTML5用のオーサリングツールで、Webブラウザ上でHTML/CSSを作成することができる。DojoやYUIといったUIウィジェットに対応しており、ドラッグアンドドロップで画面を作成していくことができる。配置したウィジ
Webサイトのデザインにぴったり。多数収録したアイコン集·Open Icon Library MOONGIFT
Open Icon LibraryはWebサービスの開発に使えるアイコン集（PNG/SVG）。 Open Icon LibraryはPNG/SVG画像のオープンソース・ソフトウェア。Webサービスを作る上でアイコンは欠かせない存在だ。シンプルなテキストのみというサイトもあるが、やはり見た目のインパクトや分かりやすさにおいてアイコンを使った方が良い場面は多い。 コマース だが実際にアイコンを使おうと思うと、検索して探してきて配置する作業を繰り返す事になる。その時、選んだサイトがばらばらでは見た目も違和感が出てきてしまう。そこで使うのはOpen Icon Libraryのようなまとまったアイコン集になる。 Open Icon Libraryはソーシャル系サービス、OS、ライセンス、Powered by、国旗、決済関係と言ったカテゴリに分かれて収録されているアイコン集だ。ソーシャル系は今時のサー
データベースを使わないという選択肢。実用性の高いPHP製CMS·Stacey MOONGIFT
Staceyはデータベースを使わないPHP製のCMS（コンテンツ・マネジメント・システム）。 StaceyはPHP製のオープンソース・ソフトウェア。昔、ホームページと言われるものが多かった時代には静的なHTMLを作成してWebサイトを開発していた。次にCGIがメインの時代があり、最近ではCMSを使ったWebサイトが主流になっている。 YouTubeコンテンツを埋め込んだページ WebサイトをCMSを使って構築するメリットとしては、更新の自動化や同じコンテンツを色々な場所に適用できるという点が挙げられる（サイドバーなど）。だがデータベースを常に使うのは面倒だ。そこでStaceyを使ってみる事をお勧めしたい。 Staceyはデータベース不要で使えるCMSだ。決められた形式に沿って、フォルダやテキストファイルを配置する。テキストファイルの書き方にも手法がある。そして同じディレクトリの中に画像や動
HTML5のオーサリングに。GeckoをレンダリングエンジンにしたHTMLオーサリングツール·BlueGriffon MOONGIFT
BlueGriffonはHTML5をサポートした、Firefox4をレンダリングエンジンにしたHTMLオーサリングツール。 BlueGriffonはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア。Webは日々進化している。それに合わせて制作ツールも進化しなければならない。オーサリングツールとしてはDreamweaverのシェアが圧倒的なようだが、HTML5を考えると物足りなくもない。 HTMLファイルを開いた所 入力サポートは当たり前として、HTML5対応サイトの再現性が高くなければならない。最新の技術にも率先して対応しているブラウザと言えばFirefox、そんなFirefoxのGeckoエンジンを使ったオーサリングツールがBlueGriffonだ。 BlueGriffonはNvuやKompoZerの後継として開発されているオーサリングツールで、HTML5に十分
シンプルながらユーザビリティに大きな貢献。郵便番号から住所を入力補完する·js-zip2address MOONGIFT
js-zip2addressはGoogle日本語入力APIを使い、Webブラウザ上での郵便番号から住所を入力補完する。 [/s2If] zip2address.jsはJavaScript製のオープンソース・ソフトウェア。ECサイトをはじめとして個人情報の入力フォームでは一般的になってきている郵便番号から住所を引く機能。実装方法は様々だか、この郵便番号と住所の変更は意外と回数が多い。 サンプル 回数が多いということはメンテナンスコストが大きいことを意味している。都度アップデートされるだけでなく、削除されるデータも多い。そこでメンテナンスフリーで使える手法を紹介しよう。それがzip2address.jsになる。 zip2address.jsの特徴は大きく分けて二つある。一つはデータ元としてGoogle日本語入力APIを利用しているという点だ。確かにGoogle日本語入力では郵便番号を入れると住
Flashファイルをスクリーンセーバに·SWF Screensaver for Mac MOONGIFT
SWF Screensaver for MacはMac OSX向けのオープンソース・ソフトウェア。スクリーンセーバは元々の画面焼き付けを防ぐという目的から、見た目で楽しい機能に変わりつつある。そんな訳でもっと楽しめる素材が簡単に手に入ると良い。 Flashをスクリーンセーバに スクリーンセーバは専用のファイル形式になっているので、誰でもすぐに使えるという雰囲気ではない。だがSWF Screensaver for Macを使えばWeb上に数多いFlashファイルをスクリーンセーバに使えるようになるのだ。これは一気に対象が広がるかも知れない。 SWF Screensaver for Macはスクリーンセーバのファイルとして提供されており、インストールすると文字が踊るスクリーンセーバが表示される。これは実際にはFlashファイルだ。そして自分の好きなSWFファイルにしたい時には、パッケージの内容
創作意欲をかき立てるドローアプリ·Alchemy MOONGIFT
これは面白い。一般的にコンピュータ向けに提供されるペイント系ソフトウェアは、紙で行っていた作業をリプレイスするものが多い。デジタルならではの機能というと、レイヤーやアンドゥといった機能だ。だがもっとできることはあるはずだ。コンピュータ上ならではの創作プロセスが必要だ。 デジタルならではの芸術が生まれるかも知れない そこにチャレンジするのがAlchemyだ。まさにデジタル時代ならではの芸術性が生まれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはAlchemy、コンピュータ上の創作プロセスを一変させるソフトウェアだ。 Alchemyにはアンドゥや編集するような機能はない。あえて機能を低く抑え、創作に集中できるようにしている。そして入力ソースとして、マウスなどはもちろんのこと、マイクの音量、コンピュータ内のノイズ、カーソルを動かす速度、インターネット上の画像取り込みなどが対象
ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン·gameQuery MOONGIFT
gameQueryはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhoneでストリートファイター4が発売になったと話題になっている。最適化処理が行われているのだろうが、意外とiPhoneでも遊べるレベルで動作する。アクションゲームまでこなせるようになるとiPhoneの可能性は飛躍的にあがりそうだ。 なんとストリートファイター系！ しかしもっと手軽に遊びたいならばWebブラウザベースで動作する方が良さそうだ。Webブラウザで動くゲームと言えば、これまではFlash製のものが多かった。だがこれからは違う、JavaScriptでゲームが作れるようになる。それを実現するのがgameQueryだ。 gameQueryでまず目を引かれるのがストリートファイター風ゲーム「JavaScript Fighter」だろう。デモなので自分で動かすことはできないが、二人のキャラ
Google Chrome用Tombloo互換拡張·Taberareloo MOONGIFT
TaberarelooはGoogle Chrome向けのオープンソース・ソフトウェア。Webブラウザで色々なサイトを閲覧していて、メモしたりブックマークしたいと思う時がある。この時、多少なりとも面倒な手順や数ステップが必要では折角のチャンスを逃してしまう。 Google Chrome用Tombloo ワンクリックで各サービスにポストする所までたどり着けなければいけない。そのためのソフトウェアとしてTomblooが知られているが、こちらはFirefoxアドオンだ。対してTaberarelooはGoogle Chrome上で動作するスクラッピングソフトウェアだ。 現状ではリンクポストのみ対応となっている。対応サービスはTumblr/Delicious/はてなブックマーク/Livedoorクリップ/Yahoo!ブックマーク/FriendFeed/Twitter/Googleブックマーク/Inst
Mac OSXらしい高性能グラフィックスアプリケーション·LiveQuartz MOONGIFT
LiveQuartzはMac OSX向けのフリーウェア。昔はグラフィックス、DTPをするならMac OSXしかないと言われていた。だが今ではPhotoshopもIllustratorも大抵のソフトウェアはWindows向けにも提供されている。だが、それでもグラフィックスの性能はMac OSXの方が高いと思ってしまう（懐古主義かも知れないが）。 独特なボタン配置だが使い勝手は良い そんなMac OSXのグラフィックス性能を存分に活かした画像編集ソフトウェアがLiveQuartzだ。LiveQuartzはレイヤーとフィルターを組み合わせて自在に画像を編集できる。画像の一部を編集することはできないようで、ちょっと独特な使い勝手になっている。 レイヤーを使って複数の画像を重ねたり、文字を書いたりするのはもちろんのこと、ぼかしや画像の歪めるようなイフェクトがフィルターとして登録できるのが特徴だ。フィ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
