Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
VimMan - Vimを習得できるゲーム
開発者であればVimの操作を一度は習得しようとするのではないでしょうか（またはEmacs）。しかし、独特なキーバインドにどうしても慣れず、サーバでの作業が非効率的なままという人も多いはずです。 そんな方はゲーム形式でVimの操作を学べるVimManを使ってみましょう。 VimManの使い方 まずはキャレットの移動を学びます。 次に終了の方法です。 レベル3になるとテキストの入力、追加などを学びます。そうやって徐々にレベルアップしていくことで、あなたもVim男に成長できるという訳です。これから使い方を習得したい方、さらに使いこなしたい方はVimManで学んでみましょう。 VimManはGo製のオープンソース・ソフトウェア（MIT License）です。 ozankasikci/vim-man: A terminal based game that teaches you how to use
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる MOONGIFT
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。
ProtoGraphQL - GraphQLをビジュアル的に設計
GraphQLはRESTful APIの代替になりえる仕組みです。データ取得に対して自由度が高く、入力と出力両方に対して型指定できるのも良いです。多くはフレームワークと組み合わせて使えますが、自分で一から設計する場合もあるでしょう。 そんな時に使ってみたいのがProtoGraphQLです。GraphQLのスキーマをビジュアル設計できます。 ProtoGraphQLの使い方 メイン画面です。 テーブルを設計します。 その設計を使うためのコードとGraphQLスキーマ、SQLが生成されます。 モデルのビジュアル化もできます。 ProtoGraphQLはクエリ（取得）側の設計が可能で、ミューテーション（更新など）はできないようです。とは言え、型などをビジュアルで設計したり、リレーションも指定できるのは便利です。それこそデータベース設計と同時にできそうです。 ProtoGraphQLはJavaSc
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
dry - ターミナル上で動くDocker管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerは便利なシステムで一旦慣れてしまうと何でもコンテナとして管理したくなります。その結果、コンテナが乱立したり、イメージの管理も煩雑になっていきます。そうすると欲しくなるのが管理UIになります。 GUIでもいくつかありますが、手軽に運用できるのはターミナル上で動くものになるでしょう。今回はその一つ、dryを紹介します。 dryの使い方 一覧で現在動いているコンテナが確認できます。 アクティブでないものも含めた一覧です。 詳細を見たり、ログを確認する、コンテナを再起動や終了させるといった操作もできます。 ログです。 プロセスやメモリの状態。 dryはデフォルトのDockerコマンドで収集できる情報を扱いますが、それでも操作がキーボードで選択していくだけなのでとても楽になります
Repo Split - GitHub/Gitlab上でソースコードを読みやすくするChrome機能拡張 MOONGIFT
GitHubやGitlabのリポジトリはWeb上でも読めて便利ですが、いちいちディレクトリを辿る度に画面遷移するのは面倒に感じるかも知れません。もっとさくさく読みたくて、結局ローカルにcloneするのではないでしょうか。 そこで使ってみたいのがRepo Splitです。GitHub/Gitlabのリポジトリをもっと読みやすくするChrome機能拡張です。 Repo Splitの使い方 実行したところです。見た目がまるで変わります。自動でこうなるわけではないので安心してください。 ファイルを選択すればコンテンツが表示されます。 ディレクトリはツリービューで展開されます。 複数ファイル開くこともできます。 Repo SplitはGitHub/Gitlab上でソースコードをどんどん読んでいくために作られたUIとなっています。スプリットビューなどとても便利です。Web上でソースコードを読む機会が多
Gitea - Go製のGitリポジトリ管理サーバ
Gitリポジトリは分散型ではありますが、一つ信頼できるサーバがある方が便利です。そこでGitHubやBitBucketなどが使われるわけですが、企業によってはセキュリティ上の理由で使えないこともあるでしょう。 そんな方に使ってみて欲しいのがGiteaです。日本語化も行われているGitサーバです。 Giteaの使い方 トップページです。Goで書かれているのでサーバのOSを選ばず実行できるのが特徴です。 登録しました。個人のリポジトリはもちろん、組織にも対応しています。 新しいリポジトリを作りました。この辺りはGitHubに似ていますね。 ちゃんと日本語化されています。 自分に割り当てられている課題があれば、ここで一覧表示されます。 プルリクエストです。 履歴です。 GiteaはWikiの機能があったりと、基本的にはGitHubと同じような機能が並んでいます。さらに課題をプロジェクトを横断して
Retro Board - 簡単に使えるシンプルなカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました カンバンは今やプロジェクト管理の基本機能にさえなりつつあります。細かいステータスはともかく、開発しているのか、テストなのかといった状態が一目で分かるのは良いことです。 そんなカンバン機能だけを提供するのがRetro Boardです。とてもシンプルなカンバン機能を提供します。 Retro Boardの使い方 名前を入力して中に入ります。 こんな感じにタスクを作成できます。 一覧で見ることもできます。 タスクは複数作成できます。 他のユーザはいいねすることができます。 Retro Boardはごく基本的なカンバン機能しかありません。プロジェクト管理は他にあった方が良いかもしれません。そして作業内容を決めたら、Retro Boardにタスクを書き出していってステータスを管理するのが良さそ
handsontable - グリッド表示にExcel並の機能を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムと言えばグリッド、テーブルが求められます。最初はHTMLで簡単に作成するのですが、すぐに追加の機能が求められます。ソート、フィルタリング、ヘッダーや左側の列を固定して欲しいと言った具合です。 そんな厄介な要望をスクラッチで対応していたのではとても時間がかかってしまいます。ぜひhandsontableを試してみましょう。 handsontableの使い方 handsontableには多くの機能が備わっています。まずはページネーション。 パスワードを非表示にもできます。 新しい行を作成する際にplaceholderを表示。 フォーカスがあたっているセルをハイライト。 セルを細かくカスタマイズ。画像の埋め込みもできます。 ソートももちろんできます。 入力バリデーション。 ヘッ
Github Visualizer - GitHubリポジトリを可視化
GitHubはそれまでのリポジトリサービスと異なり、ソーシャルに特に注力しています。それはユーザはもちろん、編集したコンテンツでも同様です。 今回はそんなGitHubリポジトリのファイル構成をビジュアル化するGithub Visualizerを紹介します。 Github Visualizerの使い方 これはAtomのリポジトリです。 ファイル名がわかります。 パンしたところです。美しいですね。 さらに巨大な、Rubyのリポジトリを可視化します。 こちらはRails。これまた綺麗ですね。 Github VisualizerではCanvasを使ってリポジトリのファイル構成を可視化しています。ファイルの種類によって色が変わるようになっています。ファイルの多いリポジトリはそれだけ模様が複雑で綺麗に仕上がります。ぜひ自分のソフトウェアで試してみてください。 Github VisualizerはHTM
Gitlet - Gitを理解するために作られたJavaScriptによるGit実装
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 何かの技術を理解しようと思った時、あなたならどうしますか。入門書を読んだり、仕様書を読んだりする人もいるでしょう。しかしそれは技術の習得はできても、本質は理解できないかも知れません。 Gitのディレクトリ構造がなぜこうなっているのか、どういった仕組みで動いているのか…そんな疑問からはじまったのがGitletです。JavaScriptによるGit実装となっています。 Gitletの使い方 Gitletのインストールはnpmでできます。 npm install -g gitlet では実際に使ってみましょう。基本的な使い方はgitコマンドと同じです。まず初期化します。 $ mkdir a $ cd a $ gitlet init $ ls -al total 0 drwxr-xr-x
rails-dev-box - VagrantでRails開発環境を作るならこれ！ MOONGIFT
最近は開発環境を個々人のコンピュータ上には構築せず、仮想環境を使うようになってきました。そうすることでローカルコンピュータの環境に左右されず、複数プロジェクトによってライブラリバージョンがコンフリクトすることもありません。もちろん多少遅くなりますが、十分許容範囲になっています。 ということでこれからRailsのプロジェクトをはじめるのであればベースに使ってみたいのがrails-dev-boxです。Vagrant向けにRuby on Rails環境を整えてくれます。 rails-dev-boxの使い方 Vagrantを使いますので、Vagrant自体はもちろんVirtualBoxのインストールが必要です。 終わったらGitリポジトリをクローンします。 $ git clone https://github.com/rails/rails-dev-box.git 後はVagrantを起動するだけ
Handsontable - WebでExcel並のテーブル機能を実現
Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。 そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。 Handsontableの使い方 Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。 HandsontableはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Handsontable - jQuery gri
Rubyのコードをもっと美しく書くために使いたい·rubocop MOONGIFT
rubocopはRubyのコード可読性をチェックするソフトウェアです。 プログラマーを何年やっていても、なかなか奇麗なコードに辿り着くのは困難です。ちょっと道を誤るとものすごいコードになっている場合もあります。そんな時には機械的に評価してくれるrubocopを使ってみましょう。 実行しました。色々な情報が出てきます。 Cは注意、Wはワーニングでしょうか。 ヘルプです。Emacsとの連携もできます。 rubocopでは内部での幾つかのルールに従って指定ディレクトリ以下のRubyコードについて評価を行ってくれます。筆者の場合、一行あたりの文字数が多くて引っかかるケースが多いようです。そうした点に注意して書くようにすれば、より可読性の高い美しいコードが書けるようになりそうです。 rubocopはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 美
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
