Pingendo - Bootstrap専用オーサリングツール
Boostrapはプログラマーであっても規則に沿って書いていくだけでモダンなUIのWebアプリケーション、Webサイトが素早くデザインできます。 しかし規則すら覚えるのが面倒、もっと手軽に作っていきたいと考える人も多いでしょう。そんな方にお勧めなのがPingendo、Bootstrap専用のオーサリングツールです。 Pingendoの使い方 Pingendoを立ち上げたところです。 プロジェクトを選びます。ブランクか、あらかじめウィジェットが埋め込まれたものかを選択できます。 あとは画面中央にあるビジュアル化された画面に対してウィジェットを配置していくだけです。 細かな配置変更やプロパティの設定は右側でできます。 Pingendoを使えばドラッグ&ドロップを使ってビジュアル的にBootstrapを使ったオーサリングができます。これならばプログラマーでも簡単に画面を作成できるでしょう。あとは
Material Design Fonticons – GoogleマテリアルアイコンのWeb Font版
マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。 そこでGoogleもアイコン集を提供しているのですが、これはPNGまたはSVGです。Material Design FonticonsはそれをWeb Fontとして提供します。 Material Design Fonticonsの使い方 基本的にGoogleのマテリアルデザインアイコンと変わりません。 Material Design FonticonsはWeb Fontなので一つのファイルで表示サイズにこだわることなく利用できます。アプリであればGoogleの画像ベースであっても自動的に選択を変えてくれますが、WebアプリケーションならばMaterial Design
jQuery Photoset Grid - Tumblrでも使える写真グリッド表示ライブラリ
写真は見せ方一つで大きくインパクトが変わります。単純に並べているだけではダメで、数多くのサービスが写真の見せ方に苦心しています。そんな中、一つのシンボルになっているのがTumblrではないでしょうか。 大きく一つの写真を見せるUIは写真を好む人たちに受け入れられ、今なお写真コンテンツが多く投稿されています。そんなTumblrでも使える写真グリッド表示ライブラリがjQuery Photoset Gridです。 jQuery Photoset Gridの使い方 小さい写真は正方形で表示されるようになっています。多くの写真をグリッドで表示するのに良さそうです。写真とは関係ないですが、背景色などの全体のバランスもいいです。 jQuery Photoset GridはjQuery製、MIT Licenseのオープンソース・ソフトウェアです。 jQuery Photoset Grid - Style
inuicon – pplogの中で使われているアイコンフォント（Web Font）
最近は画像でアイコンを表示する代わりにWeb Fontを使うケースが増えてきました。Font Awesomeをはじめとして、公開されているものを使うのは容易ですが、自分のために新規で作成するというのは難しい印象があります。 そんな中、参考にしてみたいのがinuiconです。pplog.netの中で使われているアイコンフォントになります。 inuiconの使い方 こちらがフォントです。かわいいアイコンですね。 下にあるのがすべてのフォントです。 種類はそう多くありませんが、pplogの中で使う分には十分なのでしょう。今後、pplogの中で使いたいアイコンが増えたら、IcoMoonが拡充されていくと思われます。自分たちのWebサイト、アプリで使うアイコンをフォントとして管理するというのは面白いアイディアですね。 また、inuiconはRailsでも使えるgemも公開されています。Railsプロ
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
SpinKit - 凄いテクニック。CSS3を使った各種スピナー MOONGIFT
CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角いパネルが回転します。 円が次々に大きさを変えていくパターン。 棒の長さが変わっていくパターン。 スクリーンショットでは分かりづらいので動画を撮影しました。 例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。 .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon
ついにここまで。PHP製のWeb IDE·Codiad MOONGIFT
CodiadはPHP製のWeb IDEです。 Webブラウザベースで開発を行う時代が本格化しています。サーバのファイルを直接触るのではなく、ローカルの開発環境として考えてみると面白そうです。今回はCodiadを紹介します。 セットアップです。PHPファイルを配置するだけです。 先ほど決めたID/パスワードでログインします。 ログインしました。左上がファイルブラウザ、左下がプロジェクト一覧、そして右側がファイルのエディター部になります。 PHPのコードを編集しています。ハイライト処理も拡張子によって自動で適用されます。 HTMLは開くタグを書くと自動的に閉じタグが追加される便利機能もあります。 ファイルの拡張子によって自動的にアイコンが付加されます。 スプリットビュー。 設定は右側に隠れています。 設定項目。テーマ機能もあります。 対応拡張子一覧。結構多いです。 CodiadはPHPで作られ
ローカルでTumblrのテーマをさくさく作成·Thimble MOONGIFT
ThimbleはローカルでTumblrのテーマを作成できるソフトウェアです。 Tumblrのブログ数が1億を越え、さらに広がりを強めています。そんな中とあって、テーマを作成する需要も増えています。しかしTumblrのテーマ作成は思いのほか退屈なようで、それを解決してくれるソフトウェアとしてThimbleが登場しました。 まるでTumblrのデザインそのままです。 画像の表示など多数のパターンに対応しています。 Thimbleはローカルに設置してTumblrテーマの作成ができます。つまりPHPでTumblr専用のタグを解釈し、表示を行っているということです。後はローカルファイルを自分の好みのエディターで編集し、再読み込みしてデザインの反映を確認できるようになります。格段に作業スピードが上がりそうです。 ThimbleはPHP製、GPLのオープンソース・ソフトウェアです。 MOONGIFTはこ
迫力満点。Webサイトの背景全部を動画に·BigVideo.js MOONGIFT
BigVideo.jsはWebサイトの背景に動画を利用し、そのまま再生できるソフトウェアです。 Webサイトの背景は単色、もしくは適度なパターン画像を使うのが一般的です。しかしそんな考えに捉われないソフトウェアがBigVideo.jsです。何と動画をバックグラウンドに指定し、そのまま再生してしまう驚きのソフトウェアです。 デモです。背景は画像ではなく動画です。バックグラウンドで再生されています。 切り替えました。すごく幻想的で格好いいです。 BigVideo.jsの力だけではないですが、前面のコンテンツは背景が透けていてマッチしています。映画のトレーラーに合わせて説明を加えても良さそうですし、ドキュメンタリー系のWebサイトで使っても良いかもしれません。動画はJavaScriptで切り替え可能ですが、最後まで行くとそこで止まるようになっています（ループ指定もできるようです）。 BigVid
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
ついにここまで。Google Chrome上で動作するターミナル/SSHクライアント·Secure Shell MOONGIFT
Secure ShellはNative Clientで開発された、Google Chrome上で動作するSSHクライアントです。 Web OSが発展したとしてもリモートアクセスがセキュアにできないと普及しづらいよなぁ…そう思っていた時期が私にもありました。しかしそれを克服してしまうソフトウェアがSecure Shellです。何とGoogle Chrome上でターミナル/SSHクライアントとして動作します。 最初の画面です。接続先を入力します。root@localhost:22といった具合です。 接続を開始しました。日本語も表示できています。 普通のSSHクライアントとして問題なく使えます。 Secure ShellはNative Clientで開発されています。つまりローカルで普通にアプリケーションとして動作できるものです。ついにこの手のソフトウェアまで出てきたか…そう実感させられるソフト
jQuery Mobile向けBootstrapテーマ集·Twitter Bootstrap jQuery Mobile Theme MOONGIFT
Twitter Bootstrap jQuery Mobile ThemeはTwitterのBootstrapとjQuery Mobileを組み合わせて使えるテーマ集です。 TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。 Aデザイン。 Bデザイン。全体として青。 Cデザインは赤。 Dデザインは緑。 Eデザインは水色。 Fデザインはオレンジ。 Twitter Bootstrap jQuery Mobile ThemeはjQueryとBootstrapを組み合わせ使えるテーマ集です。面白いのはA〜Fまでカラーが用意されており、data-themeを変更
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
