PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 2019年02月22日追記：こちら、ライセンスが非常に怪しい（というかブラック）です。記事は残しますが、ダウンロード/利用されないことをお勧めします。 プログラマーやWebデザイナーにとってフォントは気になる存在です。そのフォントの善し悪しで作業効率が大幅に変わってきます。視認性の悪いフォントを使うと不用意なバグを生み出してしまう可能性もあります。0やO、Iとlなどが見分けやすいものを選ぶべきです。 今回は開発者向けに作られたフォント、Consolasを紹介します。元々オープンソース・ソフトウェアではなかったのですが、v8.0からオープンソース（といっても現時点ではライセンスはありませんが…）になるとのことです。 Consolasの使い方 フォントの見栄えはこんな感じ。 コードを表

テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

Gitを使った開発では目処が立った段階でプルリクエストを送って取り込んでもらうというのが基本です。小さなプルリクエストであればすぐにチェックできますが、大きなものになると数十ファイルが更新されている場合もあるでしょう。そんな中では見逃しやレビューが時間を要してしまうかも知れません。 そこで使ってみたいのがGitHub Diff Explorerです。プルリクエストを見やすく階層化してくれます。 GitHub Diff Explorerの使い方 プルリクエストのFile Changedを選ぶと、左側にディレクトリツリーが表示されます。 右側に出るのは選択されているファイルだけです。 GitHub Diff Explorerで見れば変更されているファイルだけが一覧されます。さらに長大なスクロールがなくなり、見たいファイルだけを素早く確認できます。レビューすることが多い方にお勧めなソフトウェアで

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ファイルサイズが小さいのは良いことです。特にスマートフォンなどのモバイルネットワークであったり、弱いWiFiなどでもサービスが快適に使えるかどうかは大きな問題になります。 そこでDropboxが開発しているのがLeptonです。ロスレスでJPEGを22%程度サイズ軽減させるソフトウェアです。 Leptonの使い方 元ファイルが3,680KBで、2,943KB程度に軽減されます（79%になっています）。どれくらい強力に行うかによって3つ程度プログラムがあります。 Leptonは可逆実行が可能で、.lepファイルを対象に実行することで元のJPEGファイルが取得できます。つまりDropboxであればサーバとクライアント間、さらにサーバでの保存時にLeptonを使うことで写真のストレージや

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerは便利なシステムで一旦慣れてしまうと何でもコンテナとして管理したくなります。その結果、コンテナが乱立したり、イメージの管理も煩雑になっていきます。そうすると欲しくなるのが管理UIになります。 GUIでもいくつかありますが、手軽に運用できるのはターミナル上で動くものになるでしょう。今回はその一つ、dryを紹介します。 dryの使い方 一覧で現在動いているコンテナが確認できます。 アクティブでないものも含めた一覧です。 詳細を見たり、ログを確認する、コンテナを再起動や終了させるといった操作もできます。 ログです。 プロセスやメモリの状態。 dryはデフォルトのDockerコマンドで収集できる情報を扱いますが、それでも操作がキーボードで選択していくだけなのでとても楽になります

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オンライン上の情報を集めるのにRSSフィードは便利な仕組みですが、最近はフィードを出していないサイトも数多くあります。特にソーシャルメディア系のサイトでは訪問しないと情報が見られません。 そこで使ってみたいのがRSS Boxです。RSSフィードに対応していないサイトをフィード化するソフトウェアです。 RSS Boxの使い方 これだけのサービスがフィード化に対応しています。 Twitterの変換例。 こちらはInstagram。 RSS Boxが対応しているのはTwitter/YouTube/Google+/Vimeo/Facebookページ/Instagram/Periscope/SoundCloud/Mixcloud/Twitch/Speedrun/Ustream/Dailymo

