N1 - シンプルで格好いいUIのメーラー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebアプリケーションとしてのGmailが使い勝手良くなったので、個人的にはメーラー（MAU）はほとんど使わなくなっています。しかし会社などでIMAPサーバを使っている場合はまだまだ使われているはずです。 今回紹介するのはN1、オープンソースの新しいメールクライアントです。Gmailをはじめ、多くのメールサービスにも対応しています。 N1の使い方 N1を立ち上げました。 UIはシングルパネルと2ペインのパネルから選択できます。 プラグイン機能も用意されています。 メール一覧画面です。Gmailでプロモーションタブに設定したメールもインボックスに表示される気がします。 メール詳細です。HTMLメールも問題ありません。 メール作成画面。シンプルでいい感じです。 設定画面です。 キーボー
Kathamo - シンプルなレスポンシブ・フレームワーク MOONGIFT
最近のCSSフレームワークは大型化する傾向にあります。多機能で多数のUIパターンに対応しているのは利用者としては嬉しい一方で、フレームワークの提供する機能以上のことをしようとすると突然バランスが崩れてしまうことになります。 そこで使ってみたいのが最低限の機能を小さく提供するフレームワークです。今回はモバイルにも対応したKathamoを紹介します。 Kathamoの使い方 Kathamoのスクリーンショットです。まずはグリッド。よくある12分割です。 タイポグラフィ。 引用はこんな感じ。 フォームとボタン。 テーブル。 リスト。 アラート。 パネル。 ナビゲーションバー。 Kathamoには多くの機能はありませんが、レスポンシブなグリッドとよく使われるであろう機能を提供しています。後は足りないものを自分でデザインしていけば良いでしょう。機能が少ない分、全体のバランスが一気に崩れると言った心配
ai2html – IllustratorのAIファイルをHTML化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのデザインをする際にPhotoshopまたはIllustratorを使う人に分かれるかと思います（Fireworks派もいますが）。どちらのツールを使ったとしても、できあがったデザインに対してHTML化をするのは一苦労します。 そこでベースをプログラマブルに生成してしまうのはいかがでしょう。そのためのツールがai2htmlです。Illustratorファイルを読み込んでHTML化します。 ai2htmlの使い方 ai2htmlはIlustrator CCで使えるスクリプトになります。Windows、Mac OSXのどちらでも動くようです。設置するパスは /Applications/Adobe Illustrator CC 2014/Presets/en_US/Scrip
Navstack.js - ハイブリッドアプリやスマートフォン向けWebサイトの画面遷移はこれにお任せ MOONGIFT
スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl
Concise.CSS·軽量でSASSベース、絞り込まれた機能だけを提供するフロントエンドフレームワーク MOONGIFT
ここ数年フロントエンドフレームワークが熱いです。Bootstrap、Zurb Foundationをはじめ、多種多様なフロントエンドフレームワークが登場しています。プログラマにとっては便利な反面、意外とデザイナーには好まれていないのではないでしょうか。 作法に則って記述している分には良いのですが、ちょっとでも逸脱しようとするととたんに面倒になるものが多い印象があります。その半分も機能は使われないフロントエンドフレームワークを止めて、Concise.CSSを使ってみてはいかがでしょう。 Concise.CSSの使い方 まずはConcise.CSSで作られたサイトのサンプルから。 テキストベースでもちゃんと作り込めるのが良いですね。 スクロール系のページ構成です。 ここから画面要素についてみていきます。 グリッド。 ヘッダー。 小さい文字や斜体。 引用。 住所。 文字寄せ。 背景色。 階層対応
Ink - スマホ/タブレット対応のレスポンシブHTMLメールテンプレート MOONGIFT
これは使い勝手良さそうですよ！ ガラケーが主流だった日本においてはHTMLメールはあまり普及しませんでした（Outlook ExpressがよくHTMLメールでセキュリティインシデントを起こしていたのも大きいと思いますが）。しかし海外でのサービスではHTMLメールが当たり前ですし、より多くのコンバージョンを求めるならHTMLメールを使わない手はありません。 しかしHTMLメールというと通常のHTMLと異なる作法が必要で、作成においても若干のコツがいります。それがPCメーラー、Gmail、スマートフォンとそれぞれのデバイスで適切に見られるように考えるとなるとレスポンシブWebデザイン以上に大変なことです。 そこで紹介したいのがInkです。Zurb Foundation開発元が作成した新しいレスポンシブHTMLメールテンプレートです。 サンプルです。ヘッダー、見出し、リストなどで構成されていま
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
ランディングページに使おう。Bootstrapベースのテンプレート集·Bootstrap Landing Page Templates MOONGIFT
Bootstrap Landing Page TemplatesはBootstrapを使ったランディングページ用テンプレート集です。 Twitterの開発するBootstrapの人気が高まっています。個人はもちろん、企業においても手早くUIをまとめるのに使っている所が増えています。そこでさらに利用を広めるべくランディングページにBootstrapを活用するBootstrap Landing Page Templatesを紹介します。 デモです。ブルー。 ブラック×オレンジ。 ピンク。 ブラック×イエロー。 ランディングページはシンプルで読みやすく、目的を達成させるのに特化していなければなりません。その点、BootstrapではシンプルなUIでレスポンシブデザインに組み上げられるのが便利かも知れません。 Bootstrap Landing Page TemplatesはHTML製、WTFPL
フォームの入力をもっと快適にする·jq-idealforms MOONGIFT
jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力時にリアルタイムチェックしてくれます。 OKだと青くなります。 カレンダーは選択式です。 チェックボックスなどのデザインがカスタマイズされています。 ドロップダウンも色がついています。 jq-idealformsではステップごとに表示を分けたり、キーボードの入力をリアルタイムにサポートしていたりと便利な機能がたくさんついています。ブラウザはIE8以降の他メジャーなブラウザに対応し、Android
モバイル/デスクトップの双方で動くHTML5ゲームを開発しよう·Quintus MOONGIFT
Quintusはモバイル、デスクトップの双方で動作するHTML5ゲーム開発フレームワークです。 HTML5でゲームを開発する際にはターゲットとしてスマートフォンを考える人が多いと思います。そこで紹介したいのがQuintusです。スマートフォンとデスクトップ両方に対応したゲームが開発できるフレームワークです。 ボールが飛んでいくデモです。 オブジェクト同士が重なり合うデモです。 こちらはゲーム。 Quintusは僅か60行程度のコードでアクションゲームが作れてしまうほどフレームワークとしての機能が多機能です。スマートフォンで表示した場合にはコントロールキーが表示されます。機能はモジュール化されており、2Dなどを必要に応じて読み込みます。 QuintusはJavaScript/HTML5製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る HTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
