MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マテリアルデザインが流行っています。Androidアプリ向けが基本と思われますが、アプリに限らずWebでも利用が進んでいます。Google+のように導入が進んでいるサイトもありますし、これからマテリアルデザインを導入しようと考えている方もいるでしょう。 今回はそんなマテリアルデザインのテンプレートMaterial Design Liteを紹介します。Google製のテンプレートだけに機能が充実し、彼らの考えるマテリアルデザインが体現されていると言えるでしょう。 Material Design Liteの使い方 まずはデモから。 パララックスエフェクトになっています。 こんなAndroid風サイトも。 メニューが上に貼り付くようになっています。 下に薄い影が入っています。完全なフラッ

最近のWebはフラットなUIが主流で、かつユーザのアクションに対して何らかのアニメーションを行うマテリアルデザインも取り込まれてきています。そのためにも多くのフレームワークが出ています。しかしそれらを導入するとしばりが強いと感じている人も多いでしょう。 そこでExpandJSの導入です。PolymerとGoogleのマテリアルデザインをベースに、80以上のカスタムエレメントと350を越える関数を提供するライブラリです。 ExpandJSの使い方 フォーム入力系。フォーカスが当たるとアニメーションします。 ツールチップ。 ダイアログ。 アクション付きダイアログ。 パネル。 メニュー。 ペーパー風表示。 アバター。 ボタン。 クリックでアニメーションします。 フローティングボタン。 アイコン。 アイコン付きリスト。 リストの右側に情報追加することもできます。 四角い系統のボタン。 チェックボタ

ダミーデータを作るのは意外と面倒で、つい“ああああ”などとしてしまったり、同じ文字を繰り返してしまったりします。しかしそれでは実際にありそうな文字数が分かりづらかったり、雰囲気として本物っぽさが感じられません。 そこで使いたいのがGimeiです。偽名、偽の住所などを生成してくれるライブラリです。 Gimeiの使い方 GimeiはRubygemでインストールできます。 gem install gimei 例えば男性を作る場合は以下のようにします。 gimei = Gimei.male gimei.male? #=> true gimei.female? #=> false gimei.kanji #=> "小林 顕士" もちろん実行する度に結果は変わります。 > gimei = Gimei.male => #< gimei::name:0x007fd2cb35b4c0 @gender=:ma

Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。

Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。 materialの使い方 materialはフレームワークと言うよりもテンプレートに見えます。 materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。 materialはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア

デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops

プログラマーであればこだわりたいのがフォントです。特に英語は見やすくても日本語がつぶれてしまったり、誤認しやすいフォントを使っていると余計なバグが入り込む可能性が高まります。 個人的にはRictyを使っているのですが、さらにそのRictyを継承してプログラマー向けに進化したフォントがMyricaです。 Myricaの使い方 フォントを表示したところ。ピの文字が特徴的ですね。 特徴としては、ASCII/ひらがな/カタカナに対してヒンティング情報を追加しているので文字を小さく表示した場合にも文字がつぶれず、視認性が落ちません。また、濁音や半濁音が大きく表示されるのでぺとべの違いなどがはっきりと分かるようになっています。 等幅、プロポーショナル、さらに幅が狭いタイプと揃っています。Rictyをベースにしているので、Myricaと好みの方を試して使ってみても良さそうです。 MyricaはSIL O

キーボードショートカットの説明をしたい時にはどう書くのが良いでしょう。よくあるのはWin + Shiftキーといった具合にテキストでの説明です。より分かりやすくするためにテキストを四角で囲んでキーを表現したりすることもあります。 一つ、二つであればそれでもいいですが大量のキーボードショートカットを表現したいとなったらkeyboard-fontを使ってみましょう。 keyboard-fontの使い方 無変換のような普段あまり使わないキーであったり、リジェクトなど特殊な操作のキーもあります。Shiftキーや変換キーは合字を使ってShiftと打てばそのまま囲み文字になります。ヘルプドキュメントをはじめ色々な場面で使えそうですね。 keyboard-fontはApache License 2.0のオープンソース・ソフトウェアです。 n-yuji/keyboard-font

Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Evernoteは便利なのですが、クラウド系でありつつもクライアントアプリやサーバが重たいような気がします。ノートを保存しておくという観点で考えるともっと軽快にストレスなく動作して欲しいと思うでしょう。 そこで機能的には絞り込まれるものの、自前でノートアプリケーションを立ててしまうのはどうでしょう。今回はその一つ、Paperworkを紹介します。 Paperworkの使い方 PaperworkはEvernote、Microsoft OneNoteそしてGoogle Keepの代替として開発されているようです。機能的には本家には劣るものの、自前のサーバで保存したデータを自由に再利用できるのが便利です。個人はもちろん、部署やグループで使うのも良さそうです。 PaperworkはPHP製

