Odyssey.js·地図とテキストをミックスした格好いいコンテンツ MOONGIFT
地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。 そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。 Odyssey.jsの使い方 こちらはエディタになります。地図と、右側に編集できるコンテンツがあります。 Odyssey.jsのコンテンツはMarkdownフォーマットで記述します。ただしcenterやzoomなど特別な気泡も幾つかあります。 左側のカルーセルを移動するとマップもその場所に移動します。 こちらは縦スクロール型。上にある地図は固定で、スクロールすると地図も移動する仕組みです。 こちらはヒートマップ風に線が描かれるデモです。時間軸によって動くのが面白いです。 刻々とアニメーショ
Aozora - Webデザインに便利なダミーテキストを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトをデザインする際にテキスト部を「あああああ」などで埋めたりします。これでは何となくイメージがわきづらいという問題があります。また文字が短い場合、長い場合など様々なパターンの文字を作る必要があります。 そこで使ってみたいのがAozoraです。有名な小説などから文字を適当な長さの生成してくれます。 Aozoraの使い方 AozoraはRubygemsでインストールできます。 $ gem install aozora 後はオブジェクトを作るだけです。 puts Aozora.new #=> "私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起す
Library Detector - あのサイトはどのJavaScriptライブラリを使っているか MOONGIFT
Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.
Maverix Bootstrap Theme - BootstrapをベースにしたMac OSX風UIテーマ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ああ、これは面白い！Bootstrapで様々なテーマが作られていますが、基本的にWebアプリケーション向けです。Webでの利用については既に多数のコンテンツが存在しますし、おそらく今後も増えていくでしょう。 そこで次に注目したいのがnode-WebKitとの組み合わせです。ネイティブアプリ風に動くWebアプリケーションの場合、求められるUIとしてはMaverix Bootstrap Themeのようになるでしょう。 Maverix Bootstrap Themeの使い方 スクリーンショット多めで紹介します。 Maverix Bootstrap Themeを使えばnode-WebKitで作ったWebアプリケーションがほぼローカルアプリケーションと変わらず使えるようになります。Web技
Google App Engine上で動作する本格的CMS·Vosao CMS MOONGIFT
Vosao CMSはJava製/Google App Engine用のオープンソース・ソフトウェア。Google App EngineはWebアプリケーション開発者のためのプラットフォームというイメージがあるが、手軽に使えるホスティングサービスと捉えることもできる。すでに完成されているWebアプリケーションを導入すれば良い。 管理画面 汎用的に使われるのはブログエンジンやCMS、Todoといった類のものだろう。こうしたサービスを立ち上げる際に既存のソフトウェアを使えば簡単にサイトが立ち上げられる。Vosao CMSはその一つ、Google App Engine上で動作する本格的CMSだ。 Vosao CMSはユーザ画面と管理画面に分かれている。管理画面ではコンテンツの作成とデザインの編集、ファイルストレージ、サイト設定が主な機能にある。プラグインにも対応しており、SEOやフォーム作成用のプ
iPhoneの傾きを使って見せ方を変える画像ビューワー·lenticular.js MOONGIFT
lenticular.jsはiPhoneの傾きにあわせて表示を変える画像ビューワーです。 iPhoneなどのスマートフォンでは傾きを検出できる機能があります。それを使った面白い画像ビューワーがlenticular.jsです。 美女が布を巻いて立っています。マウスを動かしてみましょう。 マウスの動きにあわせてくるくると回ります。 左右はもちろん上下にも動きます。 こちらはおっさん。おっさんも動きます。 車。これは面白い見せ方です。 こちらはiPhone版。 格段に大きい写真でくるくる。 iPhoneで車を表示した場合。 タネを明かせば当然画像がたくさん作られています。 lenticular.jsはたくさんの画像をマウスや加速度センサーの動きにあわせて差し替えることで動きを演出しています。フレームをより細かくすればするほど滑らかに動くようになります。 lenticular.jsはJavaScr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
