Community Geocoder - 住所から位置情報に変換するオープンソースなWeb API MOONGIFT
位置情報と住所については、常に相互に変換したいというニーズがあります。位置情報はスマートフォンやWebブラウザから取得できますが、住所の文字列から位置情報を取り出すのは意外と面倒です。GoogleマップのAPIなどを使う人も多いでしょう。 今回紹介するCommunity GeocoderはオープンソースのジオコーディングAPIです。日本限定ではありますが、住所の文字列から精度の高い位置情報が取得できます。 Community Geocoderの使い方 デモでは住所を入力すると、地図上での表示と位置情報表示を行ってくれます。 住所は番地まで入れなくても大丈夫です。 Community Geocoderは国土交通省の位置参照情報の「大字・町丁目レベル位置参照情報」を利用しています。GitHub上に静的ファイルでホスティングしており、無料で使えます。レスポンスも速いので、かなり便利に使えそうです
Copy Guard - 不正なクリップボード操作を監視するGoogle Chrome機能拡張 MOONGIFT
JavaScriptにはクリップボードのAPIが用意されています。それを使うことでクリック一つでコピーしたりできます。便利な反面、ユーザが意図していない情報をコピーさせることもできてしまいます。 そうした意図しない情報コピーに対して警告を出せるのがCopy Guardになります。 Copy Guardの使い方 テキストを選択してコピーを実行します。 アラートが出ました。 Copy Guardが警告を出すのはJavaScriptがコピーするテキストを改編している場合、そして非表示のエレメントをコピーさせている場合です。GitHubのリポジトリコピーなど、選択している文字をそのままコピーされる場合には警告は出ません。 Copy GuardはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 GitHub - roedesh/copyguard: A simpl
twurl - Twitter APIを呼び出すCLIコマンド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Twitterを操作するアプリケーションを開発するには、Web APIを使う必要があります。プログラミング言語によってはライブラリが用意されていますが、マニアックな言語では自分で一から書かないといけません。 CUIで動くアプリケーションであれば、twurlを使うことで手間をなくせます。twurlをコマンドラインで呼び出せばいいのです。 twurlの使い方 利用する際にはTwitterアプリを登録し、OAuth2ベースでの承認を得る必要があります。 twurl authorize --consumer-key key \ --consumer-secret secret タイムラインの取得です。JSONで返ってきます。 twurl /1.1/statuses/home_timelin
Firetable - Firestoreのデータ管理を表計算風に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました モバイルアプリやWebサイトで、FirebaseのFirestoreを使っている方もいるでしょう。Firestoreはクラウドのデータベースシステムですが、データをJSONで管理しているので、Firebaseの管理画面からでも見づらいのが問題です。 そこで使ってみたいのがFiretableです。Firetableを使えばFirestoreをまるで表計算のように表示してくれます。 Firetableの使い方 Firestoreの分かりづらい表示が、これほどまでに見やすくなります。 JSONはそのまま埋め込まれて表示されます。 クリックで詳細が表示されます。 Firetableでは画像やURL、数字、真偽値などによって表示される方式が変わります。カラムを追加したり、データを消したりする
umami - Google Analytics代替を目指すシンプルなアクセス解析
Google Analyticsを使っているWebサイトは多いです。しかし、個人のプライバシーに関わるデータがGoogleに吸い上げられていることを懸念する声もあります。サイト運営側にとっても、アクセスデータという重要なものがGoogleに蓄積されるのを嬉しくは思わないでしょう。 そこで使ってみたいのが自分たちで立てるアクセス解析システムです。今回はumamiを紹介します。 umamiの使い方 公式サイトのデモ画像より。PVやUU、アクセスの多いページ、リファラーが取れています。 さらにブラウザやOSの種別、デバイス、国が取得できます。 umamiはシンプルな表示で、アクセスに関する情報が取得できます。マーケティングに使うようなデータは取れないようですが、訪問者がどういった人たちか見るだけであれば十分でしょう。 umamiはJavaScript製のオープンソース・ソフトウェア（MIT Li
Broxy - Go製のHTTP/HTTPSプロキシ MOONGIFT
開発時にプロキシはよく使います。Web APIとどんな通信をしているかは、実際のネットワークを見てみるのが一番確かです。入っているはずの認証情報が入っていなかったり、URLが異なっているのに気付くのにもプロキシが使えます。 今回紹介するBroxyはHTTP/HTTPS両方に使えるプロキシソフトウェアです。 Broxyの使い方 設定画面です。独自のSSL証明書が出力できるので、これをPC側で読み込み、信頼しておく必要があります。 そうするとWebブラウザ（またはPC）の通信がすべて見られるようになります。 リクエストとレスポンス、両方が監視できます。 フィルターを使って絞り込みもできます。 個人的にはCharlesを使っていますが、簡易的なものであればBroxyで十分かも知れません。プロキシ設定さえ行えばCLIであったり、自作のソフトウェアなどでも利用可能です。 BroxyはGo製のオープン
Rectangle - macOSのウィンドウ操作をキーボードで
開発者であれば手はキーボードのホームポジションに置き続けるのが効率的なはずです。しかしGUI操作を行う際にはマウスなどを使わざるをえません。ウィンドウの場所や大きさを変える度にマウスに手をやるのは面倒です。 そこで使ってみたいのがRectangleです。キーボードショートカットでウィンドウ操作を行うソフトウェアです。 Rectangleの使い方 起動しました。 キーボードショートカット一覧です。自分で変更も可能です。 こんな感じでウィンドウを画面に寄せたりできます。 設定です。 Rectangleは多彩なショートカットが用意されているので、まずそれを覚えないといけません。一旦覚えてしまえば、素早くウィンドウを移動させられるようになるでしょう。画面の端などにぴたっと寄るので、マウスで移動させるよりも素早く、的確に移動できるはずです。 RectangleはSwift製のオープンソース・ソフトウ
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる MOONGIFT
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。
Vue-Blocks - Vue製のデータフローエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノードをつなぎ合わせてユーザがその場で動作を変えられる仕組みは人気ですが、そのUIはとても複雑です。専用のライブラリを使いますが、それ以外の仕組みとの相性を選びます。 もしVueで作っているならばVue-Blocksがその役割にぴったりでしょう。 Vue-Blocksの使い方 デモ画面です。 ノードを追加できます。種類によってインプットとアウトプットの数が違います。 ノード同士はマウスのドラッグ&ドロップで連結できます。 Vue-BlocksはVueコンポーネントなので、特定のフォーマットに沿ってデータを渡すだけでこのUIを作ってくれます。後は処理が終わった時のデータを保存するだけです。ビジュアルプログラミングやデータフローなど色々な場面で使えそうです。 Vue-BlocksはVu
Graviton Editor - Electron製のコードエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングエディタが多彩になっています。VS CodeやAtomのようにWeb技術でエディタが作られるようになり、より手軽にエディタが作れるようになっているのでしょう。自分の手に馴染むエディタを自分で作り上げるという楽しさもあります。 今回紹介するGraviton Editorもそんなエディタの一つです。機能はまだ多くありませんが、今後の可能性を期待できるエディタです。 Graviton Editorの使い方 最初に言語を選択します。 左側にフォルダとファイル一覧、右側がエディタになります。 禅モードとしてフォルダビューを非表示にできます。 スプリットビューもあります。 Graviton Editorはプラグインやテーマ機能もありますので、今後の機能拡張に期待がかかります。テー
tetris - Webブラウザ用テトリス
名前ですべて分かってしまうのですが。 ソフトウェアをインストールする時代はすでに終わっています。スマートフォンアプリは殆どインストールされることがなく、デスクトップ向けのソフトウェアもどんどんWeb化が進んでいます。時間つぶし系のゲームは特にその傾向が強いでしょう。 今回紹介するtetrisはあのテトリスをWebアプリケーション化したソフトウェアです。Webサーバも不要で遊べます。 tetrisの使い方 HTMLファイルをWebブラウザにドロップすればすぐに遊べます。 tetrisはWASDではなく、矢印キーでブロックを操作します。レベルがあり、徐々に落下が速くなるようです。難易度はそれほど難しくないので、長く続いてしまう懸念があります。時間つぶしのはずが熱中してしまわないよう注意してください。 tetrisはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンス
Utatane - プログラミング用の日本語等幅フォント
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本語でプログラミングをしている時に困るのが英字と日本語のバランスです。記号や英字で幅が違ったりすると何となく気持ちが悪かったり、さらにそこに日本語まで加わるとずれが大きくなります。 そこで使ってみたいのがUtatane、プログラミング用の日本語等幅フォントです。 Utataneの使い方 Utataneの文章例。英語は日本語1文字分にきちんと収まっています。 プログラミングの中で使った場合。可読性も高く、文字幅もちょうどいいです。 UtataneはRichyからフォークしたCicaをさらにフォークして作られています。さらにUbuntu Monoとやさしさゴシック、やさしさゴシックボールド を合成と調整して作られています。様々なフォントの工夫が盛り込まれたフォントだけにプログラミング
Lightweight PDF - PDFを軽量に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 利用するOSが増えてきて、スマートフォンとデスクトップ間などでデータの送受信を行う際にPDFが便利です。ビューワーは一般的であり、誰もが持っています。閲覧だけであればどの環境でもできるので、ちょっとしたファイルでもPDFで送ったりします。 そんな中、単純に書類をPDFにするとサイズが非常に大きくなることがあります。そこで使ってみたいのがLightweight PDFです。 Lightweight PDFの使い方 メイン画面です。PDFをドロップするだけで縮小が開始されます。 テキストばかりの場合、サイズは殆ど小さくなりません。画像が多用されていたりすると、その画像を縮小して効率的にサイズ軽減が可能になります。PDFによっては思っている以上に小さくなるのでぜひ試してみてください。 L
Sushi Browser - Electron製の開発者向きなWebブラウザ
開発をしていて、一つのウィンドウを複数ペインに分けてコーディングすることはよくあります。同様にWebブラウジングしている時に、複数サイトを並べたいと思うこともあるでしょう。その場合、Webブラウザではウィンドウを分けなければなりません。 そこで使ってみたいのがSushi Browserです。マルチペインに対応したWebブラウザです。 Sushi Browserの使い方 起動直後です。 レンダリングエンジンはWebKitなのでSafariやGoogle Chrome同等の結果が得られます。 セッションを保存しておいて、呼び出せる機能。 ユーザエージェントを変更する機能。 スプリット。 さらに細かく分割もできます。 スクリーンショット保存機能。ページ全体も指定できます。 さらに設定には多数の機能があります。 なぜかターミナルも。 ファイル操作もできます。 ノート機能はWYSIWYGでメモできま
XSStrike - 公開前にチェック。CUIでXSSを見つける MOONGIFT
XSS（クロスサイトスクリプティング）はWebシステム開発者としては特に注意していることでしょう。今なお、大事なファイルが平文で保存されていたとか、脆弱性をついてユーザデータをすべて抜き取られたといった問題はXSSによって起こされています。 そんなXSSをチェックできるのがXSStrikeです。XSStrikeを使ってテストすることでセキュアなWebサイトを実現できるでしょう。 XSStrikeの使い方 XSStrikeはURLとパラメータなどを送信して、XSSが認められないか確認します。 $ python xsstrike.py --url https://www.moongift.jp/ --data q=test XSStrike v3.0.5 Checking for DOM vulnerabilities WAF Status: Offline Testing parameter
Gixy - nginxの設定ファイルを静的解析して改善提案
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTTPサーバとしてnginxを使っているケースは多いかと思います。しかし設定に関する情報はまだまだ多くはなく、動くように設定はしても、それがベストなのかどうか判断できない方も多いのではないでしょうか。 そんな方にお勧めなのがGixyです。nginxの設定ファイルを解析して改善案を提示してくれます。 Gixyの使い方 Gixyのインストールは pip でできます。 pip install gixy 後はnginxの設定ファイルを指定するだけです。 $ gixy /path/to/nginx.conf ==================== Results =================== Problem: [host_spoofing] The proxied Host h
TumblrDownloader - Tumblr画像をまとめてダウンロード
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Tumblrには多くの魅力的なコンテンツがあります。最近は動画も増えてきましたが、まだまだ画像もたくさんあります。格好良い、素敵な画像を載せている人たちをフォローしている方も多いことでしょう。 そんな画像をまとめてダウンロードしてくれるのがTumblrDownloaderです。 TumblrDownloaderの使い方 TumblrDownloaderはサブドメインを指定して実行します。つまり自分のログインアカウントは不要です。なお、Python2系になっています。3系だとエラーが出ます。 $ python2 tumblrdownloader.py blackfashion Downloading Subdomain: blackfashion [123145307660288]
WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム MOONGIFT
ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。 そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み合わせてアイトラッキングを実現しています。 WebGazer.jsの使い方 使っているところ。顔が認識されているのが分かります。 目線をオレンジのボールに持っていくらしいのですが…なかなか思い通りには動きません。 WebGazer.jsの精度はまだまだ実用レベルではないですが、Webカメラを使うことで視線の動きが追えればアイトラッキングシステムを手軽に使えるようになるでしょう。テストはもちろん、視線を使った情報入力などにも応用できそうです。 WebGazer.jsはHTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
