HTTP Responder - WebHookを使った開発を便利に MOONGIFT
WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー
git-heatmap - Gitリポジトリを解析して頻繁に更新されているファイルをリストアップ MOONGIFT
リファクタリングの際に一つ基準にできるのが更新頻度です。あまり頻繁に更新されているものはファイルや処理を分割できる可能性があります。そうすることで標準化していくことでバグが入り込むのを防げるようになります。 今回紹介するgit-heatmapはGitリポジトリを解析して、ファイルごとの更新回数を可視化します。 git-heatmapの使い方 git-heatmapはGitリポジトリでコマンドを実行するだけです。オプションとしてブランチを指定することもできます。 $ git-heatmap app/controllers/articles_controller.rb | ████████████████████████████████████████████████████████████ | 120 app/models/article.rb | █████████████████████
Livegrep - Webベースのソースコード専用検索システム
システムのソースコードを検索する場合、grepが多く使われます。「-」などの記号も多いのでGoogle検索がうまくいかなかったり、関連するライブラリ含めて検索したいこともあるでしょう。その結果、一見すると不便なgrepが使われます。 今回紹介するオープンソース・ソフトウェアはLivegrep、Webベースのインタラクティブなgrepです。 Livegrepの使い方 こちらが検索結果です。シンプルですが、検索結果は高速に表示されます。 結果をクリックするとGitHubなどの該当行にジャンプします。検索には正規表現も使えます。 リポジトリを指定することも可能です。 Livegrepはインタラクティブに検索可能で、文字を入力する度に絞り込まれていきます。日本語も利用できます。あらかじめインデックス化しておけば、プロジェクト内のコードを素早く検索できるでしょう。 LivegrepはC++製のオープ
Franchise - 多数のデータベースに対応したSQLノートブック
SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。 そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。 Franchiseの使い方 メイン画面です。複数のデータベースに対応しています。 結果を地図に描画する例です。 グラフ。線グラフです。 棒グラフ。 並び替えた棒グラフ。 ドットだけ。表示を2カラムにしています。 一般的な一覧表も可能です。 レンジを使ってその時の値を表示するパターン。 メールを取り込んでクエリを投げるパターン。 FranchiseのデータリソースはSQLite/PostgreSQL/BigQuery/MongoDB/Microsoft SQL Server/Oracle/DB2/Teradataなどとな
RazorFlow - 多数のグラフをサポートするHTML5ダッシュボードフレームワーク MOONGIFT
業務システムといえど、UIが整っている方がやる気が出るはずです。特にダッシュボード系のよく見る画面であれば分かりやすくなっているかどうかで生産性が大きく変わってきます。 今回紹介するオープンソース・ソフトウェアはRazorFlow、HTML5のダッシュボードフレームワークです。 RazorFlowの使い方 RazorFlowでは幾つかのグラフをサポートしています。 一覧も利用できます。 グラフはマウスオーバーで説明が出ます。 こちらはよりダイナミックなデータ変化ができます。フォームで表示するデータを絞り込めます。 カテゴリや名称などで検索できます。 RazorFlowは各種グラフの他、KPI表示パネル、ゲージ、テーブル、ドリルダウンなどの表示や機能に対応しています。HTML5を使っており、リアルタイムな描画アップデートも可能です。 RazorFlowはHTML5/JavaScript製のオ
Viewer.js - 多彩なアクションが設定できるJavaScript製画像ビューワー MOONGIFT
スマートフォンが流行るのに伴って画像コンテンツが増えています。普段、何気ない場面でもとりあえず撮影しておくといった人は多いのではないでしょうか。 次に考えるべきは見せ方です。FlickrやFacebookにアップするだけでなく、自分のサイトで効果的に見せるためにViewer.jsを使ってみましょう。 Viewer.jsの使い方 デモです。左右に設定があります。 写真をクリックすると拡大表示されます。 インラインではあまり大きくはならずに表示されます。 写真の回転もサポートされています。 Viewer.jsは多数の写真をグリッドで並べて、クリックで拡大表示できます。旅行やイベントなど、撮りためた写真を公開する際に使ってみましょう。 Viewer.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Viewer.js fengyuanchen/viewe
BitBar - メニューバーから任意のプログラムを実行
コードを定期的に実行する際にはCronを使ったりしますが、その結果を確認するのはメールを使ったりして若干面倒です。もっと手軽に結果を確認できると便利でしょう。 そこで使ってみたいのがBitBarです。任意のプログラムやスクリプトを実行し、その結果をメニューバーで確認できるソフトウェアです。 BitBarの使い方 BitBarを起動しました。そして、任意のプログラムやスクリプトを選択します。サンプルもたくさん用意されています。 そうするとこんな感じで結果をアイコンであったり、文字列で見られるようになります。適当なバックグラウンドジョブがあるならBitBarを仕込んでおくといいでしょう。 BitBarを使えばちょっとしたスクリプトやプログラムを手軽に呼び出したり、その結果の確認ができます。サーバのステータス確認などに使っても面白そうです。 BitBarはMac OSX用のオープンソース・ソフト
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
Diff to HTML - 差分をHTMLに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマーであれば差分をよく使うかと思います。基本的にCLIで実行するか、GUIの差分ソフトウェアで確認するでしょう。筆者はCLIをよく使います。 patchファイルの形式でもいいですが、Side by Sideのが見やすいこともあります。そこで使ってみたいのがDiff to HTML、GitのDiff情報をHTMLにしてくれるソフトウェアです。 Diff to HTMLの使い方 Diff to HTMLの表示です。GitHubのものに似ていますね。 変更されたファイル一覧も取れます。 1カラムだけでなく、サイドバイサイドもサポートされています。 Diff to HTMLはGitHubに近いデザインなので、見慣れた使い勝手になるでしょう。オフラインでも使えるのがいいですし、ローカ
MailSlurper - Web管理画面を備えた開発用メールサーバ
システム開発中においてもメール送信をテストしたいと思うことがあります。さらに本番環境のSMTPサーバを設置していたりすると、ミスした時にとんでもない事態になる可能性があります。十分な注意をしなければならないのがメールシステムの問題です。 そこで使ってみたいのがMailSlurperです。ローカルで動作する、開発用のメールサーバです。 MailSlurperの使い方 MailSlurperを実行すると、Webブラウザ向けの管理画面と開発用のメールサーバが立ち上がります。 メールを送るとWeb管理画面で内容が確認できます。実際には送信されていません。日本語はデコードされないようです。 設定画面です。 MailSlurperを立ち上げておいて、メールを送信するようにすればメールアドレスの確認メールやパスワードリマインダーなどのメールについてもテストしやすくなるでしょう。何より実際には送信されない
sri - Scala.jsを使ったReact Native実装 MOONGIFT
React Nativeの登場によって、俄然JavaScriptによるマルチプラットフォーム開発の可能性が見えてきました。そんな中、altJS界隈においてもReactをサポートすることで結果的にアプリ開発まで行える可能性が見えてきています。 今回紹介するsriはScala.jsでReact Nativeをサポートするソフトウェアになります。しかもWeb/iOS/Androidの3つのプラットフォームをサポートする考えだそうです。 sriの使い方 キッチンシンク的なUI explorer。 タブバーなども使えます。 スクロールビュー。 日付ピッカー。 sriをはじめるためにはScalaのインストール、sbtのインストールに加えて sbt fullOptJS を実行してかなりの時間を待つと言った具合に環境整備に時間がかかります。しかしそれさえ終わればScala.jsを使ってiOS/Androi
Office UI Fabric - Office 365で使われているフロントエンドフレームワーク MOONGIFT
実際のプロダクトで使われているソフトウェアは実践でもまれている分、より細かなニーズに応えられるようになっています。理想的な形ではなく、より実践的な視点で構築されているものでしょう。 今回紹介するOffice UI FabricはMicrosoftの提供するOffice 365で使われているフロントエンドフレームワークになります。 Office UI Fabricの使い方 Office UI Fabricのデモです。よくありそうな動画一覧画面です。 メニュー表示。 アイコン。 フォーム。 トグル。 テキストフィールド。 テーブル。 パーソナルカード。 写真付きのリスト。 パネル。 より詳細な設定ができるリスト。 カレンダーピッカー。 コマンドバー。 Office UI Fabricはフラットかつ落ち着いた色合いがちょっとだけ使われているといった白い部分がより強調されているフレームワークとなっ
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT
Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基本的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル
Gimei·日本人の名前、住所をダミーで生成 MOONGIFT
ダミーデータを作るのは意外と面倒で、つい“ああああ”などとしてしまったり、同じ文字を繰り返してしまったりします。しかしそれでは実際にありそうな文字数が分かりづらかったり、雰囲気として本物っぽさが感じられません。 そこで使いたいのがGimeiです。偽名、偽の住所などを生成してくれるライブラリです。 Gimeiの使い方 GimeiはRubygemでインストールできます。 gem install gimei 例えば男性を作る場合は以下のようにします。 gimei = Gimei.male gimei.male? #=> true gimei.female? #=> false gimei.kanji #=> "小林 顕士" もちろん実行する度に結果は変わります。 > gimei = Gimei.male => #< gimei::name:0x007fd2cb35b4c0 @gender=:ma
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
Mozilla SSL Configuration Generator – 各種HTTPサーバでのSSL設定を表示
セキュリティに対する懸念やクイックSSLの低価格化、ハードウェアの高機能化もあって、SSL/TLSを導入するサイトが増えています。SSL間でないとリファラー情報を飛ばさないなどマーケティング上も困る状態になります。 しかしSSLの設定は意外と面倒で、ちゃんと設定されていないと意味がなかったり、エラーが出てしまったりします。そういった点を適切にアドバイスしてくれるのがMozilla SSL Configuration Generatorです。 Mozilla SSL Configuration Generatorの使い方 Mozilla SSL Configuration Generatorはその名の通りMozillaが開発しているサービスで、各種設定に基づくSSLの設定を提示してくれるソフトウェアです。 対応しているのはApache/nginx/HAProxyになります。モダンな書き方、サ
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
ExcelJS·node.jsからExcelファイルを読み書き MOONGIFT
Windowsなんて嫌だ！Officeファイルなんて嫌い！なんて言いつつもシステム開発時にお世話になるのがExcelです。CSVファイルを出力したり、逆に読み込む機能は良く作るのではないでしょうか。 わざわざCSVを介さずにExcelファイル（xlsx）をそのまま読み込んだり、書き出せるのがExcelJSです。node用の便利なライブラリです。 ExcelJSの使い方 例えば書き出しを行った場合、こんなにカスタマイズされた書き込みが行えます。 逆に読み込んだ場合。各セルの値やシート名などデータがとれます。値が入っているセルの範囲も取得できます。 $ node testBookRead.js ./test.xlsx Worksheets: 1 Sheet 1 - blort Dimensions: A1:S12 値の種類としては数字、テキスト、日付、リンク、関数が使えます。ただし関数は関数の
Navstack.js - ハイブリッドアプリやスマートフォン向けWebサイトの画面遷移はこれにお任せ MOONGIFT
スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
