Webサイトやスマートフォンアプリのモックデザインを作る際にはアテの文字を用意するのが一般的です。あああ、といったような適当な文字です。しかしあまり良い感じに仕上がらないこともあります。 そこで使ってみたいのがMockFlowFontです。文字ではなく、単なる棒線のフォントです。 MockFlowFontの使い方 実際のフォントです。間があるタイプとないタイプがあります。 このフォントを使ってデザインを起こした例です（GitHubより）。イメージがわくでしょうか。 MockFlowFontを使うと文字の主張が押さえられるようになり、デザイン全体のバランスが良くなります。英語のようにスペース区切りでつながる言語もあれば、日本語のように連続するものもあります。使いやすい方を選んでデザインに使ってください。 MockFlowFontはOpen Font Licenseのオープンソース・ソフトウェ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ChromeがFlashを切ったことで、Webブラウザで動くプログラミング言語といえばJavaScriptだけとなっています。そんな中にあって、JavaScriptの書きづらさにストレスを感じる人も多いことでしょう。 もしあなたがPython好きであればJaspyを試してみてはいかがでしょう。なんとJavaScriptで作られたPython VMになります。 Jaspyの使い方 例として、デバッガーを通じてWebブラウザとコンソールで通信できるものがあります。 スレッドに対応しており、スレッドごとに停止やkillができます。 Jaspyはコード自体はPython風に書けるようになっています。有名なところではBrythonやPyPy.jsと同じようなソフトウェアです。速度的には劣るよ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近人気のサーバレスアーキテクチャ。その一環を担うのが書いたコードを実行するだけの存在です。知られているのはAWSのLambdaでしょう。 開発時であったり、社内でも使えるLambdaっぽい環境が欲しいならばemulambdaを使ってみましょう。Python製のLambdaクローンです。 emulambdaの使い方 emulambdaのヘルプです。 $ emulambda --help usage: emulambda [-h] [-s] [-t TIMEOUT] [-v] lambdapath eventfile Python AWS Lambda Emulator. At present, AWS Lambda supports Python 2.7 only. positio

Webサイトやアプリを作る際に必須なのがアイコンです。最近はフラットUIやマテリアルデザインの影響で、とてもシンプルなものが多くなっていますが、やはりアイコンは作りたいものに合わせて選ぶのが良いでしょう。 今回はそんなアイコンを無償で公開しているCaptain Iconを紹介します。きっとぴったりくる時があるはずです。 Captain Iconの使い方 アイコンの一例です。整然としていないところに手作り感が感じられます。 ショッピングカートやカメラアイコンのなど多種多様です。 ソーシャル系アイコンも数多く揃っています。 フォーマットはEPS/PNG/PDF/SVG/Web Fontといった具合にほとんどのニーズはこれで満たせるのではないでしょうか。アイコンの種類も数多いので、ぜひチェックしてみてください。 Captain IconはCreative Commonsのオープンソース・ソフトウ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments

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

Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基本的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル

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

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

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

最近はプレゼンテーションのスライドもHTMLで作ることが増えてきました。余計なエフェクトや装飾を気にせず内容だけに集中できますし、コンテンツを公開すればWebクローラーフレンドリーです。 幾つかのツールがありますが、今回はTwitter社の開発したCDK（Courseware Development Kit）を紹介します。AsciiDoc記法で作るHTMLスライドツールです。 CDKの使い方 CDKのインストールはpipで行います。 pip install cdk そしてAsciiDocを引数に渡します。 cdk sample.asc そうするとHTMLファイルが生成されますので、それを開くだけです。 こんな感じに中央に大きな文字が特徴です。 日本語も使えます。コードはちょっとカードっぽく表示されます。 コマンドヘルプです。 スライド一覧。 アウトライン。 スライドジャンプも。 Ascii

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

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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのスクリーンショットを撮りたいというニーズは根強くあります。Webサービスで提供するところも多いですが、自社独自で柔軟にやりたかったり、LAN内でスクリーンショットを撮りたいと思うこともあるでしょう。 そんな時に使えそうなのがManetです。画面はなく、URLでアクセスするだけでスクリーンショットを保存してくれる面白いサービスです。 Manetの使い方 インストールはnpmで行います。 $ npm install -g manet そしてサーバを立ち上げます。 $ manet これで準備は完了で、8891番ポートで待ち受けます。 例えばこんな感じでアクセスします。 $ curl http://localhost:8891/?url=moongift.jp > moong

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

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

Bootstrapの良いところとして、十分に普及したこともあって色々な人たちがUIコンポーネントを作成しているというのがあります。標準で提供されるHTMLコンポーネントだけでなく、よりリッチな入力インタフェースが実現できます。 ということで今回はClockPickerの紹介です。カレンダー指定によって日付入力は分かりやすくなりましたが、ClockPickerによってさらに時間入力を分かりやすくできます。 ClockPickerの使い方 ClockPickerは日付同様に専用のフォーマットである時刻入力を数字を入力することなく簡単にできるようにします。細かな時間入力には向かないかも知れませんが、スケジュールなど5分単位の入力の場合は便利そうです。PCはもちろん、スマートフォンで活躍しそうです。コールバックなども備えていますのでシステムとの連携も容易です。 ClockPickerはHTML5/

q はCSV形式やTAB区切りのテキストファイルを入力として、コマンドラインでSQLに似たクエリを指定し実行することができます。また、標準入力を使った入力やパイプで接続して利用することができるソフトウェアです。 q の主な特徴 1) ZIP形式で圧縮したテキスト・ファイルも指定可能 コマンドラインオプション -z もしくは --gzipped を指定することで、ZIP形式ファイルを入力することができます。解凍せずにファイルを使用できるのは便利です。拡張子が .gz であれば、ZIP形式であると自動認識します。 -z, --gzipped Data is gzipped. Useful for reading from stdin. For files, .gz means automatic gunzipping 2) すべての文字エンコーディングをサポート 入力と出力の両方で、すべての文

Webサイトにはアイコンが付き物ですよね。しかしフラットUIが流行とあって、アイコンも派手なものではなく単色でシンプルなものが好まれるようになっています。例えばWeb Fontを使ったアイコンです。 Web Fontを使った場合、カラーリングやサイズの自由が大きいですが、向きを変えたりアニメーションさせたりするのは難しいでしょう。そこで使ってみたいのがMarkaです。 Markaの使い方 MarkaはJavaScriptを使って制御できるアイコンです。 var m = new Marka('#icon'); m.set('circle') .color('#FF6600') .size('50'); こんな感じでアイコンを指定します。四角いアイコンにする場合は、 var m = new Marka('#icon'); m.set('square') .color('#FF6600') .s