地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。 今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せやすくなっています。 BootLeafの使い方 地図が右側に、表示している情報が左側に一覧になっています。 メイン画面 左のリストから選ぶと該当するデータがハイライトします。 データ選択 さらに詳細なデータはモーダルで表示されます。 モーダル表示 データは検索でインクリメンタルに絞り込めます。 検索 ラインデータの表示もサポートされています。 ラインデータ表示 データはチェックボックスで表示/非表示が切り替えられます。 データの追加表示 BootLeafを使えば地図と独自のデ

Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログやソーシャルメディア、バイラルメディアなどここ数年でテキストコンテンツは爆発的に増えています。しかし私たちの時間は1日24時間で変わりません。となると処理しきれない情報ばかり増えてしまいます。 そこでテキストを解析し、そこから大事な部分だけを抽出してくれるような技術に注目が集まります。Shucaは日本語に対応したサマライザーです。 Shucaの使い方 原文です。 実際にはshucaにかける前に分かち書きや日本語の構文解析を行ってくれるJUMANやKNPを実行する必要があります。 そうするとこんな感じでサマライズできます。 100文字などと指定もできます。 150文字で抽出した例。 Shucaは原文の中から重要と思われる部分を抽出し、指定した文字数で結果を返してくれます。今後さ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスの種類によってはユーザにコンテンツを作成してもらうタイプのものがあります。最近ではMarkdown記法で書かせることが多いようですが、それも記法に慣れた人向けでしょう。初心者はHTMLも分からないものです。 そんな中使えるのはWYSIWYGなエディタです。HTMLをインラインで修正できるSubstanceはとても便利そうです。 Substanceの使い方 Substanceを適用しているページです。普通のWebページのように見えますが編集できます。 選択して見出しにしました。 太字にすることもできます。 リンクを追加する場合。 メニューを使って文字の種類を変更できます。 Substanceの特徴としてはHTMLやXMLのインポートができること、サーバ/クライアントサイ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AndroidのUIトレンドといえばマテリアルデザインです。アプリはもちろんのこと、そのアプリのプロジェクトページもマテリアルデザインにしているサイトも多いです。そうすることで全体の統一感が出るでしょう。 そこで勉強会やセミナーなどで使うスライドはDroidKaigi color keynoteを使って作ってみましょう。マテリアルデザインのKeynoteテンプレートです。 DroidKaigi color keynoteの使い方 DroidKaigi color keynoteを開いてみます。DroidKaigiで使われたとあってAndroidカラーです。 多くのマスターが登録されています。 例えばセクションを切り替えるのに使えそうなデザインです。 DroidKaigi color

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

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

CSSフレームワークを使うと見た目が整ったWebサイトを素早く構築できます。ただ、あまり多機能なフレームワークを選ぶとカスタマイズがしづらくなり、フレームワークの雰囲気に引きずられてしまいます。 素早さと自由さのバランスが大事なのですが、今回紹介するOpen Styleは割とシンプルで、仰々しい機能が多くないのが特徴と言えるかも知れません。 Open Styleの使い方 今回はスクリーンショット多めで紹介します。 背景色。基本はオレンジ、緑、青、黒の4色です。ここはカスタマイズできるでしょう。 テキストカラーとフォントサイズ。 グリッド。7分割というのが特徴かも。 間を空けたり寄せることができます。 テキストの配置も自由です。 ボタン。 フォーム。こちらは最低限。 カード型表示。 背景に画像を当てる表示。パララックスエフェクトにも対応しています。 カバー表示。動画も使えます。 フラッシュ。

ブログと言えばWordPressやMovableTypeといったオープンソース・ソフトウェアかはてなブログやLivedoorブログと言ったASPが選択肢になるでしょう。しかし最近ではOctoPressやJekyllといった静的サイトジェネレータを使うケースもよくあります。 今回紹介するHubPressも静的ブログジェネレータですが、サーバサイドの仕組みがなくともWeb上で記事の更新ができるのが特徴です。 HubPressの使い方 こちらはデモです。 ちゃんと個別ページも用意されています。 さて、ではどうやってWeb上で記事を更新できるのかと言うと、タネはGitHubにありました。そちらがこの動画です。 https://www.youtube.com/watch?v=7gP3i4tHlRM GitHubのAPIを使ってコンテンツを飛ばすことでGitHub Pageを更新しています。これはなか

システム開発を行っているときにダミーのデータが欲しくなることは多々あります。そんな時に本番データをコピーして使うのは大きな問題につながる可能性があるので決してしてはいけません。電話番号やメールアドレスなどを置き換える作業が逆に手間になる場合もあります。 そこで使ってみたいのがダミーデータのジェネレータです。今回は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サイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って

テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する

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