whirl – CSSだけで実装されたローディング表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。 そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirlです。 whirlの使い方 whirlには様々なデザインが用意されています。 whirlの良いところは画像ではなくCSSだけでアニメーションを表現しているという点です。わざわざ画像をアップロードする必要もないのでwhirlだけで素早くローディングアニメーションが実現できます。 使い方としてもクラスを追加したり、表示するだけで使えますので手軽です。 <div clas
geojson.io - GeoJSON出力に対応したWebベースのマップエディタ MOONGIFT
地図コンテンツはいつも根強い人気があります。しかし意外と作るのは面倒だったりします。地図は色々なプロバイダーから提供されていますが、その上にマーカーを立てたり、四角く囲んだりするのは面倒です。 それをビジュアル的にできるのがgeojson.ioです。最終的にGeoJSONファイルを生成してくれるマップエディターです。 geojson.ioの使い方 マーカーを立ててみます。説明も追加できます。 さらにポリゴン。こちらもマウスで自由に書けます。 結果はGitHubやGist、GeoJSONで出力できます。GistやGitHubであればこんな感じに格好よく表示できます。 その他TopoJSON、CSV、KML、Shapefileでも出力できます。GeoJSONを使えば他のシステムとの連携も容易です。生成されたファイルをテンプレートに、システムから出力してもいいでしょう。色々な使い道が考えられそう
initial.js - ユーザ名を使った格好いいプロフィール画像を生成 MOONGIFT
最近は大抵のサービスでユーザプロフィール画像が掲載できるようになっています。FacebookやTwitter、GitHubから取ってきてくれれば良いのですが、そうでない場合は自分でアップロードする必要があります。そうしないと格好わるいデフォルトの画像だったりしますよね。 ユーザごとに多少なりとも変化を持たせたいと思うならばinitial.jsの仕組みを使ってみてはいかがでしょう。名前の最初の文字を使ってプロフィール画像っぽい演出をしてくれます。 initial.jsの使い方 例えばこんな感じです。 名前の最初の文字が四角の中に入っています。背景色が違うだけで随分印象が違いますね。 大きさの変更もできます。 JavaScript/HTMLのコードは以下のようになります。 <img data-name="Steve" class="profile"/> $('.profile').initia
Camo - GitHubでも使われている画像プロキシ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebサービスではSSLを常用するようになっています。しかしそんな中、意外と厄介なのが画像などの外部リソースです。HTTPSに入っていない外部リソースを参照しようとすると全てがSSLでないといった注意が出てしまいます。 そこで使ってみたいのがCamoです。GitHubでも使われている小さな画像プロキシになります。 Camoのデモ これはCamoがSSLになっており、プロキシとしてFlickrの画像を取得している形になります。Camoは5MBまでの画像を取得可能で、Googleチャートをサポート、リダイレクトした画像も取得できます。 URLのフォーマットは次のようになります。 http://example.org/<digest>?url=<image -url> http:/
Iconion - 素敵なアイコン画像が簡単に作れちゃう！ MOONGIFT
これは素敵すぎる！ アイコン画像の作成は大変です。小さな画像ながら、それを見て内容が理解できないとアイコンとしての意味がありません。最近ではIconfinderのようなサイトもできていますが、色味やサイズがほんの少し合わないと言ったことも多いはずです。 そこで使ってみて欲しいのがIconionです。アイコンのピックアップと設定変更だけで簡単に素敵なアイコン集ができてしまいますよ！ Iconionの使い方 Windows版とMac OSX版がありますのでお好きな方をダウンロードし、起動しましょう。 メイン画面です。これだけでほぼ使い方が分かってしまいますよね。左側にアイコンが並んでいますので好きなものを選択しましょう。 アイコンを選択すると中央のプレビューが変わります。さらにその下にアイコンが登録されます。 色や角丸のサイズなどを自由に変更できます。 さらにスタイルを変更するとまとめて設定が
Bootflat - フラットUIで格好いいBootstrapテーマ！ MOONGIFT
創造意欲がかき立てられますよ！ Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。 今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してくれる素敵なテーマです。 Bootflatのスクリーンショット 今回はスクリーンショット多めで紹介します。 基本カラー。パステル系ではっきりとしていますね。 まずはボタンとボタングループ。 ボタン＋ドロップダウン、ラベル、バッジ、ツールチップなど。 ドロップダウンはもちろん階層対応です。 フォーム。 フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。 アラート。 タブ。4辺全てに対応しています。 ナビゲーションバー。 パン屑、通知、プログレスバー
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Hackathon Starter·認証/デザインの仕組みが揃ったハッカソン向けテンプレート MOONGIFT
自分でWebサービスを作り始める時に、いつも同じことを繰り返しているなと思ったことはないでしょうか。例えばデザインテンプレートを用意したりjQueryをダウンロードしたり、さらに認証の仕組みを作ったり…これらは本当によくあることです。 何度も繰り返すのであれば、それは自動化すべきです。ということで作られたのがHackathon Starter、ハッカソン向け（だけではないですが）のnodeテンプレートです。 トップページ。Bootstrapが予め入っています。 サインイン。Facebook、Twitter、GitHub、Google+から選択もできます。 ログインすればメニューの表示も変わります。 プロフィール編集もあります。 外部のAPIをコールしてデータの表示も可能です。 コンタクトフォームも！ 決められた時間内でプロジェクトを開発しなければならないハッカソンの場合、いつも行っている定
UIImageView-BetterFace·写真表示アプリに。人をいい感じに表示してくれるiPhone用ライブラリ MOONGIFT
あらこれ素敵。 写真のサムネイル表示をするのは意外と悩ましい問題があります。単純に小さくしてしまうと細かい部分が分かりづらく、インパクトが薄くなります。しかし切り抜くような表示すると最もインパクトがある部分が切り抜かれてしまったりします。 人が写っている写真において一番大事なのは人の顔であるのは当たり前なことです。そこでUIImageView-BetterFaceでは顔のある場所をメインとして写真を切り抜き表示してくれます。 サンプルの写真です。左側が単純にアスペクト比を変えただけ。右側がUIImageView-BetterFaceによる表示です。人物が大きく表示されます サンプル二つ目。 この左側の写真では顔が認識されませんでした。顔が大きく写っていないと失敗するようです。 横向きの写真でも適切に配置されます。 中央に寄っています。いい感じですね。 複数の人物でも使えます。 複数人物でさ
Tokaido.app - 凄く便利！Mac OSXのRuby/Rails開発環境構築がこれ一つで完結 MOONGIFT
ついにきたきたきた！ 2012年5月に話題を呼んだ初のクラウドファウンドを使ったオープンソース・プロジェクトのTokaidoですが、ついに試せる段階になってきました。既にGitHubでリポジトリも公開されています。それがTokaido.appです。 さっそく起動してみましょう。 これがメインウィンドウです。まずOpen in Terminalを押します。 ターミナルが開きました。 Railsは独自にインストールされます。 Rubyは2.0系がインストールされました。 Railsアプリケーションを作成し、Tokaido.appに登録します。 起動しました。 さらに起動！.tokaidoでローカルサーバが立ち上がります。3000番ポートなどがつかないので、既に別なWebサーバが立ち上がっている場合は終了するようにしてください。 ログはコンソールアプリで確認できます。フィルタも使えますし、ターミ
Facebook for iOSのチャットアイコンUIを再現·ChatHeads MOONGIFT
ChatHeadsはObjective-C製、iOS用のオープンソース・ソフトウェア（ISC License）です。 iOSのFacebookアプリではチャットしている友人が丸いアイコンになって画面上に表示されます。これを再現したライブラリがChatHeadsです。 デモアプリです。左上にアイコンが表示されています。 左右に移動ができます。途中で指を離しても左右どちらかに吸着します。 高さは自由に決められます。 アイコンをタップすると一気に上に移動してさらにテーブルが表示されます。 ChatHeadsではFacebookアプリのように削除機能はありませんが、アイコンが途中で指を離した場合にも自動的に計算して吸着すると言った他でも使えそうな仕組みがあります。特殊な用途向けな気もしますが、だからこそ覚えておくと使える場面があるかも知れません。 MOONGIFTはこう見る iOSアプリではユーザ
商品を販売するのに特化したシングルページコマース·Shop MOONGIFT
ShopはRuby製のオープンソース・ソフトウェア（MIT License）です。 コマースの裾野は広がっています。ショップはよりカジュアルになってきており、今ではStores.jpのように素早くショップを立ち上げられるサービスも出ています。そのオープンソース版とも言えるのがShopです。 デモショップです。他に何もありません。商品はここにある2点になります。 サイズを選んでカートに放り込みました。カートに追加されるアニメーションが格好いいです。 購入手続きを進めます。適当な名前、住所を入力します。 次に決済情報を入力します。 処理が行われて… 注文が完了しました！ Shopはシングルページのコマースを提供します。バックエンドにはParseを使っており、運用負荷は殆どないようです。一つないし二つくらいの商品を売りたいと考える時にちょうどいいインタフェースではないでしょうか。 MOONGIF
WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT
HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification
LinkedIn製のWebサイトツアーライブラリ·Hopscotch MOONGIFT
HopscotchはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webサービスはどんどん複雑になってきており、使い始めるまでの敷居が高くなっています。それを解決する手段としてツアー表示が知られています。幾つかライブラリが知られていますが、今回はLinkedInが開発したHopscotchを紹介します。 最初の表示です。フラットなUIにマッチしたデザインが特徴です。 ツアーの番号がついていたり、×ボタンで閉じれるなど細かな点にも気が配られています。 上下だけでなく、左右にも出し分けができます。 ツアーは戻ることもできます。 ツアーを辿っている時にはもちろんスクロールが自動で行われて、訪問者はそれを見ながら順番にクリックしていくだけで問題ありません。さらにHTML5のセッションストレージによって複数ページに渡ったツアーもサポートしています
GitHubのアクティビティカレンダー風表示·Cal-HeatMap MOONGIFT
Cal-HeatMapはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 GitHubの活動によって色が変わるヒートマップはプログラマの間で人気があります。同じような表示を行うJavaScriptライブラリがCal-HeatMapです。 デモです。それっぽい表示が出来ています。 開始日を指定する事もできます。 年月だけの表示。 日付ごとの小さな表示版。 二ヶ月分表示。 カラーリングを変えられます。 月によって変更もできます。 Cal-HeatMapはある日付における状態に応じて色を変えるのが面白いところです。中長期的に取得しているデータがあれば、そのJSONをCal-HeatMapで見てみると面白い見せ方ができそうです。 MOONGIFTはこう見る Webサービスの数多くは今、または未来における行動に関するデータだけを見せます。そして過去については大して
レスポンシブなデザインを構築する際のベースに·skelJS MOONGIFT
skelJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 レスポンシブなWebデザインを考える際にはブロックを意識してデザインを行う必要があります。多くは幅を12分割して提供するようです。レスポンシブなサイトやWebアプリを開発するためのフレームワーク、skelJSも同様の設計となっています。 デスクトップサイズ。Bootstrapのように見やすい画面になっています。 タブレットサイズ。この場合もデスクトップライクですが、横の隙間は狭まっています。 スマートフォンサイズ。メニューなどはそのままに、下のコンテンツはずれています。 作成例。12個のブロックをどう割り当てるかを決めていく形です。 -3uといった指定をすると左側が空く仕組みになっています。これは面白いです。 入れ子にした場合の表示はちょっと変わっています。 skelJSは大きなフレームワーク
Googleカレンダー風に時間を入力·Timepicker for jQuery MOONGIFT
Timepicker for jQueryはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Web上で入力する事が多いのが日時です。日付についてはカレンダーピッカーがありますが、時間は意外と面倒な入力を行う事が多いです。そこで使ってみたいのがGoogleカレンダー風入力を実現してくれるTimepicker for jQueryです。 基本的な使い方。クリックすると30分ごとの時間が出てきます。 現在時刻を中心にセットしてくれる設定もあります。 ある時刻からの時間を表示するデモ。1時間のミーティングなども指定しやすそうです。 ある時間を無効にする指定もできます。 時間のフォーマットは自由に設定できます。 ステップはデフォルト30分ごとですが、15分や60分も指定できます。 カレンダー入力と連携する形です。この二つで入力が随分と楽になりそうで
スマートフォンのWebアプリケーション/ネイティブアプリ開発フレームワーク·Mulberry MOONGIFT
MulberryはRuby製のオープンソース・ソフトウェア（2-clause BSD lisence）です。 スマートフォン向けWebサイトとネイティブアプリの二つを作らないといけないのは大変です。それらをいっそ一つにしてしまえば…とお思いの方にお勧めしたいのがMulberryです。ネイティブ、Webの二つの環境で動作するアプリケーションを同時に開発できます。 ファイル構成です。こういった自動生成は最近の流れですね。 serveコマンドでWebサーバが立ち上がります。 デモのWebアプリケーションです。多彩な機能が用意されています。 地図。Googleマップを使っています。 画像と説明文。 ヘッダーバーが多重に。 記事を読むための表示。 音楽も配信できます。 イメージギャラリー。スワイプ操作で切り替えられます。 大きな画像で表示。 フィード表示にも対応しています。 地図の拡大版。 グリッド
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
Hullを使って作られたInstagramクローン·Hullagram MOONGIFT
HullagramはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 HTML5でどこまでできるのか、そんな挑戦が常にスマートフォンでは行われています。今回はHullagram、Instagramライクなソフトウェアを紹介します。 トップページ。アプリのように見えますがHTML5です。 ログインしました。タブバー部分もHTMLです。そのためカメラボタンをタップするとファイルのアップロードダイアログが開きます。 そして写真を選択するとアップロード処理が開始されます。Instagramのようなイフェクトは無理です。 iOS6になってファイルアップロード機能がサポートされたからこそのソフトウェアと言えるでしょう。さらに今後iOS7になれば写真のイフェクトもネイティブにサポートされるようです。それらがあればInstagramレベルのサービ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
