WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。 今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応しています。 jQuery-Tableditの使い方 jQuery-Tableditで表示したところです。右側に編集、削除のアイコンがあります。 クリックするとテキストボックスになって編集可能になりました。 編集完了すると赤くなります。これで編集した行がわかりやすくなります。 さらにダブルクリックしたセルだけを編集状態にすることもできます。 行全体ではなく、指定したセル

ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。 今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropellerです。 Propellerの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ボタン付きのモーダル。 ドロップダウン。 フォーム。 リスト。 さらにカスタマイズしたリスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 サイドバー。 タブ。 テーブル。 カード。 Propellerはマテリアルデザインになっていますので単純なデザインだけでなく、クリックやマウ

SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。 そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。 Franchiseの使い方 メイン画面です。複数のデータベースに対応しています。 結果を地図に描画する例です。 グラフ。線グラフです。 棒グラフ。 並び替えた棒グラフ。 ドットだけ。表示を2カラムにしています。 一般的な一覧表も可能です。 レンジを使ってその時の値を表示するパターン。 メールを取り込んでクエリを投げるパターン。 FranchiseのデータリソースはSQLite/PostgreSQL/BigQuery/MongoDB/Microsoft SQL Server/Oracle/DB2/Teradataなどとな

データベースを使った開発や運用時においてGUIの管理インタフェースが欲しいと思うことは多々あります。特にプロジェクトによってデータベースの種類が違ったり、接続先があちこちに存在するとそう感じるはずです。 そこで使ってみたいのがDBeaverです。多彩なデータベースに対応した管理UIです。 DBeaverの使い方 接続先の選択画面です。PostgreSQL/MySQL/MariaDB/DB2/Oracle/SQL Serverなどの基本に加えてMS Access、infomix、MongoDB、Firebirdなども選択できます。 SSHトンネルに対応しているので本番環境のデータベースも確認できるでしょう。 接続しました。 テーブルの一覧です。 データも確認できます。 ダイアグラムはリレーションなどの関係が分かるようになっています。 DBeaverを入れておけば、大抵のデータベースには接続で

Ruby BarcodescannerはRuby製のフリーウェア（ソースコードは公開されている）。携帯電話にはカメラがついているので、外で写真を撮るのも手軽だ。そうした外部の情報をアップロードして楽しむサービスは数多い。書籍のバーコードを使って楽しむサービスも面白い。 実行した所 携帯電話自体にバーコードスキャナーの機能があればそのまま使えるが、それがない場合は別途連携を考える必要がある。例えばRuby Barcodescannerを使ってみると良いだろう。Ruby Barcodescannerは画像を読み込んでバーコードスキャンを行うRubyライブラリだ。 元になるのが画像というのが良い。写真やスキャナーで取り込んだ画像をそのまま利用できる。画像の取り込みにはImageMagickを使い、実際のスキャンはzbarというオープンソースのバーコードライブラリを使っている。Ruby Barco

小飼弾(@dankogai) まずはMOONGIFTさん、10周年おめでとうございます。今調べたら、404 Blog Not Foundも今年の11月が開設で、今年は個人的にも社会的にも節目の年なのかも知れません。 節目といえば、 "Open Source"という言葉も今年の2月3日に0x10歳の誕生日を迎えます。オープンソースのこれまでの沿革を振り返り、これからのことに思いをはせるには絶好のタイミングとも言えます。これまた偶然にも、その8ヶ月後に私は一児の父となりました。私にとって、オープンソースが育っていた月日は娘たちが育っていた日々と重なっています。 ただし同い年の長女とオープンソースには違いが一つあります。「オープンソース的」なものはすでに長らく存在していて、なかったのはオープンソースという名前だけだったのです。 俺のサーバーがこんなに売れないわけがない いわゆるLAMPを構成する

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました こ、これは危険な香りが…。 Evernoteを使っている方は多いかと思います。筆者も何度かプレミアムになったことがあるのですが、その度にあの重たいUIにやられて使わなくなっています。使い勝手は良いので、自分専用に軽く動いてくれると良いのに、と思わずにはいられません。 そんな夢を叶えてくれるかも知れないのがNevernoteです。Nが追加されただけのほぼEvernoteという危ない気のするソフトウェアです。 Nevernoteの使い方 トップページの時点ですでに怖いです。 まずはアカウントを作成します。 トップページです。実に見覚えのあるデザインです。 メモの書き心地はまさに本家と同じです。 画像は使えませんが、タグは使えます。 機能的にはEvernoteのテキストのみといった感じで

人気投票はとてもよく使われるシステムです。有名なところではAKB48に代表されるアイドルの総選挙、漫画の人気キャラクター、さらにコンテストの優勝者を決める時にも人気投票が行われます。 そんな投票システムをRuby on Railsで構築したのがkajaeruです。特徴的なのはGitHubを使い、内輪の中でのみ投票できるという点でしょうか。 kajaeruの使い方 kajaeruはよちよち.rb（Ruby初学者向けコミュニティ）のKajaを選ぶためのシステムです。 投票時にはコメントも入力します。 投票完了しました。 kajaeruで投票できるのは予めkajaeruに登録されているメンバーのみとなります。そのため組織票が使えないのが特徴です。同じプロジェクトメンバーの中での優秀者を決めたりするのに良さそうです。何よりよちよち.rbの中で作られたシステムであると言う点が素晴らしいですね。 ka

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic

