MJML - レスポンシブなHTMLメール用テンプレート
今やレスポンシブデザインはWebだけでなく、メールにおいても大事な存在になっています。メールもデスクトップはもちろん、スマートフォンやタブレットで閲覧することもあるでしょう。 そんなメール用のレスポンシブデザインを実現してくれるフレームワークがMJMLです。専用の記法で作るのが特徴です。 MJMLの使い方 MJMLのシンプルなデモです。 モバイルで見た場合のデザインに変更しました。 こんな複雑なデザインも実現できます。 メニューをつけたデザイン。 モバイルデザイン。 MJMLを使うことで、最適なレスポンシブデザインが容易に実現できるようになります。メールはサーバ側のHTMLと異なり、JavaScriptを実行したり、データの出し分けもできません。MJMLを使えばメールの反応率も大きく変わってくることでしょう。 MJMLはnode/JavaScript製のオープンソース・ソフトウェア（MIT
GetShares·Webサイトにカスタマイズ可能なシェアボタンを配置しよう MOONGIFT
今のWebマーケティングにおいてソーシャル拡散は欠かせません。そこでまずは各サービスにおいてどれくらいシェアされているのかを知るのが大事です。ソーシャルボタンを単に配置するだけでは全く自分のためにはならないデータにしかならないでしょう。 多数のソーシャル系サービスがある中で全てに対応するのは難しいですが、GetSharesを使えば手軽に実現できます。ぜひ使い方を覚えて欲しいソフトウェアです。 シェア数を知る まず特定のURLに対するシェア数を知る方法です。GetSharesを開くとこのような画面になります。 メイン画面です。ここで任意のURLを指定します。 そうするとそのURLが各サービスでどれくらいシェアされているか分かります。 これが最も簡単な使い方です。 さらに自分でカスタマイズして設置もできます。日本のサービス、自分たちのサービスには不要なものもあるでしょうから、特定のサービスを指
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
iframeを使った簡易レスポンシブWebデザインエミュレータ·rFrame MOONGIFT
rFrameはJavaScript/jQuery製のオープンソース・ソフトウェア（MIT License）です。 レスポンシブで作成されるWebサイトが増えています。そうした時の表示確認ではウィンドウの幅を縮める方法もありますが、今回はrFrameを使った方法を紹介します。デバイスと方向を指定して表示を素早く確認できます。 iPhone5、縦の場合です。画面上部のツールバーで指示できます。 iPhone4の場合。デバイスの縦の表示領域が狭まりました。 メニューなどをクリックすることもできます。 横向きの表示に切り替えもできます。 iPadの場合。 こちらはKindle。iPadと比べて横の表示領域は殆ど変わらない模様。 Androidもありますが、これはどのデバイスかによって変わりそうです。 rFrameはiframeタグを使って幅を変更することでレスポンシブのデザイン確認が出来るようにな
モバイルファーストがコンセプトのデザインフレームワーク·Cardinal MOONGIFT
CardinalはCSS3製のオープンソース・ソフトウェア（MIT License）です。 Webデザインフレームワークが多数登場しています。それぞれに特徴がありますが、今回紹介するCardinalはWebアプリケーション開発に使えそうなフレームワークになります。 説明ページがそのままデモになっています。左側にメニュー、右側にコンテンツが表示される形になっています。 まずはグリッド。区切りの幅も指定できるようになっており、細かな制御が出来ます。 もちろんレスポンシブです。この場合でもグリッドは保たれたまま。 レスポンシブなグリッドもあります。こちらはウィンドウ幅によってグリッドの表示が変わります。 ボタン系。四角と角丸があります。 さらに丸みを帯びたタイプも用意されています。 ボタンもスマートフォンサイズに縮めた場合もきれいに表示されます。 テーブル。多様な表現が用意されています。 スマー
スマートフォンにも対応したレスポンシブギャラリー·Photobox MOONGIFT
Photoboxはレスポンシブ対応のギャラリーソフトウェアです。 数多くの写真を奇麗に見せたい時にスライドショー形式で見せるのは良いアイディアです。今回紹介するのはPhotobox、レスポンシブに対応したイメージギャラリーソフトウェアです。 写真一覧。 マウスオーバーで写真がちょっと大きく表示されます。 クリックで写真が大きく表示されます。サムネイルは下に並んで表示されます。 矢印キーで写真を切り替えられます。 スライドショー機能も備わっています。 iPhoneにも対応しています。 スワイプ操作対応です。 下から上にスワイプするとサムネイルが出ます。 写真をフローティングで見せるライブラリとしてはColorboxで知られていますが、スマートフォンに最適化されていません。Photoboxを使えばデスクトップからスマートフォンまで幅広いデバイス向けに見栄えのいいギャラリーを提供できるでしょう。
あの懐かしいシムシティで遊ぼう·Micropolis MOONGIFT
Micropolisは初代シムシティのオープンソース版です。 間もなく新作シムシティ6が登場するシムシティ。1989年の登場以来、ずっと愛され続けている有名なゲームです。そんなシムシティのクローンソフトウェアがMicropolisになります。 懐かしい画面！ ゲーム開始です！ 例えばこんな感じに拡張していきます。 税率などの設定。 Micropolisは子供たちに一人一台PCを渡そうとするプロジェクトOLPC向けに初代シムシティのコードをオープンソースにして公開されています（一部相違があります）。あの懐かしいシムシティの世界に浸りたい方はぜひダウンロードしてください。 MicropolisはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（GPL v3）です。 MOONGIFTはこう見る 初代のAngry Birdsもフリーになるなど、旧来のゲームをオープンにする
レスポンシブWebデザインで組む際のベースにぜひ！·GroundworkCSS MOONGIFT
GroundworkCSSは多様なガジェットがサポートされたレスポンシブWebデザインのフレームワークです。 レスポンシブWebデザインがもてはやされていますが、テクニックはなかなか一般化しづらいものがあります。そこでフレームワークをベースにしてみるのはいかがでしょう。今回紹介するのはGroundworkCSSです。 スライダーやタブメニューなど様々なウィジェットが提供されています。 タブレット版。 スマートフォン向け。 横向き表示もサポート。 サイドメニューを使った表示。 幅が狭くなるとメニューは縦に並びます。 ボタン、タイポグラフィ。 フォーム。 アラートやナビゲーション。 テーブル。ソーシャルアイコンも多数用意されています。 サイズも様々。使い分けが可能です。 たくさんのアイコンも用意されています。 モーダルウィンドウ。 幅が狭い場合のボタン。 タブの端がちょっと気になるかも…。 ス
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
まるで画像。テキストを曲線上で表現する·CSSWARP MOONGIFT
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
Web上で録音、再生を可能にする小さなJavaScript/Flashライブラリ·WAMI recorder MOONGIFT
WAMI recorderはJavaScriptから操作可能なFlash製の音声録音、再生ライブラリです。 HTML5が浸透しつつありますが、逆にJavaScriptでは出来ないもどかしい部分も明確になってきています。その一つにマイクロフォンへのアクセスがあります。しかしそんな時こそFlashと連携させれば良いのです。WAMI recorderを使えばオンラインの録音、再生環境が容易に実現します。 アクセス許可を求めるダイアログが出ます。 左側が録音、右側が再生ボタンになります。 WAMI recorderはごくシンプルなUIでボタンを押して録音、再生ができます。JavaScript向けのAPIも提供されていますのでWeb上で録音、再生環境が実現できるでしょう。WAMI recorderは録音したデータをPOSTで指定したURLに飛ばせるようになっています。その音声データを使えば面白いサー
ノブ型UIで直感的な入力を·jQuery Knob MOONGIFT
jQuery Knobはノブを使って値の設定を行うコンポーネントです。スクロールで値をスムーズに変化させられます。 Webで標準で使えるコンポーネントはパターンがとても少なく、表現力が乏しいのが欠点です。今回紹介するjQuery Knobはノブ型のコンポーネントでスクロールを使って値を設定するタイプの新しいコンポーネントになっています。 デモです。サークルの中でスクロールすると値がスムーズに変化します。 大きさや数字を非表示にしたりできます。 表示のみに設定もできます。 アクションで表示を行うこともできます。 iPodのホイール風表示です。マックスを設けずに表示もできます。 デモ動画です。 jQuery KnobのデザインはCanvasを使って描かれており、画像を用意する必要はありません。また、タッチやマウスホイール、キーボードによる入力に対応したイベントが取れるようになっています。テキス
スマホ最適化サイトで使いたい。jQuery Mobile用アイコンパック·jQuery Mobile Icon Pack MOONGIFT
jQuery Mobile Icon PackはjQuery Mobileで使えるアイコン集です。 jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。 アイコンの一覧です。 実際に使っている例。data-iconで指定するだけで使えます。 多数のアイコンが揃っています。 シンプルで使い勝手が良さそうです。 アイコン画像は全て一つの画像となっており、CSS Spriteで切り出すようになっています。このアイコン群を使う限り読み込みは一度なので高速に表示が可能です。 jQuery Mobile Icon PackはCSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 3Gを
吹き出し風CSSデザインをオープンソースで·CSS Arrow Please MOONGIFT
CSS Arrow PleaseはCSSだけで作成する吹き出しデザインをオンライン上で行えるサービスです。 Twitterをはじめコミュニケーションが基本のサービスで欲しくなるのが吹き出し風のデザインです。そんなデザインをオンラインで簡単に作成できるのがCSS Arrow Pleaseです。 トップページです。左に描かれている吹き出しデザインが右側のCSSで作成されています。 吹き出しの位置は上下左右から選べます。 色はカラーピッカーを使って自由に選択できます。 カスタマイズしたパターンです。 CSS Arrow Pleaseでは吹き出しの配置や色、線の太さなどを自由にカスタマイズできます。後は出来上がったスタイルをコピーして自分のサイトに組み込むだけです。 CSS Arrow PleaseはHTML/CSS製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFT
格好いい！折り畳んだ紙を開くようなアクションを実現·Paperfold CSS MOONGIFT
Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。 これはアイディアの勝利！Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。 デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。 徐々に開いていきます。 折り畳まれた部分が開いて表示されました。 デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。 Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。 Paperfold CSSはJavaScript製のオープンソース・ソフトウェア（Pub
コーディングレス。シンプルなWeb DBアプリケーションを作ろう·DaDaBIK MOONGIFT
DaDaBIKはPHPを使ったDBアプリケーション作成ソフトウェアです。 DaDaBIKはPHP+MySQLまたはPostgreSQLで簡単にWebデータベースアプリケーションが開発できるソフトウェアです。 ログインします。 ドロップダウンにテーブル名、その下にデータが表示されています。 データは一行単位で編集できます。 データ追加も同じ画面です。 検索機能もあります。 ファイルを保存することもできます。 ファイルがついている場合は編集画面にアップロードが追加されます。 デモ動画 DaDaBIKでは管理画面を使ってテーブルを定義したり、入力方法の設定を行うようになっています。サブクエリーなどはできませんが、データのシンプルな蓄積には使えそうです。 DaDaBIKはPHP製、GPLのオープンソース・ソフトウェアです。 MOONGIFTはこう見る データベースのメンテナンスで言えばphpMyA
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
jQuery製。イフェクトが格好いいスライドライブラリ·jqFancyTransitions MOONGIFT
jqFancyTransitionsは画像の切り替わりが格好いいスライドライブラリです。 最近、Webサイトトップなどで画像をスライドで切り替えるサイトが増えています。そこで使ってみたいのがjqFancyTransitionsです。クールでいい感じのイフェクトが特徴です。 サンプル。切り替わりでスクリーンショットを撮っているので汚く見えてしまっているかも知れませんが…。 写真に切れ目が入って切り替わるのは格好いい。 デモ動画。各イフェクトの格好いい切り替わりをお楽しみください。 jqFancyTransitionsでは上下左右からの滑らかなイフェクトができます。対応ブラウザはIE6以上、Firefox2以上、Google Chrome3以上、Safari2以上、Opera9以上となっています。 jqFancyTransitionsはjQuery/JavaScript製、MIT Licens
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
HTML5/CSS3/JavaScriptによるイフェクトの格好いい3Dプレゼンテーション·reveal.js MOONGIFT
reveal.jsはCSS3/JavaScriptで作られたプレゼンテーションソフトウェアです。 reveal.jsはHTML5/CSS3を使ったプレゼンテーションソフトウェアです。まずは言うに及ばず、そのクールな画面を見てもらいましょう。 トップです。この雰囲気からして格好いいです。 スライドを切り替える時に3Dイフェクトがかかります。これまた格好いいです。 水平に動くのが基本ですが、垂直にスライドさせる指定もできます。 デモ動画です。スペースキーでスライド一覧が出せます。 reveal.jsはスライドの切り替えがとにかく格好いいので、これでプレゼンテーションを行えば観衆の注目を引くこと間違いないでしょう（もちろん内容が大事ですが）。 reveal.jsはCSS3/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る プレゼンテー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
