Graphtage - JSON/HTML/CSVなどに特化した差分ツール MOONGIFT
開発に差分表示はつきものです。コードであれば通常のdiffで問題ありませんが、バイナリになると話が違います。ファイルフォーマットに合わせて最適な差分表示ツールを選ぶ必要があります。 しかしテキストの中でも最適なツールを選んだ方が良いケースは良くあります。そんな時にはGraphtageを使ってみましょう。 Graphtageの使い方 JSONの差分をHTML出力した例です。 標準出力の場合。 Graphtageが対応しているのはJSONやJSONS、XML、HTML、YAMLそしてCSVとなっています。JSONやXML、HTMLは改行をなくしても同じ内容になるので、Graphtageが活躍することでしょう。 GraphtageはPython製のオープンソース・ソフトウェア（LGPL）です。 GitHub - trailofbits/graphtage: A semantic diff uti
Wormholy - シェイクジェスチャーでネットワークログを表示 MOONGIFT
iOSアプリを作っていて、トラブルになりやすいのがネットワークです。送信したデータと受信したデータが正しいのかデバッグする機会は多いです。そこでプロキシソフトウェアを使って解析したりするでしょう。 そんな時に使ってみて欲しいのがWormholyです。ネットワークリクエスト内容をログとして確認できるソフトウェアです。 Wormholyの使い方 こちらはデモです。タップすると、それぞれのリクエストを行います。 そしてシェイクジェスチャーでログを表示します。 一つ一つのリクエストについて、細かく情報が確認できます。 Wormholyは既存のアプリに簡単に仕込むことができ、UIなどを作る必要もありません。シェイクジェスチャーをすれば良いだけなので、シミュレータでも実機でも使えます。ごく手軽にネットワークの情報を確認できるライブラリです。 WormholyはSwift製のオープンソース・ソフトウェア
RTS - レスポンシブにテキストサイズを変える
レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。 そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。 RTSの使い方 Bootstrapのサイトに組み込んだ例です。 ウィンドウ幅を変更するとテキストサイズも変わります。大きすぎず、ウィンドウに合わせた最適な大きさになります。 別なデモです。こちらはSCSSのMix-inを使っているようです。 幅を変更した時の表示です。 RTSはウィンドウ幅のイベントをJavaScriptで拾って処理を行っています。CSSだけですべてが解決できる訳ではないですが、ユーザの可読性のために導入検討する価値はありそうです。 RTSはCSS製のオープンソース・ソフトウェ
rrweb.io - Webサイトの操作を記録&再生 MOONGIFT
Webサイトでユーザがどんな操作を行ったのかを解析することによって次の改善策が生まれることがあります。また、ゲームプレイのように後で見返したり、リプレイしてみたいケースもあります。録画しておくことで後で振り返れるようになります。 任意のWebサイトにおいてセッションを記録できるライブラリがrrweb.ioになります。 rrweb.ioの使い方 Webフォームの入力はもちろん、ウィンドウのリサイズも記録されます。 そして保存したセッションを再生できます。1〜8倍で再生可能です。 Ajaxを使うような、後からコンテンツが追加される場合も再生できます。 こちらはゲームの例です。 一倍でも高速に再生されます。 rrweb.ioを使って操作内容を記録し、後はその内容をサーバ上に保存することで、いつでも再生が可能になります。プライバシーの問題もあるので、ユーザの了承は必要ですが、ゲーム動画のようにユー
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
tiptap - Vue.js向けのリッチなWYSIWYGエディタ MOONGIFT
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。 もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多機能で使い勝手が良さそうなエディタです。 tiptapの使い方 通常の表示です。上にツールバーがある一般的なWYSIWYGエディタです。 文字を選択してフローティングメニューを出す機能もあります。 新しい行に入ったタイミングでツールバーを下に表示させます。 画像の挿入。ドラッグ&ドロップでできます。 文字列を選択した時にツールバーを出します。普段は隠れています。 Todoリスト。 Twitterのような @ でメンション相手を出す機能。 Markdown記法をビジュアル化し
screensaver-js - HTML5/JavaScriptでWindows/macOS用のスクリーンセーバーを作成 MOONGIFT
スクリーンセーバーを自作するのは難しいことではありません。最近はHTMLで作成もできるようになっているので、SVGやCanvasを使ったり、動画を流すこともできます。十分手軽に作成できます。 今回紹介するscreensaver-jsはHTML5/JavaScriptを使い、Windows/macOS両方に対応したスクリーンセーバーを作成できるソフトウェアです。 screensaver-jsの使い方 作成例です。これはmacOSでのプレビュー。 screensaver-jsはWebKitをレンダリングエンジンとして使っています。そしてコマンド一つでWindows/macOSそれぞれに対応したスクリーンセーバーを生成してくれます。HTML自体はWebブラウザで表示確認できるので、OSの違いを気にせずに作れるでしょう。 screensaver-jsはnode/JavaScript製のソフトウェア
translate.js - クリック一つで別な言語に。JavaScriptで多言語対応 MOONGIFT
Webサイトを多言語対応する場合、その方法としては幾つかのやり方があります。まずディレクトリを分ける方法があります。もう一つはパラメータで出し分ける方法です。さらに最近ではJavaScriptでURLは共通の状態で翻訳する処理する方法も用いられます。 今回はそんなJavaScriptベースの翻訳処理を行うtranslate.jsを紹介します。 translate.jsの使い方 英語の場合です。 クリック一つでスペイン語に。 translate.jsではJavaScriptで多言語のキーファイルを作成しておきます。それを読み込むことで、該当する文字列を変換する仕組みです。やり方としてはWOVN.ioに近いのではないかと思いますが、キーワードをピックアップしてくれる機能はなさそうです。 translate.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
JavaScript Visualizer - JavaScriptの実行内容を可視化 MOONGIFT
プログラミングコードはコンピュータ上で実行されるので、実行を開始して終わるまでが一瞬です。そのため、どう動いているのかを確認するのは困難で、初学者にとっては魔法のように感じてしまうでしょう。 そこで使ってみたいのがJavaScript Visualizerです。JavaScriptをステップ実行してその内容を把握できます。 JavaScript Visualizerの使い方 実行中です。 実行速度が指定でき、左側に書いたコードを実行してくれます。 thisの内容など変数も確認できます。 JavaScript Visualizerを使うことでJavaScriptのコードがどう実行されているのかが分かりやすくなります。処理の順番が分かればデバッグもしやすくなるでしょう。プログラミング初級者にもお勧めなソフトウェアです。 JavaScript VisualizerはJavaScript製のソフト
redcycle-map - 非公式赤チャリマップ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 俗に赤チャリと呼ばれるシェアバイクが日本でも広まってきています。元々横浜ではじまった仕組みですが、東京23区内でも対応している場所が増えています。どこでも乗り捨てられる仕組みではないので、自転車置き場になるポートマップが重要です。 公式でもポートマップは提供されていますが、非公式ながらもredcycle-mapの方が情報が多く、便利です。 redcycle-mapの使い方 Googleマップ上で表示できるようになっています。 ポートごとに現在何台止まっているかが分かります。 自転車のないポートはグレーで表示されます。乗ろうと思って、そのポートへ行ってみたら自転車がなかったというのはショックが強いです。公式のポートマップではこの情報はないので、redcycle-mapを使って事前に知
Treeify - JSONをtreeコマンド風に表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました treeコマンドはエンジニアであれば誰しもが一度は使ったことのあるコマンドではないでしょうか。ディレクトリ構成をCUIで分かりやすく表示してくれます。多段の階層構造を表現するのに適した手法と言えます。 そんなtreeコマンド風にJSONを表示してくれるのがTreeifyです。 Treeifyの使い方 元のコードです。 var treeify = require('treeify'); console.log( treeify.asTree({ apples: 'gala', // ├─ apples: gala oranges: 'mandarin' // └─ oranges: mandarin }, true) ); これを実行すると、以下のように表示されます。treeコマンド
page-transitions-travelapp - ネイティブレベルのUXを体感できるWebアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。 そんなWeb技術を駆使して作られたのがpage-transitions-travelappです。旅行アプリのデモで、ネイティブ風の画面遷移が魅力となっています。 page-transitions-travelappの使い方 実際の動きについてはこちらのデモを見るのが良いでしょう。表示もまるでネイティブアプリです。 別な画面に遷移したときの動きに注目です。 デスクトップもサポートされています。 デスクトップの場合はサイドバーが表示されます。 デスクトップ
ml5js - もっと簡単にWeb上で機械学習を
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 機械学習を試してみたいと思うエンジニアは多数いるでしょう。しかし、その環境を作ったり、データ整備するのに時間がとられるとあって、躊躇してしまっている人も多いはずです。 そんな方にお勧めなのがml5jsです。Webブラウザ上で動かせますので、開始までの敷居は低いはずです。 ml5jsの使い方 デモが幾つもあります。まずは写真に写っているオブジェクト（今回はコマドリ）を特定するデモ。 Webカメラの映像からでも読み取ります。 携帯電話も認識します。iPodと出ることもありました。 テキストを生成するデモ。 記述した文脈を読み取りつつ、その後の文章を生成するデモ。 元の写真を別な写真風に描くデモ。 雰囲気がぐっと変わります。 もちろんこれもWebカメラの映像でも使えます。 顔などの特徴点
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン MOONGIFT
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
Blotter.js - 型破りなテキストアニメーションを実現 MOONGIFT
Webでエフェクトされたテキストを表示しようと思うと画像を使うのが一般的です。JavaScriptでもできないことはないですが、簡単なものに限定される雰囲気があります。しかしJavaScriptならばアニメーションも行えるメリットがあります。 そこで知っておきたいのがBlotter.jsです。使いどころは限られそうですが、特殊なエフェクトを行えます。 Blotter.jsの使い方 デモです。こんな派手なエフェクトができます。 デモ アニメーションしたり、マウスに追従できます。 マウス追従 アニメーションの例です。うにょうにょと動いています。 アニメーション 他にも色々なパターンがあります。 他のアニメーション例 Blotter.jsはかなり特殊なエフェクトなので、使える場面は限られるかも知れません。しかし、ちょうどマッチする場面もあるのではないでしょうか。アニメーションGIFを使ったり、C
lz-string·高速さが売りのJavaScritp圧縮/解凍ライブラリ MOONGIFT
HTML5によってローカルストレージが使えるようになり、キャッシュ以上に速いデータの読み書きが実現できるようになっています。しかし大きな欠点があります。それはストレージが1ドメイン5MBまでに限定されることです。 もっと大きなサイズで保存したい、そう思うこともあるかと思います。テキストデータであれば検討して欲しいのがlz-stringです。テキストデータを圧縮できるJavaScriptライブラリです。利点は圧縮率よりも処理の高速さにあります。 デモです。lz-stringの場合、1msで60 byte（48%）まで軽減しています。対するLZMAは36msで78 byteとなっています。 コンソールで試しています。 ちゃんとデコンパイルすると元の文字列が得られているのが分かります。 日本語でのテスト。696 byteが605 byte になっています。 試した限りでは、短い文字に対して使うと
Via.js - Web WorkerでもDOMを利用可能に MOONGIFT
JavaScriptはシングルスレッドなので、重たい処理を実行するとWebブラウザが固まってしまいます。それを防ぐため、Web Workerというバックグラウンドで処理を実行するAPIがあります。 しかしWeb WorkerではDOM操作ができないという欠点があります。それを解決してくれるのがVia.jsです。 Via.jsの使い方 デモです。ボタンを押すとWeb Audio APIを実行します。 その他、DOM操作もできます。 const document = via.document; const button = document.createElement("button"); button.textContent = "Click me"; button.style.fontWeight = "bold"; button.addEventListener("click", ()
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
js2flowchart.js - JavaScriptのコードをフローチャート化 MOONGIFT
複雑なコードはバグを含みやすくなります。インデントは浅い方が良いですし、関数は短く機能は単機能になっている方が良いでしょう。そうした複雑性の基準はどうやって設けたら良いでしょうか。 一つのアイディアとして使えそうなのがjs2flowchart.jsです。JavaScriptのコードをビジュアル化し、フローチャート化してくれます。 js2flowchart.jsの使い方 左側がコード、右側がそれをビジュアル化したチャートになります。 コードを記述すると、それがリアルタイムに反映されます。 フローチャートがあると、より内部実装の理解が進むかも知れません。そして、それによってどれくらい複雑な処理を行っているかも分かるでしょう。複雑な処理を分割したり、関数化していくことで、よりシンプルな実装が実現できるようになるでしょう。 js2flowchart.jsはJavaScript製のオープンソース・ソ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
virtual-scroller - 長大なリストもサポートするスクロールライブラリ MOONGIFT