システム開発を行っているときにダミーのデータが欲しくなることは多々あります。そんな時に本番データをコピーして使うのは大きな問題につながる可能性があるので決してしてはいけません。電話番号やメールアドレスなどを置き換える作業が逆に手間になる場合もあります。 そこで使ってみたいのがダミーデータのジェネレータです。今回はPython製のfake2dbを紹介します。 fake2dbの使い方 fake2dbはSQLite、PostgreSQL、MySQLそしてMongoDBに対応しています。インストールはpipでできます。 pip install fake2db インストールしたらfake2dbコマンドでデータベースに直接データを流し込めます。 fake2db --rows 200 --db sqlite # SQLiteの場合 fake2db --rows 1500 --db postgresql

Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evil IconsはRails/Sinatraそしてnodeと組み合わせて使えるようになっています。その他、Gruntで使うこともできます。Gulpはまもなくのサポートとのことです。SVGはベクターなのでサイズも色も自由に変更できるのが利点ですね。 Evil IconsはSVG製、MIT Licenseのオープンソース・ソフトウェアです。 Evil Icons outpunk/evil-icons

マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。 そこでGoogleもアイコン集を提供しているのですが、これはPNGまたはSVGです。Material Design FonticonsはそれをWeb Fontとして提供します。 Material Design Fonticonsの使い方 基本的にGoogleのマテリアルデザインアイコンと変わりません。 Material Design FonticonsはWeb Fontなので一つのファイルで表示サイズにこだわることなく利用できます。アプリであればGoogleの画像ベースであっても自動的に選択を変えてくれますが、WebアプリケーションならばMaterial Design

Bootstrapの登場以降、管理画面テンプレートと言った類のものが数多く登場しています。Bootstrapをサービスにそのまま組み込むのには躊躇してしまっても、運営者側の管理画面であれば十分すぎる品質と言えます。 今回紹介するFlakesもその一つですが、管理画面のUIに特化したテンプレートであるというのが特徴的です。 Flakesの使い方 Flakesは管理画面特化型とあって、管理画面上で必要そうな機能が揃っています。 Flakesはダッシュボード的な機能からデータメンテナンスまで幅広い管理画面テンプレートとなっています。カラーリングも最近のフラット系にあるほどカラフルではなく落ち着いた雰囲気なのが良いですね。 FlakesはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Flakes • An Admin UI & Template

DiagnostiCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Webブラウザはよく出来ていて、Web標準に沿っていなくともそれっぽく表示してくれます。しかしそれに安穏としているとレガシーなブラウザなどで表示が失敗したり、意図した動作にならないことがあります。そこでDiagnostiCSSを使ってチェックしてみましょう。 MOONGIFTで実行しました。様々な枠が表示されました。 マウスオーバーで画面上部にメッセージが表示されます。例えばonclick指定の指摘です。 かなりダメなところは赤い枠になっています。 DiagnostiCSSでは問題のあるHTML要素について枠で囲むことで問題を把握しやすくしてくれます。主にインラインスタイルやイベント属性、無効なリンク、空または廃止予定の要素、必要な属性のない要素などがリストアップされます。 HT

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はUIだけではなく、アクションによって起こるアニメーション技術にも注目が集まっています。Googleの提唱するMaterial Designでも単にタップするだけでなく、その後のアニメーションまで含めてデザインしています。 そんなアニメーションを含めたデザインを行うためのDSLとしてuilangが登場しました。全く新しい言語としてとても面白そうですよ。 uilangの使い方 <code> clicking on ".hide" adds class "hidden" on "#notification" </code> こちらが肝です。ボタンをクリックするとhiddenを追加するというのを文章として定義できます。 この場合は以下のようになります。 <div id=switch>

今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版

これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです（断定）。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの使い方 こんにちは、Excel方眼紙！ うん、まさにExcel方眼紙です。 表はまさにお手の物。 セル3つ分、といった指定も簡単にできます（data-widthで指定）。 従来のWebコンポーネントと合わせることもできます。ちゃんと文字の頭が合っているのに注目。 こんな緻密な画面も簡単に設計できます。 Webデザインにおいてこれほど緻密な画面を設計しようと思うと、かなり苦労するはずです。しかしja