)
Graphviz Visual Editor - GraphvizをWeb上で表示、さらに編集も！ MOONGIFT
昔から開発者がビジュアル化のために使ってきたライブラリがGraphvizではないでしょうか。DOT言語と呼ばれる記法に沿って書くことで、画像やSVGとしてドローされたデータを出力できます。 そんなGraphvizのビジュアル化をWeb上で行い、さらに編集まで行えるのがGraphviz Visual Editorです。 Graphviz Visual Editorの使い方 基本的な形。 エンジンはdotだけでなく、fdp/neato/osage/patchwork/twopiから選択できます。 複雑なものでも問題なく描けます。 こんな複雑なものでも瞬時に描画されます。 拡大したり、選択しているノードが左側のエディタでハイライトされます。 図形の追加も可能です。 DOT記法のビジュアル化するツールはよくありますが、Graphviz Visual Editorは編集もできるのが特徴です。どの部分
)
X6 - Web上にSVG出力するドローライブラリ
Web上で図を描きたいと思うことはよくあります。しかし使い勝手の良いものがないので、ドローツールやプレゼンツールで作ってしまいます。しかし画像なので後で編集するのが面倒だったりします。 そこで使ってみたいのがX6です。アニメーションまでサポートしたドローライブラリです。 X6の使い方 こんな感じのドローが簡単にできます。 コードの抜粋です。 const data = { // 节点 nodes: [ { id: 'node1', x: 40, y: 40, width: 80, height: 40, label: 'Hello', }, { id: 'node2', x: 160, y: 180, width: 80, height: 40, label: 'World', }, ], // 边 edges: [ { source: 'node1', target: 'node2', }
apkLeaks - APKファイルを解析してURLやシークレット情報を取り出す MOONGIFT
アプリは一つのパッケージでリリースします。そのため、完全に暗号化されており、機密データも安全に扱われていると考えてしまいがちです。実際にはそんなことはなく、さまざまな情報が読み取れます。 今回紹介するapkLeaksはAndroidのAPKファイルを読み込み、そこに書かれたURLやエンドポイント、シークレット情報があるかチェックします。 apkLeaksの使い方 とあるAPKファイルで実行した結果です。 $ python apkleaks.py -f "Example.apk" _ ____ _ ___ _ / \ | _ \| |/ / | ___ __ _| | _____ / _ \ | |_) | ' /| | / _ \/ _` | |/ / __| / ___ \| __/| . \| |__| __/ (_| | <\__ \ /_/ \_\_| |_|\_\_____\__
)
danfo.js - データを素早く手軽にビジュアル化 MOONGIFT
データのビジュアライズはとても大きな問題です。ツールによって使い勝手がばらばらで、簡単に使えるものもあれば、とても複雑なものもあります。データ量によって選択肢が変わり、最適な表示方法も異なります。 今回紹介するdanfo.jsは、とても簡単に使えるデータビジュアライズソフトウェアです。 danfo.jsの使い方 danfo.jsの実行例です。データをとってきて、それを3つのパターンでビジュアライズしています。 const df = await dfd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv") df['AAPL.Open'].plot("div1").box() //makes a box plot df.plot("div2").table()
)
Community Geocoder - 住所から位置情報に変換するオープンソースなWeb API MOONGIFT
位置情報と住所については、常に相互に変換したいというニーズがあります。位置情報はスマートフォンやWebブラウザから取得できますが、住所の文字列から位置情報を取り出すのは意外と面倒です。GoogleマップのAPIなどを使う人も多いでしょう。 今回紹介するCommunity GeocoderはオープンソースのジオコーディングAPIです。日本限定ではありますが、住所の文字列から精度の高い位置情報が取得できます。 Community Geocoderの使い方 デモでは住所を入力すると、地図上での表示と位置情報表示を行ってくれます。 住所は番地まで入れなくても大丈夫です。 Community Geocoderは国土交通省の位置参照情報の「大字・町丁目レベル位置参照情報」を利用しています。GitHub上に静的ファイルでホスティングしており、無料で使えます。レスポンスも速いので、かなり便利に使えそうです
)
shellnium - ShellスクリプトでWebブラウザを自動操作
Seleniumを使うとWebブラウザをプログラミングコードから自動操作できます。よくWebブラウザのテストなどで使われていますが、スクレイピングや業務システムの自動操作でも利用されます。 今回紹介するshellniumは、そんなSeleniumをシェルスクリプトで操作するソフトウェアです。 shellniumの使い方 実際のコードです。 #!/usr/bin/env bash source ./selenium.sh main() { # Googleのトップページに遷移 navigate_to 'https://google.co.jp' # 検索ボックスの要素を取得 local searchBox=$(find_element 'name' 'q') # 検索ボックスに入力＆検索実行 send_keys $searchBox "タピオカ\n" } main ちゃんとWebブラウザを自
)
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
japan-map-js - 日本のクリッカブルな地図を表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 集まったデータをただ一覧にしているだけではインパクトは薄くなってしまいます。どう可視化するかが問題です。時系列で比較する場合は棒グラフや折れ線グラフ、グループの場合は円グラフなど、データによって選ばれるグラフは異なります。 もしデータが地域に合わせて作られるなら、地図上にマッピングするのがいいでしょう。日本地図にマッピングするなら使えるのがjapan-map-jsです。 japan-map-jsの使い方 デモです。都道府県名を出しているパターンです。 クリックすると、どの都道府県か分かります。 色分けもできます。 コロナウィルスのデータと合わせているパターンです。 japan-map-jsを使えば日本地図上にデータを可視化するのが簡単に実現できます。元々japan-mapで使われて
styled-icons - 13,500種を超えるアイコンフォント集
Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。 そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。 styled-iconsの使い方 一部を紹介します。サービス、ブランド系のアイコン。 ツールバーなどに使えるアイコン。 多種多様に揃っているので、これだけあれば大抵のニーズは満たせるでしょう。 styled-iconsはFont Awesomeをはじめ、IoniconsやMaterial Design、Typiconsなど有名なアイコンフォント集を多数集めています。Reactスタイルのコンポーネントとして提供されており、共通した使い勝手で利用できます。Reactで作る際には導入しておきたいライ
CodeJar - Web上で使える小さなコードエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でコードを表示したい場面はよくあります。そのためのコードハイライトライブラリも多数ありますが、それは単に装飾だけ行うものです。ユーザに編集を許可するものではありません。 もしWebブラウザ上で使える手軽なコードエディタを探しているならば、CodeJarを使ってみましょう。 CodeJarの使い方 表示例です。 Markdownの場合。テーマも多数用意されています。 言語も数多く対応しています。 行番号の表示もできます。 CodeJarはわずか2KB程度の軽量さに加えて、ハイライトライブラリは自由に選ぶことができます。さらにAPIも用意されているので、拡張も簡単にできそうです。括弧を自動で閉じてくれるような機能もあり、ちょっとしたコードであればさくっと書けるでしょう。 Cod
Tabler Icons - 300種類のSVGアイコン集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近は画像ではなく、SVGでアイコンを表示するケースも増えています。PNGなどのバイナリとは異なり、SVGならば縮小、拡大しても綺麗だというのが利点です。さらにちょっとしたデータ変更であれば（色など）、データを書き換えたり、CSSで変更できます。 今回紹介するTabler IconsはSVGで作られた300種類のアイコン集になります。 Tabler Iconsの使い方 開発系のアイコンが多いようです。 マグアイコン。 線の太さを変えた例です。 Tabler IconsはSVGなので、画像としての利用はもちろん、直接HTML上に記述することもできるので別途ファイルを用意しなくてもいいのが利点です。パラメータを変更することで、塗りつぶしやカラーリング、線の太さなどを自由に指定できるのも
css.gg - 500種類を超えるCSSアイコン集 MOONGIFT
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部
Covidify - コロナウイルス関連データの収集と可視化
世界中の人たちが心配しているコロナウイルス。毎日様々なニュース、データが飛び交っており、何をどう判断したらいいのかも分からなくなりそうです。そして各国のデータを分析する、可視化するニーズも強くあります。 今回紹介するCovidifyはコロナウイルス関連データを集積、グラフ化するライブラリです。 Covidifyの使い方 世界中の感染者数データ。累計と新規感染者数。 感染者数。 日本だけのデータも表示できます。 Covidifyは covidify run と実行するだけでグラフと、データのCSVファイルを生成します。さらに country オプションで国の指定も可能です。現時点での正しいデータを手に入れるために覚えておきたいソフトウェアです。 CovidifyはPython製のオープンソース・ソフトウェア（MIT License）です。 AaronWard/covid-19-analysi
markdown-table-editor kernel - Markdownのテーブルを簡単に編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownでテーブル組を作っていて、ある行だけカラム数がずれていて、うまく表示できないといった経験はないでしょうか。カラム数が2〜3個ならまだしも、数十あるような大きなテーブルを編集するのに、|だけでは大変です。 そこで使ってみたいのがmarkdown-table-editor kernelです。自動補完、セル移動機能を提供するMarkdownテーブル編集ツールです。 markdown-table-editor kernelの使い方 |があるところを機転としてテーブルに展開してくれます。 エンターキーで自動的に次の行が表示されます。 列も自動で入力されます。 キーバインドも多数用意されています。 markdown-table-editor kernelはセル間の移動でTabキ
newscatcher - ニュースサイトに特化したPython製のスクレイピングライブラリ MOONGIFT
ニュースサイトは広告が多く、Webブラウザで目的の記事を探すのも面倒です。そのため、RSSフィードを登録している人もいますが、頻繁に訪れるサイトでもなければ、それも面倒です。 そこで使ってみたいのがnewscatcherです。ニュースサイト専用のスクレイピングライブラリです。 newscatcherの使い方 NY Timesのサイトを試す例です。サイトを指定するだけで記事タイトル一覧が取れます。 >>> from newscatcher import Newscatcher >>> news_source = Newscatcher('nytimes.com') >>> news_source.print_headlines() 1. | Coronavirus Fears Drive Stocks Down for 6th Day and Into Correction 2. | U.S
Kap - 画面の操作をアニメーションGIFや動画で保存
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました macOS Catalinaになって、基本的に32bitのアプリケーションは利用できなくなりました。そのため筆者は移行せずにいたのですが、最近ではソフトウェアがCatalina向けのものが増えています。 一番厄介だったのがLICEcapというスクリーンキャプチャをGIFで保存してくれるソフトウェアだったのですが、Kapがその代替として使えそうです。 Kapの使い方 起動しました。どの範囲で録画をするか設定します。 このハイライトされた部分だけ録画されます。 保存前の編集。FPSを変えたり、サイズの調整もできます。フォーマットもGIF以外が選択できます。 実際に作成したアニメーションGIF。 KapはアニメーションGIFだけでなく、WebMやAPNG、MP4などで保存も可能です。アニ
Compressor.js - Web上で画像を圧縮 MOONGIFT
スマートフォンやデジカメが高性能化し、作成される写真のサイズがどんどん大きくなっています。数MBで済めばいいほうで、場合によっては10MBを超える場合もあるでしょう。そうした写真を受け取る側のサービスもネットワークが逼迫してしまいます。 そこで使ってみたいのがCompressor.jsです。画像をJavaScriptで圧縮してくれるライブラリです。 Compressor.jsの使い方 デモです。約4割になっています。 別な例。1.32MBが440KBに削減されています。 Compressor.jsはJavaScriptで、様々な条件を指定して圧縮できます。画像幅や高さを変更することもできます。さらにiPhoneの写真でよくある向きの修正もしてくれます。Compressor.jsであらかじめ画像を小さくしておけばアップロードも素早く済むでしょう。 Compressor.jsはJavaScri
Medieval Fantasy City Generator - 仮想の都市を生成する
人が生活するところには街があります。そこには様々な建物が建ち並び、中には警察や消防署など公共施設もあります。あなたがゲームを作ったり、小説を書いたりするならば、そうした設定が必要なはずです。 今回紹介するMedieval Fantasy City Generatorは仮想的な都市をランダムに生成してくれるソフトウェアです。 Medieval Fantasy City Generatorの使い方 生成例です。 街の中央に川が流れているタイプ。 色を変更できます。 道の部分を色分けもできます。 Medieval Fantasy City Generatorはマップの大きさも変更でき、建物を塗りつぶしたり、枠だけ表示すると言った設定もできます。この地図を見ながら設定を考えれば、より実感あるプロットができることでしょう。 Medieval Fantasy City GeneratorはHaxe製の
jExcel - Web上でExcelレベルの表計算機能を実現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムをWebアプリケーション化すると、必ず一覧表の機能が必要になります。そして、テーブル組などで簡単に終わらせようとすると、並び替えやインライン編集などの機能要望が出てきます。 今回紹介するjExcelはExcel風の表計算機能をWeb上で実現してくれるソフトウェアです。 jExcelの使い方 ページネーション付きのテーブル。 セル単位での編集も行えます。 セルには画像も使えます。 他にもチェックボックスやカラーボックスも配置できます。 日付ピッカー。 時間ピッカー。 セルに色付け。 ソート機能。 セルのマージ。 セルにコメント。 コンテクストメニューから操作。 複数段のヘッダー。 jExcelを使えば一覧表が一気に高機能になります。Excelをはじめとした表計算ソフトウェ
CoreUI Icons - 1,500種類を超える多彩なアイコン集
今のWebサイト、スマートフォンアプリではテキストではなくアイコンで操作を指示することが増えています。絵の方が分かりやすい場面も多いですが、分かりづらいアイコン（保存のフロッピーアイコンなど）もあります。 その中でも大事なのが統一性です。大量のアイコンが一つのパッケージになっていることで、統一されたデザインが実現できます。今回紹介するCoreUI Iconsはフリーでも1,500、有料版では3,000のアイコンが提供されます。 CoreUI Iconsの使い方 各カテゴリの最初の部分だけ紹介します。まずはブランド。 AppleやAmazonなどもあります。 国旗。 アクセシビリティ。 アラート。 ファシリティ。 ビジネス、マーケティング。 チャット。 顔。 ファイル、ドキュメント、メール。 フード、ドリンク。 手。 イメージ編集。 インタフェース。 メディア、オーディオ、動画。 電話系。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
