タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
NeutralinoJs - Electronよりもメモリ消費が小さいデスクトップアプリケーション開発環境 MOONGIFT
Web技術を使ってデスクトップアプリケーションを作成する事例が増えています。有名なところではAtomやVisual Studio Codeが挙げられるでしょう。プログラミングエディタができるなら、大抵のソフトウェアが作れるはずです。その基盤としてはElectronを使っている例が多いです。 NeutralinoJsはElectron代替のソフトウェアです。より小さなサイズで動作し、メモリ消費量も小さいのが特徴です。 NeutralinoJsの使い方 NeutralinoJsのコードサンプルです。 let myapp = { myfunction : function () { document.getElementById('info').innerHTML = NL_NAME + " is running on port " + NL_PORT + " inside " + NL_OS
最近のWebフロントエンドフレームワークでは、デザインとコードの分離ではなく、画面の役割をもって分離しています。そのためデザインとコードが一つのコードの中にあり、デザイナーにとっては慣れるまでデザインしづらいと感じているかも知れません。 もしReactで開発しているプロジェクトならば、Utopiaを使ってデザインしてみると良さそうです。 Utopiaの使い方 エディタ画面です。 ストーリーボードなる機能もあります。 コードエディタです。左側にはファイルツリーがあります。 コンポーネントの構造も可視化されます。 マウスで選ぶと選択されているコンポーネントが斜線されます。 ズーム表示もできます。 Utopiaはコンポーネントを変更したり、右側にあるプロパティを変更することでリアルタイムにデザインを確認できます。Visual Studio Codeとデザインプレビューが組み合わさった形になります
Webの解析ツールというと、アクセスを解析するものが殆どです。ビューやUUを計測して、Webサイトの改善に活かします。それらのデータは管理者向けのものであり、訪問者はデータを渡すだけでした。 Falcoは異なる視点でデータを収集します。それはWebサイトの使いやすさ、パフォーマンスに注目しています。 Falcoの使い方 ダッシュボードです。 Lighthouseのレポートも見られます。 さらに細かい数字も分かります。 グラフの追加も可能です。 別なパフォーマンステスターの結果も見られます。 Falcoは自動的にデータを収集してくれるので、日々の更新によって徐々にパフォーマンスが劣化しているといった変化も分かるようになります。ページごとに解析できるので、改善すべきページもすぐに分かるでしょう。 FalcoはTypeScript製のオープンソース・ソフトウェア（MIT License）です。
Web上で扱うことも多いPDF。ただドキュメントとして表示するだけで、あえてJavaScriptから操作することは殆どないでしょう。しかし、JavaScriptとPDFが連携できるようになれば、もっと可能性が広がりそうです。 今回紹介するPDF-LIBはWebブラウザ、nodeのどちらからでも操作できるPDFライブラリです。 PDF-LIBの使い方 JavaScriptだけでPDFを作成しています。 既存のPDFにテキストを追加することもできます。 複数のPDFを一つにまとめることも。 画像を差し込むサンプル。 フォントを指定して実行。 メタデータを追加することもできます。 さらにSVGをPDFに描画します。 PDF-LIBは新規のPDFはもちろん、既存のPDFに手を加えることもできます。レポートを作るレベルになるとそれなりに難しそうですが、簡単な内容であればJavaScriptだけでPD
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
ブログなどでコードを記載しているサイトは多いです。その表示方法も様々で、行番号があるもの、ハイライトが付いているものなどがあります。そのコードをコピーしても余計な行番号が付いてきたりして、ストレスと感じたりします。 そこで使ってみたいのがcopy-code-blockです。自由度の高くコードのコピーが可能です。 copy-code-blockの使い方 コードハイライタと組み合わせた例です。 コピーボタンを押すと、コードだけがコピーできます。 <div class='cool-container'> <p class='cool-description'>Get ready for...</p> <ul class='cool-list'> <li class='cool-item'>rainbows</li> <li class='cool-item'>and</li> <li class
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ曲線的なデモです。 グリッドを効かせたドラッグを行うデモです。 スナップする時に、スムーズに動くこともできます。 特定のDOM内には入らないように指定できます。 応用すると、二つのノード、それぞれが入れない場所を指定できます。 ソートにも使えます。 PlainDraggableはDOMだけでなく、SVGに対しても利用できます。ドロー系のアプリケーションであったり、簡易的なゲームなどでも使えそうです。ソートでも使えるので、様々な場面で利用できそうです。 PlainD
iOSの開発をしていると、シミュレータのデータなどが蓄積されていきます。もちろん細かく各バージョンでの動作確認は必要ですが、ストレージを逼迫するのも問題です。定期的に整理が必要です。 そこで使ってみたいのがDevCleanerです。アプリケーションなどのデータも整理できるXcode用クリーナーです。 DevCleanerの使い方 起動すると、不要（古い）バージョンはチェックがついています。 そしてクリーンボタンを押せばファイルが削除されます。 不要なバージョンを削除すれば、一気に数GB減ることも少なくないでしょう。もちろん検証が必要なバージョンもあるので最新だけが必要な訳ではありません。逼迫した時の整理にぜひ活用してください。 DevCleanerはSwift製のオープンソース・ソフトウェア（GPL v3）です。 DevCleaner for Xcode on the Mac Ap
スマートフォンやタブレット向けには多くの電子書籍リーダーがありますが、デスクトップ向けにはあまりありません。ePubやPDFによる電子書籍が広まっていく中、デスクトップでも使いやすく読みたい人も多いでしょう。 そんな方に使ってみて欲しいのがLastingPaperです。マルチプラットフォームで使える電子書籍リーダーです。 LastingPaperの使い方 書籍を登録しました。 日本語も問題なく表示できます。 読書カレンダーなるものもあります。 ハイライト一覧。 書籍のタグや、ハイライトの色で絞り込めます。 日本語のハイライトも問題なく扱えます。 LastingPaperはKindleのベストパートナーとあるのですが、筆者が試した限りでは連携する訳ではなさそうでした。単体の電子書籍リーダーとしても十分利用できるので、デスクトップでも電子書籍を楽しみたい方はぜひ使ってみてください。面白いところ
出先などで、突然印刷しなければならない時があります。そんな時に便利なのがコンビニを使ったネットプリントなのですが、そのUIがとても使いづらいです。ストレスを感じて諦めてしまう人も多いでしょう。 そこで使ってみたいのがnetprint.shです。コマンド一つで印刷設定を行ってくれます。 netprint.shの使い方 netprint.shを実行します。Bash4.0以降が必要です。 $ /usr/local/bin/bash netprint.sh PDF.pdf fileBody=@PDF.pdf paperSize=0 secretNumber= margin=0 mailAddress= colorMode=2 : { "resultCode": 0, "printID": "C5...J6", "detailURL": "https://www.printing.ne.jp/usr
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
アプリは一つのパッケージでリリースします。そのため、完全に暗号化されており、機密データも安全に扱われていると考えてしまいがちです。実際にはそんなことはなく、さまざまな情報が読み取れます。 今回紹介するapkLeaksはAndroidのAPKファイルを読み込み、そこに書かれたURLやエンドポイント、シークレット情報があるかチェックします。 apkLeaksの使い方 とあるAPKファイルで実行した結果です。 $ python apkleaks.py -f "Example.apk" _ ____ _ ___ _ / \ | _ \| |/ / | ___ __ _| | _____ / _ \ | |_) | ' /| | / _ \/ _` | |/ / __| / ___ \| __/| . \| |__| __/ (_| | <\__ \ /_/ \_\_| |_|\_\_____\__
開発時にプロキシはよく使います。Web APIとどんな通信をしているかは、実際のネットワークを見てみるのが一番確かです。入っているはずの認証情報が入っていなかったり、URLが異なっているのに気付くのにもプロキシが使えます。 今回紹介するBroxyはHTTP/HTTPS両方に使えるプロキシソフトウェアです。 Broxyの使い方 設定画面です。独自のSSL証明書が出力できるので、これをPC側で読み込み、信頼しておく必要があります。 そうするとWebブラウザ（またはPC）の通信がすべて見られるようになります。 リクエストとレスポンス、両方が監視できます。 フィルターを使って絞り込みもできます。 個人的にはCharlesを使っていますが、簡易的なものであればBroxyで十分かも知れません。プロキシ設定さえ行えばCLIであったり、自作のソフトウェアなどでも利用可能です。 BroxyはGo製のオープン
WebAssemblyを使うことで、これまでのWebでは難しかったスピードでアプリケーションを実行できるようになります。DOMやネットワークが使えないといった制限はありますが、計算処理を高速に行えるのは大きなメリットです。 そんなWebAssemblyでは既存のソフトウェアをEmscriptenを通してWebAssmbly化する試みが多数行われています。今回は動画処理で有名なFFMPEGをWeb上で動くようにしたffmpeg.jsを紹介します。 ffmpeg.jsの使い方 左側はWebカメラの映像で、まずこれを録画します。 録画を停止すると処理が開始します。少し時間がかかります。 右側に動画が表示されます。 デモではWebカメラの映像を取り込んで、ffmpeg.jsを使ってH.264（MP4）に変換しています。同様の処理をJavaScriptだけで行うのは処理時間を考えるに、相当困難でしょ
DockerをWindowsやmacOSなどで使う際には専用のクライアントソフトウェアをインストールしないといけません。しかし会社によってはセキュリティ上の問題でインストールできない場合もあるでしょう。 そんな環境でもDockerイメージをダウンロードできるクライアントがgraboidです。Go言語だけで使えるソフトウェアです。 graboidの使い方 利用する時はDockerのイメージファイル名とタグを指定するだけです。ダウンロードが開始され、最終的にDockerイメージができあがります。 $ graboid node:lts-alpine3.11 • Querying Registry image=library/node • GET CONFIG • GET LAYERS 2.67 MiB / 2.67 MiB [===================================
従来はローカルアプリケーションだったものが、どんどんWebアプリケーション化しています。開発環境においてもクラウドIDEが使われるようになっています。殆どの操作がWebブラウザ上でできるようになるでしょう。 今回紹介するSshwiftyはSSHクライアントをWebブラウザベースで提供します。 Sshwiftyの使い方 SSHとTelnetに対応しています。 ログインしました。普通のSSHクライアントです。 Emacsも動かせます。 接続状態です。 Sshwiftyは鍵を用いた認証にも対応しており、SSHクライアントとして十分に動作します。ローカルでサーバを立てておけば、WebブラウザからすぐにSSH接続が可能です。社内で立てれば、SSHクライアントをインストールしていない端末からでもすぐに使えるでしょう。 Sshwiftyはnode/JavaScript製のオープンソース・ソフトウェア（G
MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
HTML5ではIndexedDBというデータベースAPIが実装されています。しかし、若干利用法が独特な分、なかなか使いこなすのが難しいようです。昔ながらのRDBMSであったり、廃止になってしまったWebSQLデータベースの方が使いやすかったかも知れません。 今回紹介するsql.jsはSQLiteをEmscriptenを使ってJavaScriptで使えるようにしたライブラリになります。 sql.jsの使い方 デモです。SQLを実行できます。 結果も取得できます。 任意のSQLiteファイルを読み込めます。 sql.jsはSQLiteをWebAssemblyにし、実行できるようになっています。仮想ファイルシステムを使っており、インメモリで動作しています。そのため、Webブラウザをリロードしてしまうと消えてしまうのが難点です。その点さえ目をつぶれば、Webブラウザ上で自由にSQLを実行できる環境
開発時にDockerやDocker Composeを使っている人は多いかと思います。Docker Composeでは複数のコンテナが立ち上がっているので、その状態やログを確認するのが面倒なことも多いでしょう。 そこで使ってみたいのがlazydockerです。複数のコンテナを管理できるビューワーです。 lazydockerの使い方 ターミナル上で実行できます。見やすいダッシュボードです。 ログの確認も容易です。 設定も確認できます。 lazydockerではさらに、ステータスをグラフで可視化できます。キーボードショートカットはもちろん、マウスでの移動も可能なようです。開発のログを確認するだけでも便利そうなので、インストールしておくと開発が捗りそうです。 lazydockerはGo製のオープンソース・ソフトウェア（MIT License）です。 jesseduffield/lazydocker
データのビジュアライズはとても大きな問題です。ツールによって使い勝手がばらばらで、簡単に使えるものもあれば、とても複雑なものもあります。データ量によって選択肢が変わり、最適な表示方法も異なります。 今回紹介する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()
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
HTMLは自由な表現が可能ですが、素のままでは本当に貧相な表示になります。かといって気の利いたデザインを作るのは大変です。一部の表現が足りないために、全体のバランスが崩れてしまうことも多々あります。 そこで使ってみたいのがWater.cssです。読み込むだけで、Webサイトをそれっぽくしてくれます。 Water.cssの使い方 元のHTMLです。 適用後。良い感じになりました。 ダークモードにも対応しています。 フォーム。 画像、テーブル、アコーディオン式の表示。 リストとタイポグラフィ。 Water.cssは小さいスタイルシートで、シンプルなWebサイトの表示をほんの少しだけ良い感じにしてくれます。素のHTMLだけで作った単純なWebサイトであれば、Water.cssを読み込んでおくだけでちゃんと見られる表示になることでしょう。 Water.cssはCSS製のオープンソース・ソフトウェア
コンピュータから出力される音声を取り込みたいと思うことがよくありますが、実は標準の機能にはありません。これは出力と入力を連結させる必要があり、そのためのソフトウェアが幾つかあります。 今回紹介するBlackHoleもそんなソフトウェアの一つです。設定が簡単で使いやすそうです。 BlackHoleの使い方 利用する際には音声の出力先としてBlackHoleを指定します。 後は音声を使う側のソフトウェアで、入力ソースをBlackHoleとするだけです。macOS用のソフトウェアとしてはSoundflowerが知られていますが、BlackHoleはより手軽そうな印象を受けました。 BlackHoleはC製のオープンソース・ソフトウェア（GPL v3）です。 ExistentialAudio/BlackHole: BlackHole is a modern macOS virtual audio
画像を加工する場合、画像編集ソフトウェアが使われます。そして加工したファイルを保存し、Web上にアップロードするでしょう。しかしこの場合、再度編集する際に備えて元ファイルは保存しておかなければなりません。また、同じ加工を何十枚もの画像に施すのも大変です。 そこで使ってみたいのがglfx.jsです。JavaScriptを使ってWebブラウザ上で画像を加工するソフトウェアです。 glfx.jsの使い方 元画像です。 マウスがあるところに渦巻きが描かれます。 ノイズ。 周囲を暗くします。 ぼかし。ぼかしの位置も変更できます。 マウスの当たっている場所を少し拡大します。 ドット変換。 昔の写真のように粗いドット。 glfx.jsを使うと元の画像は変えないままにフィルタリングをかけられます。画像全体だけでなく、マウスがある場所だけに施すことも可能です。フィルタリングの種類も多様で、様々な加工が施せる
チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。 今回紹介するuPlotはとにかく大量のデータを即座に表示したいというニーズにマッチしています。 uPlotの使い方 デモです。16.6万ものポイントをプロットしています。 最初の表示時のみ、データをオンラインで取得してきますが、二回目以降のアクセスではキャッシュが有効になるようです。データさえ取得されれば、実際の表示は瞬時に行われます。表示はもちろん、その後のスクロールもスムーズです。 uPlotはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 leeoniya/uPlot: An exceptio
スマートフォンやデジカメが高性能化し、作成される写真のサイズがどんどん大きくなっています。数MBで済めばいいほうで、場合によっては10MBを超える場合もあるでしょう。そうした写真を受け取る側のサービスもネットワークが逼迫してしまいます。 そこで使ってみたいのがCompressor.jsです。画像をJavaScriptで圧縮してくれるライブラリです。 Compressor.jsの使い方 デモです。約4割になっています。 別な例。1.32MBが440KBに削減されています。 Compressor.jsはJavaScriptで、様々な条件を指定して圧縮できます。画像幅や高さを変更することもできます。さらにiPhoneの写真でよくある向きの修正もしてくれます。Compressor.jsであらかじめ画像を小さくしておけばアップロードも素早く済むでしょう。 Compressor.jsはJavaScri
Webの表現力を補うために多くのデータビジュアル化ライブラリが存在します。グラフのようなものもあれば、さらに複雑なチャートライブラリもあります。アニメーションしたり、高速で表示されたりと様々な特徴があります。 G6はノード同士を連携し、それを表現するのを得意とするチャートライブラリになります。 G6の使い方 サンプルです。左側のコードが右側のチャートになります。 こんな複雑な描画も行えます。 ノードの繋がり方も様々に用意されています。 こんなペアを作るようなデザインも。 マインドマップ的な表現。 ノード同士の複雑なつながりを表現。 見せ方を変えた版。 ノードの繋がり方を複雑にしたもの。 ソーシャルグラフ的に使えます。 アニメーションもサポートしています。 バブルチャート風。真円でないところが面白いです。 電車と合わせたもの。アニメーションしながら表示されます。 G6は一般的なグラフライブラ
社内外のネットワーク機器をどうやって管理していますか。ExcelやGoogleスプレッドシートにまとめているという方は多いのではないでしょうか。しかし機器によって必要な情報が異なるので、まとめて管理するのは容易ではありません。 そこで使ってみたいのがNetdiscoです。自動的にデータ収集もこなしてくれるネットワーク機器管理ソフトウェアです。 Netdiscoの使い方 トップページです。 在庫一覧。 機器ごとのロケーション、IPアドレス一覧。 さらに機器詳細。 ネットワークインタフェース一覧。 モジュール一覧。 モジュールの在庫一覧。 ネットワークの接続図。 アドレス一覧。 VLAN。 利用しているポート一覧。 NetdiscoはSNMPを使ってデバイスを自動登録、アップデートする機能があるようです。レポート機能もありますが、データはPostgreSQLに入っていますので、自由に取り出して
最近は静的サイトフレームワークが多数出てきています。確かに便利なのですが、拡張していく中でダイナミックな部分が欲しくなることもあるでしょう。そんな時に別途APIサーバを立てるのも面倒です。 そこで使ってみたいのがSite.jsです。静的サイト開発から動的サイトまでこなせるJavaScriptフレームワークです。 Site.jsの使い方 こちらは最低限のWebサイト。 スタッツとしてアクセスを見られる機能もあります。 Site.jsはsiteコマンドを使ってベースになる静的サイトを作ったり、開発用サーバを立ち上げることもできます。ダイナミックな処理もJavaScriptで書きますが、コード量は最低限です。WebSocketも利用できます。 Site.jsはJavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 Site
iOS12から、iPhoneの操作を自動化するショートカット機能が追加されました。自作もできるのですが、簡易的なプログラミングであるために敷居が高く感じてしまっている人も多いでしょう。逆にプログラマにとってはGUIで面倒だと思ってしまっているはずです。 そこで使ってみたいのがShortcuts JSです。JavaScriptで書いて、ショートカット対応のファイルを生成します。 Shortcuts JSの使い方 例えばこんなコードになります。42/3を計算するものです。 // We'll use this later to reference the output of a calculation let calcVar = actionOutput(); // Define a list of actions const actions = [ comment({ text: 'Hello
デザインが苦手な人にとって、デザインテンプレートはとても便利な存在です。Bootstrap臭が、といわれても便利である以上使わざるを得ません。しかしクラスの使い方などを覚えるのは面倒です。 今回紹介するnew.cssはHTMLタグのみ、クラス指定が不要（クラスレス）なCSSフレームワークになります。 new.cssの使い方 タイポグラフィ。 リスト。 定義リスト。 引用とコード。 テーブル。 フォーム。 画像。 テーマでダークにも変えられます。 クリックで表示/非表示を変えられるようなギミックもあります。 new.cssは個人のプロフィールなどに最適とのことです。確かにこだわったスタイル設定をせずに見栄えのいい表示にしてくれるのは便利です。標準のHTMLタグのままで使えますので、これをベースにカスタマイズするのもよさそうです。 new.cssはCSS製のオープンソース・ソフトウェア（MIT
<file-attachment> element - GitHub製のWebアップロードコンポーネント MOONGIFT
最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。 今回紹介する elementはシンプルなファイルアップロード用Web Componentsになります。 elementの使い方 利用例です。Web Componentsとして定義されています。 </file-attachment><file-attachment directory input="upload"> <input id="upload" type="file" multiple/> </file-attachment> 表示です。 ファイルをドロップします。 elementはGitHubが開発
いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP（Minimum Viable Product）と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。 今回紹介するMVP.cssは、WebでMVPを作る時に使えるスタイルシートになります。素のHTMLでもいい感じになります。 MVP.cssの使い方 デモのHTMLです。これらはすべて素のHTMLタグのみです。 セクションもそうです。 テーブルやリスト。 フォームも綺麗な表示になります。 Webで簡単なデモを作る際に、素のHTMLのままでは残念な画面になってしまうでしょう。これでは検証する気にもなりません。MVP.cssを使うことで、素のHTMLであってもそれなりの表示になります。MVPの段階ではこれくらいのでも十分なデザインではないで
フローチャートを利用する場面は多いですが、作成するのが面倒です。スライドツールを使って作ることもできますが、メンテナンスが大変です。フローの途中に別なフローが入ったりすると、全体をずらすことになってデザインにも大きく影響します。 今回紹介するflowchart.funはそんな心配不要です。テキストで書くだけでフローチャートが生成されます。 flowchart.funの使い方 左側にエディタ、右側にその結果となるフローチャートが表示されます。 日本語も利用できます。 flowchart.funは四角いノードとそれを結ぶ線、そして線の上に注釈を付けられます。線種を変えたり、色を使ったりはできません。シンプルなフローチャートに向いているでしょう。結果はSVGで取得できるので、Webサイトやドキュメントに貼り付けるのも容易です。 flowchart.funはTypeScript製のオープンソース・
ただ地図を表示するだけでも面白いのに、それが立体になるとさらにワクワクします。これはGoogleアースなどで立体的な地図を見た時、誰もが感じた感情でしょう。立体化されることで、より体験がリアルに感じられます。 今回紹介するmap33.jsはWeb上で地図を立体的に表示してくれます。建物などではなく、等高線に基づいた立体化になります。 map33.jsの使い方 例です。位置情報は自分で指定します。3Dでぐりぐり動かせます。 位置情報を富士山に指定すればこの通り。 map33.jsは指定した位置情報に基づいて、その周囲の標高を取得して3Dマップに展開します。最初は位置情報を中心とした4×4のタイルですが、ダブルクリックするとその部分のタイルも追加されます。徐々に空間が埋められていく様子は面白いです。 map33.jsはJavaScript製のオープンソース・ソフトウェア（MIT License
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる MOONGIFT
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
Utopia - Reactのデザイン設計をスムーズしてくれるWebエディタ MOONGIFT
Falco - Webサイトのパフォーマンスを可視化するダッシュボード MOONGIFT
PDF-LIB - JavaScriptでPDFを作成、更新 MOONGIFT
)
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
css.gg - 500種類を超えるCSSアイコン集 MOONGIFT
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
copy-code-block - プログラミングコードをクリップボードにコピー MOONGIFT
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ MOONGIFT
DevCleaner - Xcodeのストレージ逼迫に悩んだら MOONGIFT
LastingPaper - マルチプラットフォームで利用できる電子書籍リーダー MOONGIFT
netprint.sh - コマンド一つでネットプリントへ文書登録 MOONGIFT
apkLeaks - APKファイルを解析してURLやシークレット情報を取り出す MOONGIFT
Broxy - Go製のHTTP/HTTPSプロキシ MOONGIFT
ffmpeg.js - Web上で使えるFFMPEG MOONGIFT
graboid - DockerクライアントなしでDockerイメージをダウンロード MOONGIFT
Sshwifty - Webブラウザ向けのSSH/Telnetクライアント MOONGIFT
sql.js - SQLiteをWASM化したWebデータベース MOONGIFT
lazydocker - CUIでDocker/Docker Compose管理 MOONGIFT
danfo.js - データを素早く手軽にビジュアル化 MOONGIFT
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
Water.css - シンプルなWebサイトをちょっと良い感じに MOONGIFT
BlackHole - オーディオの入出力を繋ぎ混む仮想オーディオデバイス MOONGIFT
glfx.js - JavaScriptで画像を加工 MOONGIFT
uPlot - 大量のデータを高速に描画するグラフライブラリ MOONGIFT
Compressor.js - Web上で画像を圧縮 MOONGIFT
G6 - ノードの繋がりを可視化するチャートライブラリ MOONGIFT
Netdisco - ネットワーク/ネットワーク機器管理システム MOONGIFT
Site.js - 静的/動的サイトまでこなせるJavaScriptフレームワーク MOONGIFT
Shortcuts JS - iOSのショートカット機能用ファイルを生成するJavaScript MOONGIFT
new.css - HTMLタグのまま使えるCSSフレームワーク MOONGIFT
MVP.css - 素のHTMLでもいい感じの表示に MOONGIFT
flowchart.fun - テキストで書いてフローチャートを生成 MOONGIFT
map33.js - Three.jsを使って3D地図を生成 MOONGIFT
news.yahoo.co.jp
hanamikke.com
tokusengai.com
cookpad.com
natalie.mu
shuko.px.ebb.jp