PWA Update Available - Service Workerの更新通知 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWAを適用することで、WebアプリケーションでネイティブアプリのようなUI/UXを実現できます。その一つとしてService Workerが挙げられます。Service Workerはクライアントサイドにキャッシュされ、アクセス時に差分があると更新される仕組みです。 しかし、更新はされるのですが、その場では適用されません。その場はキャッシュされているものが利用され、次回から新しいものに変わります。そこで使いたいのがアップデートを通知するPWA Update Availableです。 PWA Update Availableの使い方 WebサイトにアクセスするとService Workerの新バージョンがある旨通知されます。 もう一度アクセスすると表示されなくなります。 Servi
Vuetify Theme Generator - Vuetifyのカラーリングをビジュアルで設定
Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。 そこでせめて色だけでもカスタマイズしましょう。Vuetify Theme Generatorを使えばVuetify対応のカラーカスタマイズが簡単にできます。 Vuetify Theme Generatorの使い方 メイン画面です。左側で色を選択すると、プレビューに反映されます。 例えばプライマリカラーを紫にしました。 セカンダリーはブルー系に。 そんな感じでどんどん色を選んでいきます。 最後にエクスポートすればテーマカラーが生成されます。 Vuetify Theme Generatorを使うことでVuetify
LaRecipe - Markdownから格好良いドキュメントを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者に対して見栄えの良いドキュメントを提供する、これはDevRelにおいて大事な要素です。誰だって使いづらい、読みづらいドキュメントは嫌がるものです。デザインはもちろんのこと、文字サイズや見出しの付け方などによっても可読性は変わってきます。 そこで紹介したいのがLaRecipeです。Laravelを使い、Markdownから綺麗なドキュメントを生成してくれるソフトウェアです。 LaRecipeの使い方 デモです。左側に大見出し、中央がコンテンツ、右側にそのページのアウトラインが表示されます。 コードなども綺麗に表示されます。 アウトプットのデモデザインを入れている例。 ドキュメントの下にはコメント欄が用意されています。 左側の目次は非表示にできます。 検索も使えます。 LaRec
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
ONNX.js - Webブラウザでディープラーニングを実行 MOONGIFT
Web上でディープラーニングを行うなんて、といった意見は過去によく聞かれました。しかしすでにネットワークを組んで訓練も終わったモデルを使うのであればJavaScriptからでも有益に使えます。エッジでディープラーニングの処理ができるならばユーザにとってもメリットがあります。 そんな可能性を飛躍的に拡大してくれるのがONNX.jsです。Webブラウザ上で使えるONNXモジュールです。 ONNX.jsの使い方 写真からオブジェクトを判定するデモ。 フォークリフト、だと…。 手書き認識。精度はかなり高いです。 感情分析。Webカメラを使ってみたのですが精度は低かったです…。 ONNX.jsはディープラーニングエンジンの共通モデルフォーマットとなっているONNXを使って動作します。つまりTensorflowやCaffe2、nnablaなど多くのディープラーニングライブラリで作成できます。Webブラ
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
Vue-CRM - Vueを使ったCRMテンプレート
社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。 そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMです。 Vue-CRMの使い方 社内システムなので最初に認証があります。 ダッシュボードです。 注文一覧。 注文の編集画面。 顧客一覧。 顧客情報編集画面。 商品一覧。 商品編集画面。 アバウト画面。 Vue-CRMはあくまでもモックなので、これでシステムが動くわけではありません。後は内部的なデータを提供すればCRMとして動作します。CRMの基本的な画面は用意されていますので、自社システムを構築する基礎としていいのではないでしょうか。VueベースなのでAPIを作ることでシステ
js-green-licenses - JavaScriptプロジェクトのライセンスをチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました オープンソースの基本であり、肝なのがライセンスです。さらにライブラリを使っていたりすると、そのライセンスも関わってきます。ライセンスの誤った利用はビジネス上のリスクになり得ますが、それでもオープンソースを一切用いないという選択は困難になってきています。 もしNode.jsをプロジェクトに採用しているならば使ってみたいのがjs-green-licensesです。指定したパッケージのライセンスは利用ライブラリ含めてチェックしてくれます。 js-green-licensesの使い方 ローカルの場合は --local を指定します。問題がなければ All green! と出ます。 $ jsgl --local . Checking package.json... All green! 問題
Magic-Grid - ウィンドウ幅に応じてグリッドを自在に並び替え MOONGIFT
Webページをレスポンシブに対応させようと思うとグリッドベースのデザインを採用することが多いでしょう。デバイスの幅に応じて並べるグリッドの数を増減させることで表示をカスタマイズできます。多くのUIフレームワークがグリッドに沿ったUIを提供しています。 今回紹介するMagic-Gridはグリッドだけを提供するライブラリです。幅に応じてコンテンツを自在に変更してくれます。 Magic-Gridの使い方 実際に試しているところです。ウィンドウ幅を変更すると表示されるグリッドの並びが変わっているのが分かるでしょう。 Magic-GridはPinterest風な表示だけでなく、縦の長さが異なるコンテンツを並べて表示するのに向いています。一つ一つのブロック幅は変わらないのがいいでしょう。コンテンツの順番は維持されるので、左から右、そして下に見ていくようなコンテンツに最適です。 Magic-GridはJ
RunJS - JavaScriptコードを即座に評価してくれるマルチプラットフォーム対応のPlayground | ソフトアンテナ
今やWebになくてはならない技術となったJavaScriptですが、コードをちょと試してみるのに、Webブラウザの開発者ツールを使用するのは面倒くさいと感じる方もいるかもしれません。 本日紹介する「RunJS」はそのような方におすすめのJavaScriptのPlaygroundです。 入力したコードを即座に評価して結果を表示してくれるので、ライブラリの使い方やちょっとしたコードの実行結果を確認するのに大変便利なアプリとなっています。 Babelのトランスパイル機能を利用してTypeScriptをサポートしているほか、nodeモジュールのインポート機能やテーマの変更機能も搭載し、Vimキーバインドを使用することもできます。 以下使用法を説明します。 RunJSの使用方法 GitHubのリリースページから最新の実行ファイルをダウンロードしてインストールします。Macの場合.dmgファイルをダウ
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
Current Device - デバイス判定をスタイルシートに反映 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。 そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加してくれるライブラリです。 Current Deviceの使い方 macOSのデスクトップからアクセスした場合です。それぞれのデバイスに応じてハイライトが変わります。 DOMを見てみると、htmlタグにクラスが追加されています。 Current Deviceを使うことでクラスの有無によってデバイス判定ができるようになります。画面の向きも判定されます。JavaScrip
spacetime - JavaScriptの高機能時間ライブラリ MOONGIFT
JavaScriptで悩ましいのが時間の扱いではないでしょうか。Webブラウザごとによって異なるタイムゾーン、年月日を表示するのにもばらばらのメソッドを実行するなど面倒な操作が多いと感じます。 そこで使ってみたいのがspacetimeです。JavaScriptにおける日時関連の処理を手軽にしてくれるライブラリです。 spacetimeの使い方 タイムゾーンの切り替えを行う場合です。文字で指定できるので分かりやすいです。 var d = spacetime('March 1 2012', 'America/New_York') //set the time d.time('4:20pm') d.goto('America/Los_Angeles') d.time()//'1:20pm'
Netron - 機械学習のネットワークを可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 機械学習ではフォーマットの標準化が進んでいます。これまでTensorflowやCaffe、Chainerなど様々なソフトウェアがありましたが、生成されるモデルがONNXというフォーマットに統一されつつあります（他にもあるようですが）。 そんなONNXフォーマットのモデルをビジュアル化できるソフトウェアがNetronです。 Netronの使い方 ドロップしたところです。これは4か9を判別するモデルです。 拡大もできます。 パラメータも閲覧できます。 Netronを使うことでPythonのコードではなく、ビジュアル化されたモデルを通じて機械学習のネットワークを学ぶことができます。各ノードにおける出力の数も出ており、ネットワークの詳細が分かりやすくなるでしょう。 NetronはJavaS
Git History - ビジュアル的な差分表示
バージョン管理の肝と言えるのが差分表示でしょう。何か誤った更新があっても確認ができて、必要に応じて差し戻すこともできます。多くの場合、上下または左右に並べて比較できるようになっています。 今回はその新しい表示方式としてGit Historyを紹介します。ビジュアル的に優れた格好良い差分ビューワーです。 Git Historyの使い方 Git HistoryはGitHub上のファイルを開いた状態で、github.comをgithub.githistory.xyzにすると差分表示になります（公開されているファイルの場合）。その表示は以下のようになります。 上に出ているコミッターを切り替えると、アニメーションしながらその時のコードになります。 実際に試しているところです。 Git Historyは細かく見比べるときには使いづらいですが、雰囲気としてどれくらい変わったかを把握するには十分です。ある
ONNXがブラウザで動かせる「ONNX.js」誕生。Web×深層学習が一気に加速する | Ledge.ai
異なるディープラーニングフレームワーク間でモデルの相互運用を図る「ONNX（Open Neural Network Exchange Format） 」プロジェクトですが、この度ブラウザ、JavaScriptで動かせるONNX.jsが誕生しました。 ONNX（Open Neural Network Exchange Format） とは？これまでは、各フレームワークで使われるAIが学習したデータ形式（学習済みモデル）が異なるため、同じAIを使いまわしたい場合もフレームワークごとにデータを変換する必要がありました。それを解決しようというのがONNXプロジェクト。 ONNXプロジェクトは、MicrosoftとFacebookによる共同プロジェクトとして発足。その後日本のPreferrd Networksのフレームワーク「Chainer」もジョインするなど、注目を集めました。
jeelizWeboji - Webカメラでアニ文字風
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アニ文字はビデオチャットが普及しない日本ではあまり使われていませんが、VTuber的な遊びもできるので面白い技術です。しかし専用アプリを介してしか使えないので、利用のためには敷居が高い状態です。 そこで使ってみたいのがjeelizWebojiです。Webカメラの映像を認識し、アニメに反映してくれるソフトウェアです。 jeelizWebojiの使い方 狐の二次元キャラクターに反映するデモです。 口や目の動きが反映されます。 顔の向きも変わります。 Webカメラではなく動画も使えます。 サウスパークのキャラクターにも。これはSVGで作られています。 かなり首が回ります。 jeelizWebojiは顔をトラッキングしているので体の動きは反映されませんが、将来的には体の動きにも合わせられる
translate.js - クリック一つで別な言語に。JavaScriptで多言語対応 MOONGIFT
Webサイトを多言語対応する場合、その方法としては幾つかのやり方があります。まずディレクトリを分ける方法があります。もう一つはパラメータで出し分ける方法です。さらに最近ではJavaScriptでURLは共通の状態で翻訳する処理する方法も用いられます。 今回はそんなJavaScriptベースの翻訳処理を行うtranslate.jsを紹介します。 translate.jsの使い方 英語の場合です。 クリック一つでスペイン語に。 translate.jsではJavaScriptで多言語のキーファイルを作成しておきます。それを読み込むことで、該当する文字列を変換する仕組みです。やり方としてはWOVN.ioに近いのではないかと思いますが、キーワードをピックアップしてくれる機能はなさそうです。 translate.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Lic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechRepublic: News, Tips & Advice for Technology Professionals
IronDB - Webブラウザ上でのデータ保存を共通のAPIで提供