Q&Aコミュニティは今なお人気があります。利用者の困った、に対して回答するのは具体的な問題解決につながりますので、質問者、回答者双方にとって大きなメリットがあります。これは開発者に限らず便利です。 そんなQ&Aコミュニティを自分でも作りたいと思ったらQARoRをベースにしてみてはいかがでしょう。Herokuにも立てられるQ&Aサービスです。 QARoRの使い方 QARoRはStackoverflow.com風のQ&Aサービスになっています。表示回数、投票数、回答数によって並びが変わってくる形です。対開発者だけでなく、自社サービスコミュニティを作る際などの基盤に使うと良さそうです。 QARoRはRuby/Ruby on Rails製のオープンソース・ソフトウェア（MIT License）です。 Questions & Answers platform on Rails mateuszdw/q

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 新しいWebサイトを作ると何となくGoogle Analyticsを選んでしまっています。しかし他にも選択肢はありますし、データを外部に出せない場合（イントラなど）もあります。そういった場合、どのようにアクセス解析を行えば良いでしょうか。 もし使っているフレームワークがRuby on RailsであればAhoyを使ってみると良いかもしれません。Railsのモデルに組み込めるアクセス解析機能を提供します。 Ahoyのインストール まずはGemfileに記述します。 gem 'ahoy_matey' インストールと初期設定を行います。 $ bundle install $ rails generate ahoy:install $ rake db:migrate 後は app/asse

ngrokはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（Apache License 2.0）です。 自分のローカルで作っているサイトを誰かに見せたいと思ったことはないでしょうか。社内であればLANを使ってアクセスもできるでしょうが、ルータ越しではそう簡単ではありません。しかしngrokを使えばとても簡単に一時的な公開が実現できます。 実行しました。引数として何番のポートを見せたいか指定します。例えば3000や8080、80などです。そうするとインターネットからアクセスするためのURLが生成されます。 管理画面にアクセスすると指定したポートへアクセスした結果が表示されます。 外部からアクセスするとログがリアルタイムに流れていきます。 ヘッダーなども閲覧できます。 サーバにもログが出ています。 仕組みとしてはngrokが提供するWebサーバ（ngrok.com

※ 画像は公式サイトデモより Ajaxを使っている場合、その結果通知をどのように行うかは困るところだ。せっかく画面遷移のない、格好いい仕組みを使っているのに、ただ「完了しました」だけではあまりにもおざなりだろう。 右上に通知が出る 各Webサービスとも、通知のウィンドウは色々な工夫が凝らされている。自分のサイトで格好いい通知をしてみたかったら、このような仕組みはいかがだろう。 今回紹介するオープンソース・ソフトウェアはjGrowl、JavaScriptで作られたGrowlだ。 GrowlはMac OSXをお使いの方であれば知っているであろう、通知を行うためのフレームワーク的アプリケーションだ。Firefox、Cyberduck、Skypeなどなど、大抵のソフトウェアで利用されている。通知メッセージは画面の右上に表示され、時間が経過すると自動で消えていく、非常に使い勝手の良いアプリケーション

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました こういう仕組みはとても面白いですね！ ユニットテストではSpecファイルにテスト内容を記述し、それが想定したレスポンスを返すかどうかでテストを行います。この基本はとてもシンプルで、プログラミング言語以外でも応用が効くでしょう。 ということで作られたのがServerspecです。名前の通り、サーバが想定した通りに設定されているかどうかをテストするツールです。Rubyで記述できるのでプログラミングを組み合わせることで自在にテストができるでしょう。 最初に設定ファイルを生成します。対話型に進められます。 $ serverspec-init Select OS type: 1) UN*X 2) Windows Select number: 1 Select a backend type:

これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 帳票はビジネスの基本です。何百枚も出力される場合には自動化を考えるべきですが、10枚程度だとシステム化になかなか踏み切れない会社も多いかも知れません。そこで使ってみたいのがWeb系のシステムです。 Webでの出力であれば、シンプルなデータベースさえあれば十分事足りるでしょう。そのUIとして使ってみると面白そうなのがAngular Invoicingです。 名前の通りフロントエンドはAngularJSで作られており、データはローカルストレージに保存されるので再読み込みしても再現される仕組みになっています。今後、値引きやドル以外の貨幣にも対応していく予定とのことです。 そのままでは1つの帳票にしか対応していませんが、多少修正すればデータベースにデータを残すのもできるでしょう。ちなみにM

web-consoleはRuby製のオープンソース・ソフトウェア（MIT License）です。 Ruby on Railsで開発していて便利な機能の一つがコンソールです。コードのチェックやDB内のチェックに使っている人は多いでしょう。そんなコンソールをターミナルではなくWebブラウザ上で使えるようにしてくれるのがweb-consoleです。 接続しました。Unicornではダメで、Webrickで接続しました。 普通にconsoleとして動作します。 whereもちゃんと使えます。 web-consoleでは持続的な接続が行われており、Tabによる補完機能が使えない以外は基本的なconsoleと変わらない操作ができます。なおセキュリティ上のリスクになりますので利用は開発環境時のみとするようにしましょう。 MOONGIFTはこう見る web-consoleが面白いのはRails本体のリポジ

CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