WebSlides - 多彩な表現が可能なHTMLプレゼンテーションフレームワーク MOONGIFT
プレゼンテーションというとPowerPointやKeynoteで作ることが多いですが、HTMLでのプレゼンテーションも使われるようになっています。しかし表現力があまり高くなく、シンプルなスライドが多かったように思います。 そこで使ってみたいのがWebSlidesです。これまでにないほど表現力の高いHTMLスライドが作れるフレームワークです。 WebSlidesの使い方 例えばこんな表示。大きな画像を背景に当てています。 クラスも多数用意されています。 2つのカラムでの表現。ソースコードをハイライトできます。 上下左右、どこでも自由に記述できます。 左寄せ。 3カラムでのグリッド表示。 地図表示の例。 ナビゲーション。 Apple風のクラスが用意されています。 なんとなくそれっぽいですよね。 こんな表示も。HTMLならではですね。 Webサイトにも使えそうなデザインです。 表現という意味にお
watermark.js - JavaScriptで画像に透かし MOONGIFT
最近は画像をパクる輩がたくさんいて、著作権が問題になっています。そのため企業では画像に透かしを入れて、そのまま使っても誰の画像であるかすぐに分かるようにしています。 わざわざ画像を変換するほどではないけれど、簡単に持ち出せないように少し工夫はしたい、そう思う方に使ってみて欲しいのがwatermark.jsです。クライアントサイドのJavaScriptで透かしを入れます。 watermark.jsの使い方 watermark.jsは2つの画像またはテキストを指定して画像を生成するライブラリです。例えばこんな感じです。 透明度の設定もできます。 テキスト指定も可能です。 watermark.jsはimgタグのsrcに対してデータをそのまま適用します。そのため元々の画像のURLが分かりづらいのが特徴です。watermark.jsを使えばサーバサイドの用意なしに画像へ透かしを追加し、ユーザによって
multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT
パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思います。 いかがでしょう。スクロールすると上下から画像がスクロールしてきて合体します。パララックスとはまた違うインパクトがありますよね。 最初の表示はこんな感じ。 スクロールするとコンテンツが上下から表示されてきます。 視覚効果は慣れてしまうと思ったインパクトを与えづらくなります。パララックスイフェクトも最近では印象が残りづらくなっているかも知れません。そこで新しい視覚効果を考えてみるのは面白いと思
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
GitリポジトリからFTPサーバにアップロード·git-ftp MOONGIFT
git-ftpはGitのリポジトリからFTPサーバにアップロードできるGitコマンドの拡張です。 リポジトリはGitで管理しつつも、デプロイは未だにFTPを使っている…なんて会社は多いのではないでしょうか。せっかく先端の技術を使っておきながら半分はレガシーなまま、これでは勿体ないです。git-ftpを使ってスムーズな運営をしましょう。 設定です。git configを使ってユーザIDとパスワード、アップロード先を登録しておけます。 コマンド例です。 git-ftpを使うとGitリポジトリからFTPサーバにアップロードできるようになります。その逆はできません。ログインIDやパスワードは予め記録しておけるので、後はgit ftp pushを実行するのみになります。スコープ機能があり、複数のサーバへの同期を個別に管理できます。Ignoreにも対応し、設定ファイルを使ってアップロードしないファイル
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
iOS 7アプリを開発するのに必携のワイヤーフレーム·iOS 7 Wireframe Kit MOONGIFT
iOS 7 Wireframe KitはCreative Commonsのオープンソース・ソフトウェアです。 iOS 7の正式リリースは間もなくと思われますが、既に新しいアプリ開発においてはiOS 7のUIを模して行われていると思われます。そんな中で必要なのがUIを決める素材集です。今回はIllustratorベースのiOS 7 Wireframe Kitを紹介します。 こちらがファイル一覧。Illustrator、PDF、PNG、Omni Graffle、Sketch用のファイルとなっています。 その内容。iOS 7らしい雰囲気のコンポーネントが多数作成されています。 こちらはIllustrator版。 iOS 7 Wireframe Kitではデフォルトのオブジェクトをデザインしていますので、そういったパーツを組み合わせて作るアプリに対しては有効ではないでしょうか。細かくカスタマイズす
テーブルの情報をJSON化·Table-to-JSON MOONGIFT
Table-to-JSONはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 先日、JSONからテーブルを自動生成するTablerを紹介しましたが、今回はその逆です。テーブルタグからJSONを生成するTable-to-JSONを紹介します。 デモのテーブルです。Convertボタンを押します。 ダイアログが表示されます。確かにJSONデータで取り出せています。 Table-to-JSONではオプションとして指定したカラムを省く（またはそれだけにする）ことや、非表示な行は省くといった指定ができます。テーブルタグのデータを再利用する際に役立つのではないでしょうか。 MOONGIFTはこう見る Table-to-JSONの面白い点としては任意のテーブルに対して使える点です。うまく使えばテーブルのデータをJSONとして扱いやすく取得できます。この手
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
レスポンシブWebデザインで組む際のベースにぜひ！·GroundworkCSS MOONGIFT
GroundworkCSSは多様なガジェットがサポートされたレスポンシブWebデザインのフレームワークです。 レスポンシブWebデザインがもてはやされていますが、テクニックはなかなか一般化しづらいものがあります。そこでフレームワークをベースにしてみるのはいかがでしょう。今回紹介するのはGroundworkCSSです。 スライダーやタブメニューなど様々なウィジェットが提供されています。 タブレット版。 スマートフォン向け。 横向き表示もサポート。 サイドメニューを使った表示。 幅が狭くなるとメニューは縦に並びます。 ボタン、タイポグラフィ。 フォーム。 アラートやナビゲーション。 テーブル。ソーシャルアイコンも多数用意されています。 サイズも様々。使い分けが可能です。 たくさんのアイコンも用意されています。 モーダルウィンドウ。 幅が狭い場合のボタン。 タブの端がちょっと気になるかも…。 ス
最低限かつ十分なスタイル設定が特徴のCSSフレームワーク·Kube MOONGIFT
Kubeはプロフェッショナル向けのCSSフレームワークです。 見やすく、かつ様々なニーズに対して即座に答えられるようなデザインを考えるのはとても大変なことです。しかしその道のプロが作り出したスタイルシートフレームワークであるKubeを使えば実現しやすくなるかも知れません。 デモページです。リンクやサイドバーが並んでいます。 こちらはシンプルなベース表示。 iPhoneに対応。 全て一列になって表示されます。 タブレット向け。こちらも最適化されます。 横向きだとうまくいかず…残念。 こちらは表示例。Bootstrapのようなrowが使えます。 フォーム。 テーブル。 リンクの色変更も用意されています。 ボタン。 Kubeの特徴は優れたタイポグラフィ、グリッド表示、フォーム、テーブル、様々なクラスユーティリティ（.width-50とすれば半分になるなど）、ボタンなど最低限ながらも実用的なスタイ
その場で編集。Webベースのガントチャートエディター·jQuery Gantt editor MOONGIFT
jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。 プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt editorを使ってみましょう。その名の通り、jQueryベースのガントチャートエディターです。 メイン画面です。まさにガントチャートの画面です。 日程や階層の深さを編集できます。 詳細な情報も変更できます。 タスクの追加も可能です。 人員のアサインにも対応しています。 データはそのまま保存したり、JSONとしてエクスポートできます。従ってJSONデータを使えば同じ画面を再現するのは難しくありません。Undo/Redoをサポートし、クロスブラウザで動作します。閲覧だけでなく、編集ま
お気に入りのTumblr画像をまとめてダウンロード·TumblrPhoto MOONGIFT
TumblrPhotoはTumblrのURLを指定してポストされている画像をまとめてダウンロードするソフトウェアです。 Tumblrはブログではありますが、面白い画像や格好いい画像がたくさん集まっているサイトでもあります。そんなTumblrから写真をまとめてダウンロードしてくれるツールがTumblrPhotoです。 メイン画面です。TumblrからAPIキーを貰って入力し、保存先と画像をダウンロードしたいブログのURLを入力します。 例えばこんな感じ。 ダウンロードが開始しました。 ダウンロード終了です。待っているだけなので簡単です。 色々な画像が一気に集まりました。 TumblrPhotoはURLを指定してダウンロードする形になっています。そのブログにある画像を一気にまとめてダウンロードしてくれます。大量の画像ですとそれなりに時間がかかりますが、処理は全て自動なので徐々に増えていく画像を
拡大しても奇麗！SVGで作られたアイコン集·Drawic MOONGIFT
DrawicはSVGで作られたソーシャルサービス系アイコン集です。 新しいMacBook ProやiPad、iPhoneなどから導入が進んでいるRetina Display。これまでにないほど、奇麗な描画が特徴ですが、それによって画像などの粗さが目立つようになってしまいました。それを回避するには画像ではなくベクターを使うことです。今回はそんなチャレンジを行うアイコン集Drawicを紹介します。 アイコンは全部で15種類。全てSVGで作られています。 SVGだから拡大しても奇麗！ ファイル構成。全て真っ白なSVGなので注意。 Drawicは有名なソーシャル系サービスのアイコンをSVGで提供しています。Twitterのアイコンも新しいものになっているのが嬉しいです。16種類なので全てのパターンで使うには不足を感じるかも知れませんが、徐々に増えてくれることを期待したいですね。 DrawicはSV
プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT
jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGI
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
これはnode.jsの時代が来るか！？全て揃ったnode.jsフレームワーク·Tower.js MOONGIFT
Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B
IE8以前に救済。HTML5のタグを利用可能に·html5shiv MOONGIFT
html5shivはIEをはじめとするHTML5非対応WebブラウザでHTML5のタグとスタイルを使えるようにするソフトウェアです。 HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。 例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。 ソースコード。sectionタグなどを使っています。 まだ開発中ということもあって全てのテストが通る訳ではなさそうです。 別なソース。markタグを使ったり、jQueryも使えています。 こんな感じのグラフも描けています。 グラフのソース。おそらくCanvasタグで描かれているはず。 html5shivを使えばHTML5非対応のWebブラウザであっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Git-it - Gitの使い方を基礎から覚えるためのアプリ MOONGIFT