plant_erd - ER図をPlantUML用にエクスポート
UMLをテキストベースで記述できるPlantUMLを使っている方は多いのではないでしょうか。クラス図を流用する形でER図も描くことができます。そして、データベースはすでにあり、そこからPlantUML用に出力できればいいのに、と考えている方もまた多いでしょう。 そんな方にお勧めなのがplant_erdです。各種データベースに対応したER図エクスポートソフトウェアです。 plant_erdの使い方 出力した内容をPlantUMLで表示しています。 plant_erdはSQLite3、MySQLそしてPostgreSQLに対応しています。各データベースの内容をそのままPlantUML向けに出力が可能です。特定のテーブルだけを出力対象にもできます。リレーションも再現され、データベース構造をドキュメントに書き出すのにぴったりです。 plant_erdはGo製のオープンソース・ソフトウェア（MIT
GraphQL Visual Editor - ビジュアルでGraphQLを設計
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GraphQLはRESTfulに代わる、または補助する存在として注目を集めています。しかし、まだ出始めの技術だけに最適な設計手法が確立されていません。スキーマを作る作業する手作業、またはフレームワークを導入していることでしょう。 今回紹介するGraphQL Visual Editorはそんなスキーマの作成をWebブラウザ上で行い、さらにバックエンドまで作れるソフトウェアです。 GraphQL Visual Editorの使い方 設計画面です。ノードが並んでおり、それらを繋ぐことでスキーマを設計します。 追加、削除、変更できます。 例えばこれはGitHubのGraphQLのスキーマ。とても細かく定義されています。 スキーマを確認できます。 GraphQL Visual Editorは
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT
HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方 よくあるクレジットカードの入力フォームです。 桁数の制御はもちろん、カードの種別も出るようになっています。 電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。 日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。 指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。 郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり
WebShell - WebサイトをMac OSXアプリ化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンではWebサイトよりもアプリの方が継続的にアクセス、利用してくれる傾向があります。ブラウザを開いて検索するよりも、アプリを開くだけのワンアクションが楽ということです。 同じようにデスクトップでもWebブラウザからではなくアプリにした方がアクセスしやすくなるでしょう。それを実現するのがWebShellです。 WebShellの使い方 WebShellはXcodeのプロジェクトを開いてURLを変更するだけです。デフォルトではGoogleになっています。 例えばwri.peにするとこんな感じ。そのままエディタとして立ち上げておけますね。 WebShellはWebサイトをアプリ風にラッピングしてくれます。セキュリティが切り分けられますし、普段使っているブラウザを再起動しても影
noti - コマンドが終了したらデスクトップ通知
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CLIで処理を実行して、それが重たいのでしばらく他の作業をしていると、いつの間にか終わっていたという経験は誰もがあるのではないでしょうか。ちょっと時間を損した気分にさせられますよね。 そこで使いたいのがnotiです。コマンドが終了した時にデスクトップ通知を出してくれるソフトウェアです。 notiの使い方 例えばこんな感じにコマンドを打ちます。 $ noti -t "Reply to Pedro" gsleep 3s そうすると3秒後にデスクトップ通知が出ます。 日本語のメッセージも出せます。 $ noti -t "homebrew" -m "up to date" brew upgrade --all メッセージも含められます。 notiとメッセージを頭につけて、その後に時間のかか
jQuery DrawSVG - SVGをアニメーションしながら描画
画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。 そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。 jQuery DrawSVGの使い方 jQuery DrawSVGのデモです。SVG画像がアニメーションしながら描かれているのが分かります。 画像と組み合わせるとこんなこともできます。 jQuery DrawSVGを使うとSVGに書かれている内容をアニメーションしながら描写してくれます。アニメーションGIFのようですが、よりスムーズで綺麗に描かれます。SVGを画像とはまた違った使い方で楽しめるのではないでしょうか。 jQuery DrawSVGはjQuery/JavaScript製
Adi.js - サイト運営者向け。広告ブロック検知ライブラリ MOONGIFT
ブログやオンラインメディア、Webサービスを運営している人にとって無視できない存在なのが広告ブロックではないでしょうか。昔からある技術ですが、iOS9での対応によって一気に注目を浴びるようになりました。 一般ユーザの視点からすれば表示速度向上やネットワーク帯域の削減に寄与するとあって歓迎の動きですが、サイト運営者は反対している人が多いでしょう。そこでサイト運営者が使いたいライブラリがAdi.jsです。 Adi.jsの使い方 Adi.jsは他にも幾つかあるアドブロック検知ライブラリです。アドブロックを使っている場合は次のように表示されます。 閉じた時のコールバックが受け取れるようになっているので、その場合はこんな嫌そうなアニメーションGIFが流れます。 アドブロックを停止している場合はいいねって感じのアニメーションGIF。 Adi.jsはJavaScriptで動きますので、JavaScrip
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
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を使ってデスクトップアプリを作ることがで
Kickstart - Bootstrap/Foundation対抗のCSSフレームワーク MOONGIFT
今ではスタイルシートをゼロから組むことは減ってきているかも知れません。レスポンシブな対応であったり、全体的な見た目の統一感を考えるとフレームワークをベースにした方が楽だからです。とはいえ、大型なフレームワークを使うと束縛が強くなります。 BootstrapやFoundationが有名ですが、今回はそれらに対抗していこうとしているKickstartを紹介します。軽量なスタイルシートフレームワークです。 Kickstartの使い方 スクリーンショット多めで紹介します。アラート表示。 ボタン。 コンテナ。 フォーム。 ラベル。 モーダル。 ナビゲーション。 通知（右上）。 テーブル。 タブ。 ツールチップ。 タイポグラフィ。 プロフィール表示のデモ。 Kickstartはスタイルシートのサイズが80KBで、Bootstrap（117KB）/Foundation（148KB）よりも軽量です。また、
Mattermost - Go製のSlack代替サーバ MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackが急成長しています。多くの企業でSlackが使われており、遠隔地（または社内であっても）のコミュニケーションに役立てられています。しかし企業によってはセキュリティ上の理由などで導入できないこともあります。 そんな企業が使ってみたいのはSlackクローンになるでしょう。今回はDockerを使って簡単に導入できるMattermostを紹介します。 Mattermostの使い方 既にDockerが入っているならば、以下のコマンドを実行するだけです。 docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium 後はサーバにアクセスするだけですが、サブドメインを使うのでhostsな
Fongshen Editor – ツールバーで入力が簡単なMarkdownエディタ
Markdownは簡単な記法を覚えるだけですぐに書けるのが利点ですが、それでもやはり入力補助ツールがあった方が便利に感じるでしょう。特に非エンジニアの方であればそう思うはずです。 そこで今回はFongshen Editorを紹介します。テキストエリア上部にツールバーのついたMarkdownエディタです。 Fongshen Editorの使い方 Fongshen Editorは左側がエディタ、右側にプレビューが表示されます。 リアルタイムプレビューなので、入力するとすぐに反映されます。 コードを書いたり、基本的なMarkdown記法にはすべて対応しています。 Fongshen Editorはツールバーがあるので記法を忘れてしまった場合でも困りません。リストは自動で次の項目が追加されるなど、さくさくと入力が進められるようになっています。 Fongshen EditorはJavaScript製、
odpdown - MarkdownファイルをOpenDocumentのスライドファイルに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownでスライドを作る人が数多くいます。テキスト中心の方が内容に集中できるので、より分かりやすいスライドを作ることができます。また、そのためのHTMLプレゼンテーションを作成するソフトウェアも多いです。 odpdownもMarkdownファイルをプレゼンテーションファイルに変換するソフトウェアなのですが、ちょっと変わっています。なぜなら生成するファイルがOpenDocumentフォーマットなのです。 odpdownの使い方 インストールはGitHubのリポジトリをクローン後、関連ライブラリのインストールなどを実行します。 $ git clone git@github.com:thorstenb/odpdown.git $ cd odpdown $ pip install
watermark.js - JavaScriptで画像に透かし MOONGIFT
最近は画像をパクる輩がたくさんいて、著作権が問題になっています。そのため企業では画像に透かしを入れて、そのまま使っても誰の画像であるかすぐに分かるようにしています。 わざわざ画像を変換するほどではないけれど、簡単に持ち出せないように少し工夫はしたい、そう思う方に使ってみて欲しいのがwatermark.jsです。クライアントサイドのJavaScriptで透かしを入れます。 watermark.jsの使い方 watermark.jsは2つの画像またはテキストを指定して画像を生成するライブラリです。例えばこんな感じです。 透明度の設定もできます。 テキスト指定も可能です。 watermark.jsはimgタグのsrcに対してデータをそのまま適用します。そのため元々の画像のURLが分かりづらいのが特徴です。watermark.jsを使えばサーバサイドの用意なしに画像へ透かしを追加し、ユーザによって
samurai-native – HTMLでiOSアプリの画面を作る
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました React NativeはTitaniumのようにJavaScriptでネイティブアプリのUIを作ります。Cordova/PhoneGapはHTML5/JavaScriptを使ってwebView上にUIを作ります。JavaScriptでスマートフォンアプリを作る技術は様々に存在します。 samurai-nativeもその一つになります。技術的にはCordova/PhoneGapに近いものがあると思いますが、ネイティブのUIコンポーネントが使える点が特徴です。 samurai-nativeの使い方 デモアプリのUIです。動きはぬるぬるとしています。 まるでネイティブUIですが、一部はWebのようです。 Canvasを使っているのか、アニメーションもスムーズです。 例えばHTMLですが
ios-simulator-app-installer – iOSシミュレータ向けアプリインストーラー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iOSアプリを開発していて、それをシミュレータで試す場合にはどのようにするでしょうか。スタンダードな方法としてはXcodeでプロジェクトをビルドすることですが、みんながインストールしていなければいけません。 マシンパワーの少ないコンピュータでビルドするのも大変ですし、各シミュレータデバイス向けにコンパイルし直すのも大変です。そこで使ってみたいのがios-simulator-app-installerです。 ios-simulator-app-installerの使い方 ios-simulator-app-installerのコマンドを使うにはXcode 8.36.3がインストールされている必要があります。 brew tap stepanhruda/tap brew install
Locat·Mac OSXのファイルのオープン/保存を便利に！ MOONGIFT
これはMac OSXユーザであれば必携のツールになるのではないでしょうか。Mac OSXでファイルの保存先、開く先を変更する際にFinder側にあるファイルをドロップするという方法があります。これをよく使う人は多いでしょう。 しかしドロップすると保存ファイル名まで書き換わってしまって逆に面倒なこともあります。そこで使ってみたいのがLocatです。 Locatの使い方 LocatはSIMBLプラグインになっています。EasySIMBLなどを使ってインストールできます。 後はFinder側でOption + Returnを押すと選択している項目をOpen/Saveダイアログに反映します。Shift + Returnはファイル名は反映せず、場所だけ移動します。ファイルをドロップせず、キーボードショートカットだけでできるのが便利です。 実際のデモ動画はこちら。 日々よく行う操作を手軽にしてくれると
termui – ターミナル向けダッシュボード
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はWebブラウザ向けにリッチなダッシュボードを提供するサービス、デザインフレームワークが増えています。しかしサーバ管理者にとってはWebブラウザを立ち上げるのは面倒と思うかも知れません。結局、作業はターミナルで行うからです。 そこで使ってみたいのがtermuiです。なんとターミナル上でリッチなダッシュボードが展開されます。 termuiの使い方 例えばデモスクリプトを実行すると、こんな表示になります。 これがCUIなのかと驚きますよね。もちろん表示して終わりではなくリアルタイムで再描画されます。 さらにレスポンシブ（！）対応にもなります。 グラフはプログレスバー、線グラフ、棒グラフ、スパークラインなどがあり、さらに文字を出したりリストを作ることもできます。テーマ機能もあり、表示
Twine – ストーリーを整理するノートアプリ
プレゼンテーションは単純にスライドを並べてたんたんと説明していけば良いわけではありません。全体を通して一つのストーリーが必要です。ストーリーが一貫して提供されてこそ、聞き手は納得し、理解を深めることができます。 そんな納得感あるストーリーを作るのに適したソフトウェアがTwineです。Wikiっぽさのある面白いソフトウェアです。 Twineの使い方 Twineは元々Windows、Mac OSX用のソフトウェアでしたが、2.0からWebベースになったようです。プレゼンテーションのスライドや小説、マインドマップの代わりに使うのも良さそうです。 TwineはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Twine / An open-source tool for telling interactive, nonlinear stories tweeco
highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT
ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
