uiflow - Markdown風の記法でUI Flowを記述
UI FlowはBasecamp（旧37 signals）が考えた画面遷移手法で、ユーザの見るもの/することという点に主眼を置いて描かれるのが特徴です。ムダを省いた作りなので、メンテナンスしやすく、かつ分かりやすいという利点があります。 とは言え、画面遷移図は徐々にメンテナンスされていかなくなるものです。原因としては、バイナリファイルなので編集しづらかったり、移動や結合、分割に工数がかかってしまうということがあります。そこで使ってみたいのがuiflowです。 uiflowの使い方 uiflowの例として、例えば以下のようなテキストファイルを作成します。Markdownに似せた記法となっています。 [最初に] ユーザーが見るものを書きます。 -- ユーザーがする行動を書きます。 [次に] ユーザーが見るもの -- ユーザーがすること１ ==> その結果１ ユーザーがすること２ ==> その結
HTML要素の簡易レイアウト調査なら「XRAY」ブックマークレットが超軽い
HTMLの要素調査と言えば、通常はブラウザ付属の開発者ツールなどで行います。 Chromeだとデベロッパーツール、Firefoxだと内蔵ツールやFirebugなどで行えば、要素に関する詳しい情報を取得することができます。 ただ、幅や高さなどのちょっとした情報を知りたいだけなのに、開発者ツールを起動するのは、重たくて少し億劫です。 そういった時には、「XRAY」が、簡単なレイアウト情報なら一瞬で情報が取得できて最近重宝しているので紹介です。 photo by Susana Fernandez XRAYとは XRAYは、HTML要素の簡易調査を行えるブックマークレットです。 ブラウザの開発者ツールと違って、JavaScriptで、瞬時に以下のような調査画面を開くことができます。 環境によっては、開発ツールの場合、起動に数秒から10秒かかることもありますが、このブックマークレットは、0.1秒もか
asciinema-player - 自分のサーバ内でasciinemaを動かす
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアのセットアップ記事などで画面のスクリーンキャストは効果的です。GUIの場合は動画ですが、CUIの場合はテキストしか扱わないこともあって、文字をそのまま記録するのが便利です。 有名なサービスとしてasciinemaが知られていますが、asciinemaにコンテンツをアップロードしないで自分のサーバで使えるようにするのがasciinema-playerです。 asciinema-playerの使い方 まず入力とその結果を記録したファイルが必要です。以下のようにコマンドを入力することで、コンテンツはアップロードされずにJSONファイルとして保存されます。 asciinema rec demo.json あとはこのファイルを指定してWebページを開きます。 あとは再生ボタンを押
Github Visualizer - GitHubリポジトリを可視化
GitHubはそれまでのリポジトリサービスと異なり、ソーシャルに特に注力しています。それはユーザはもちろん、編集したコンテンツでも同様です。 今回はそんなGitHubリポジトリのファイル構成をビジュアル化するGithub Visualizerを紹介します。 Github Visualizerの使い方 これはAtomのリポジトリです。 ファイル名がわかります。 パンしたところです。美しいですね。 さらに巨大な、Rubyのリポジトリを可視化します。 こちらはRails。これまた綺麗ですね。 Github VisualizerではCanvasを使ってリポジトリのファイル構成を可視化しています。ファイルの種類によって色が変わるようになっています。ファイルの多いリポジトリはそれだけ模様が複雑で綺麗に仕上がります。ぜひ自分のソフトウェアで試してみてください。 Github VisualizerはHTM
画像に簡単にぼかしをかけられるプラグイン「Background Blur」 | ライフハッカー・ジャパン
「Background Blur」は画像に簡単にぼかしをかけられるプラグインです。jQueryのプラグインとして提供されています。IE6など古いブラウザやiOSのSafari、Androidのブラウザなどモバイルにも対応していることが特徴。 以下に使ってみた様子を載せておきます。まず「Background Blur」へアクセスしましょう。導入方法はプラグインをダウンロードしてCSSとぼかしの設定をするだけ。 サンプルが提示されていますが、このように画像に対してぼかしをリアルタイムにかけることができます。IE6など古いブラウザはぼかすときのアニメーションが効きませんが、ぼかし自体には問題ない模様。スマートフォンのブラウザにも対応しているので導入しやすいですね。画像をぼかしたいときにぜひご活用ください。 Background Blur （カメきち）
Draft.js - テキストエディタ開発用のReactコンポーネント MOONGIFT
Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。 Draft.jsの使い方 Draft.jsのデモです。文字を選択して色をつけられます。 背景色を変えることもできます。 改行すると、それに合わせてテキストエリアの大きさも変化します。 リンクを追加。 機能を追加すればWYSIWYGエディタとして使えます。 Twitter風に。@や#に対して色がつきます。 数式を埋め込む機能もあります。 編集はテキストエリアで行います。 Reactなので、変更はリアルタイムに反映されます。 Draf
Bookiza - タブレットで読める電子絵本プラットフォーム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近は小さい子でもタブレットを使いこなすようになっています。タブレット一台あれば待ち時間などで時間を潰すこともでき、子供に見せているという親もいるでしょう（批判もありますが）。そうなると電子書籍のようなものも今の子供たちにとってはあって当たり前のものになっていると言えます。 今回紹介するBookizaは電子絵本を作るためのソフトウェアです。WebベースなのでタブレットやPCなどで絵本が楽しめます。 Bookizaの使い方 トップページ。まずは絵本の一覧があります。 絵本の詳細です。簡単な作品紹介であったり、対応しているデバイスが確認できます。 絵本を開きました。 見開きで表示されます。 ページめくりは実際の絵本風にカールします。 ショートカットキーも実装されています。 Bookiz
diff-so-fancy - 差分をより見やすく加工
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマであればDiffを使うことがしょっちゅうあるはずです。そのため、Diffの使い勝手の良さ/悪さが開発効率に直結しているとも言えます。git diffなど、標準のままに使っていないでしょうか。 git diffは色分けされて見やすくなっていますが、さらに整形して可読性を上げてくれるのがdiff-so-fancyです。 diff-so-fancyの使い方 diff-so-fancyのインストールはnpmで行います。 npm install -g diff-so-fancy 実際に使い方は次のようになります。–colorはデフォルトになっている環境もあるでしょう。 git diff --color | diff-so-fancy 標準のdiff。色分けされているので見づらいわけ
timeTrack - CLIの時間管理 MOONGIFT
自分の作業時間をトラッキングすると、様々な実情が見えてきます。かなり時間をかけている割に生産性が低かったり、その逆もあります。ムダに過ごしている時間も思いの外多く、びくりするかも知れません。 しかしすべては計測してみてから分かることです。手軽に使えるツールとしてtimeTrackを紹介します。 timeTrackの使い方 timeTrackはCLIで使うツールとなっています。まずプロジェクト（タスク）を一覧します。 $ tt -l default 次に作業するプロジェクトに切り替えます。 $ tt -s default Switched to project default 後は tt コマンドを打つだけで計測が開始し、もう一度打つと終了します。 $ tt OK. lets do awesome things on "default" The reason most people neve
CLog.js - コンソールログをカラフルに MOONGIFT
Google ChromeのDevToolsではコンソールに文字を出力する際にinfo/log/errorなどで指定できます。それによって文字の色が変わるのですが、情報の意味も指定されてしまうのが難点です（特にエラー）。 単に文字色を変えるだけであればCLog.jsを使ってみましょう。コンソールに出る文字色が変わるとぐっと見やすくなるはずです。 CLog.jsの使い方 インストールはnpmまたはBowerが使えます。 npm install clog_js bower install clog 次にCLogオブジェクトを作ります。 var options = { group: false, colors: { log: "#31f095", home: "#e86024", error: "#e22f2f", network: "#08bce9", } } var clog = new C
pass-web - CLIのパスワード管理passのWebフロントエンド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました パスワード管理をどう行っていますか。まさか開発者でパスワードを使い回している人はいないでしょう。もしそうなら、パスワードをすべて記憶することなど人間には不可能であり、パスワードマネージャを導入すべきです。 今回はCLIで使えるパスワード管理であるpassのWeb版、pass-webを紹介します。こちらはWebブラウザで手軽に使えます。 pass-webの使い方 pass-webの画面です。パスワードを入力します。 カテゴリごとにフォルダに分かれています。 フォルダを選ぶとアイテムが並びます。 さらにアイテムを選ぶとパスワードが出ます。 パスワードは右側のクリップボードアイコンをクリックすると自動的にコピーされます。パスワードは追加はされませんので注意してください。あくまでもpass
MJML - レスポンシブなHTMLメール用テンプレート
今やレスポンシブデザインはWebだけでなく、メールにおいても大事な存在になっています。メールもデスクトップはもちろん、スマートフォンやタブレットで閲覧することもあるでしょう。 そんなメール用のレスポンシブデザインを実現してくれるフレームワークがMJMLです。専用の記法で作るのが特徴です。 MJMLの使い方 MJMLのシンプルなデモです。 モバイルで見た場合のデザインに変更しました。 こんな複雑なデザインも実現できます。 メニューをつけたデザイン。 モバイルデザイン。 MJMLを使うことで、最適なレスポンシブデザインが容易に実現できるようになります。メールはサーバ側のHTMLと異なり、JavaScriptを実行したり、データの出し分けもできません。MJMLを使えばメールの反応率も大きく変わってくることでしょう。 MJMLはnode/JavaScript製のオープンソース・ソフトウェア（MIT
GLSlideshow.js·WebGLを使ったスライドショー MOONGIFT
Web上で写真やスライドを切り替えるスライドショーは数多くあります。その多くはCSS3を使ったアニメーションで切り替えるものが多いかと思います。しかしもっと高度なエフェクトを実装したいと思ったことはないでしょうか。 今回はWebGLを使ったスライドショーアプリケーション、GLSlideshow.jsを紹介します。写真のスライドショーなどにぴったりです。 GLSlideshow.jsの使い方 GLSlideshow.jsのデモです。 実際にスライドが切り替わるところです。 こんなズームするエフェクトも指定できます。 WebGLを使いこなすことで高度なエフェクトが実現できるようになります。これもまたHTML5を使いこなす上で大事な要素でしょう。 GLSlideshow.jsはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。
Vorpal - node.js用のCLIツール開発用フレームワーク MOONGIFT
最近、nodeでCLIツールを書くことも増えてきました。単純に実行するだけなら簡単ですが、オプションをつけたり、ヘルプやパイプでの実行などCLIに欲しい機能を考えると色々面倒になります。 そこで使ってみたいのがCLIツールを作るためのフレームワークです。node向けにVorpalを紹介します。 Vorpalの使い方 まずはコマンドラインオプションをつける場合です。これだけで-b/-tオプションが使えるようになります。 const vorpal = require('vorpal')(); vorpal .command('say [words...]') .option('-b, --backwards') .option('-t, --twice') .action(function (args, callback) { let str = args.words.join(' '); s
React-designer - React製のベクターグラフィックスエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。 今回はその一つとしてReact-designerを紹介します。Reactで作られたベクターグラフィックスエディタです。 React-designerの使い方 デモ画面です。この四角いオブジェクトがそれぞれ編集できます。 プロパティがあり、色を変えたり、並び替えることもできます。 実際に操作しているところです。オブジェクトの追加も可能です。 React-designerはともすると移動の制御などの面倒くさい機能をReactを使うことでうまく実装
TableFilter - HTMLテーブルのフィルタリング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
Responsible.js - スマートフォン向けにフルサイズ表示をシミュレート MOONGIFT
レスポンシブWebデザインは訪れたブラウザのウィンドウ幅によって見せるコンテンツを切り替えます。そのため、PCのブラウザであっても画面幅を縮めればスマートフォン用の見栄えをチェックすることができます。 しかし時によってはスマートフォンであってもPCブラウザ向けの表示でブラウジングしたい時があるはずです。そんな時に使えるのがResponsible.jsです。 Responsible.jsの使い方 まずは最初の表示。スマートフォンに最適化されています。 Toggle Desktopをクリックすると、フルサイズのブラウザ向け表示に切り替わります。 別なボタンを押せば、いつでもスマートフォン向けの表示に戻せるようになっています。スマートフォン向けとして情報を大幅に削ってしまっている場合、こうした表示切り替えは便利かも知れません。 iPhoneでも類似の機能がありますが、こちらは画面の再読み込みが不
decaffeinate - CoffeeScriptをES6へ変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CoffeeScriptはJavaScriptでありがちな面倒くさい構文がシンプルになる便利な代替記法です。現在主流であるES5では使えない文法であるクラスであったり、テンプレートなどを先んじて使うこともできます。 しかしES6もnode上であれば十分に使えるようになってきています。そんな中、CoffeeScriptを使っていると古い文法のJavaScriptを生成するのは残念な感じです。そこで使ってみたいのがdecaffeinate、CoffeeScriptをES6に変換してくれるソフトウェアです。 decaffeinateの使い方 デモのコードです。クラスとテンプレートを使ってみました。 class ClassName @staticVar: 0 @staticFunc: ->
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンパクトなリアルタイムアプリを実現するJavaScriptフレームワーク「Feathers 2.0」がリリース
生徒が生み出した、ブラウザで動くJavaScript分散コンピューティング