searchive - ローカルのPDFを検索
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ローカルにあるドキュメントを手早く検索したいと思ったことはないでしょうか。デスクトップ検索を使っても良いですが、検索結果の出方が思った形ではなかったりして、結局中身を見ながら探したりします。 もしPDFを探しているならば使ってみたいのがsearchiveです。特定ディレクトリ以下のPDFだけを検索できます。 searchiveの使い方 トップページです。 まずインデックス対象のディレクトリを設定します。複数ディレクトリ指定できます。 後は検索するだけです。日本語も利用できます。 searchiveは検索結果を出した後、フィルタを使って絞り込めます。NOTなどを使って複数キーワードを組み合わせた検索もサポートされていますので、目的のドキュメントに素早く辿り着けるでしょう。電子書籍など
rawson.js - JavaScriptでRAWデータを読み込み MOONGIFT
デジカメで撮影した写真は基本、JPEGで保存されます。しかし、よりカメラや写真にこだわりがある人は、JPEGの不可逆な変換を嫌い、撮影したデータをそのまま残したいと考えるものです。そのためにRAWデータが存在します。 通常、RAWデータをレタッチソフトウェアなどでJPEGに変換しますが、rawson.jsを使えばRAWデータのままWeb上で表示できます。 rawson.jsの使い方 RAWデータと言っても多様な形式があります。こちらは.NEFを表示したところです。 メタデータも確認できます。 rawson.jsが対応しているのは以下のフォーマットです。 jpeg .jpg .jpe .png .3fr .ari .arw .bay .crw .cr2 .cap .dcs .dcr .dng .drf .eip .erf .fff .iiq .k25 .kdc .mef .mos .mrw
jeelizFaceFilter - Webカメラで使える顔認識&トラッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。 スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterです。 jeelizFaceFilterの使い方 jeelizFaceFilterは多数のデモを用意しています。顔の部分に立体的なブロックを表示。 顔を横に向けると表示角度も変わります。 ダースベーダーになるデモ。音楽も流れます。 アノニマス。 犬。 蝶蝶が飛び回ります。 自分の上に雨雲ができ、雨が降ります。 お金のフレームも表示。 お菓子メーカーともコラボ。ソーシャ
nanoJS - jQueryの代わりに使えるDOM操作ライブラリ
jQueryはもう使いたくないと思いつつ、使った方が楽になるという場面は多いです。Ajaxもその一つですが、Superagentやaxiosといった代替ライブラリを使うこともできます。そしてもう一つはDOM操作です。 DOM操作を素のJavaScriptだけで書こうと思うと若干面倒です。そこで使ってみたいのがnanoJSです。 nanoJSの使い方 nanoJSはjQuery風のDOM操作だけを提供するライブラリです。書き方はjQueryのままです。 $(".someClass").css("background-color:green;").html("Hello World"); $('#c').animate('2.3', '1.2','0','1','1','0','0', '0','0','1').css('background-color:red').text('Hello')
vuegg - Vue.jsプロジェクトの画面を作成 MOONGIFT
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。 そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。 vueggの使い方 メイン画面です。右側に並んだツールを左側のエディタにドロップします。 ドロワーの設定もできます。 vueggで作った内容はVue.jsのプロジェクトとしてダウンロードができます。プロトタイプ開発にも使えますし、画像などを適用すれば精度の高いデザインツールとしても使えるでしょう。コンポーネントも数多く用意されているので、多くのWebサービスで使えそうです。 vueggはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 vueg
layerJS - レイヤーを使ったUIコンポーネントフレームワーク MOONGIFT
Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。 今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパララックスなどを表現します。 layerJSの使い方 layerJSのデモです。スライダー。 サムネイル化されたコンテンツが表示されるデモ。縮小した時に最後に表示されていたコンテンツがそのまま表示されているのが面白いです。 パララックス。 メニュー。コンテンツが変化してもメニューやヘッダーと言ったレイヤーは残されます。 モーダル。 Webではレイヤーという考えはあまり使われませんが、よくよく考えてみればレイヤー化することで表現力が向上しそうです。レイヤーを差し替えて表示したり
YubinBango - 郵便番号検索の決定版
郵便番号検索は多くのWebサイトで実装されています。しかし使い勝手の良いところは限られます。ポップアップが出たり、画面全体を再読込したりするものは、とても使い勝手が良いとは言えません。 今回紹介するYubinBangoは郵便番号検索のユーザビリティを極めたソフトウェアです。 YubinBangoの使い方 デモです。郵便番号を入力するとすぐに住所が反映されます。コードは1行も書きません。 分割することもできます。こちらもまた、コードは不要です。 YubinBangoはJavaScriptファイルを読み込むだけ、後はクラス名を指定して反映される内容を決めるだけで使えます。データは郵便局の提供するデータを自動で反映しているとのことで、市区町村の統廃合も問題ありません。 YubinBangoはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 YubinBango
FromJS - Webアプリケーションの理解を容易にするChrome機能拡張 MOONGIFT
JavaScriptで大型なWebアプリケーションが開発されるのに合わせて、全体を把握するのが困難になってきています。表示されている文字がサーバサイドから出力されているものでない場合、どこで作られたデータなのかを追いかけるのも大変です。 そこで使ってみたいのがFromJSです。Webアプリケーションの内容を把握するのに役立つツールです。 FromJSの使い方 中央にあるのがFromJSです。DOMエレメントについて表示されます。 そして表示されている文字を選択すると、それがどこで生成された文字なのかが一目で分かります。 FromJSはすべてのWebサイトで使える訳ではなく、かなり限定されたWebアプリケーションでの利用になるようです。その文字がJavaScriptの変数によるものなのか、localStorageによるものなのかなど、出所が分かるだけでもデバッグがかなり容易になることでしょう
React Velocity - Reactアプリのコンポーネントを作成
Reactで開発を進める際に、まず画面全体の設計を行うのが大事です。全体を囲むコンポーネント、そして画面の各要素を構成するコンポーネントと順番に作っていきます。それをやらずに開発を進めると後で修正が大変でしょう。 そこで使ってみたいのがReact Velocityです。コンポーネント設計を行い、スケルトンコードを生成します。 React Velocityの使い方 例です。Webブラウザ上で自由に画面を構成できます。 Redux版。 作成した画面構成をダウンロードすると、こんな感じにファイルが生成されます。 React Velocityはあくまでもスケルトンコードで、イベントなどが実装される訳ではありません。とは言え、まずはReact Velocityで画面構成を作っておけば、コンポーネント間の関連も可視化されるので分かりやすくなるでしょう。 React VelocityはJavaScrip
TensorFlow.js - Webでも機械学習。JavaScript版TensorFlow MOONGIFT
TensorFlowと言えば機械学習を行うソフトウェアで、多くのサービスやソフトウェアの基盤に使われています。環境を整えるのは若干大変ですが、Dockerイメージもあります。GPUなどのハードウェアさえ用意できれば、利用するまでの敷居はずいぶん低くなっています。 そんなTensorFlowをWebブラウザベース、WebGLで使えるようにしたのがTensorFlow.jsです。 TensorFlow.jsの使い方 こちらはデモです。絵文字に合ったものを見つけてカメラに写すというゲームです。 例えばキーボードの絵文字の場合。認識精度は高いです。 トレーニング機能付きのパックマン。そもそも操作が難しかったりします。 3つのポージングに合わせて出力が変わるものです。サンプルはカメラから一気に取得します。 それぞれの状態に応じて認識率が変わっていくのが分かります。 できあがったモデルを使って動画を作
tracking.js - 画像/動画をトラッキング MOONGIFT
写真はテキスト以上に情報が含まれています。人物を撮影しただけでも、そこには背景があったり、洋服があったり、天気なども映し出されます。しかし、そのためには写真から情報を収集する技術が必要です。 tracking.jsはWebブラウザ上で人やオブジェクトを認識するJavaScriptライブラリになります。 tracking.jsの使い方 様々なデモが用意されています。まずは顔認識。 マウスオーバーで情報を出すこともできます。 顔認識に加えて目鼻の場所を特定するデモ。 顔の向きで見ている方向を変更するデモ。VRなどで使えそうです。 色を認識して、その色で枠を表示します。 動画の色を認識。 イラストの特徴点を認識。 人でもできます。 二つの画像を並べたときに（向きが異なる状態）、同じ場所を見つけ出します。 人でもできます。 tracking.jsは画像はもちろん、Webカメラや動画を使ってリアルタ
Spectrum - 複数参加できるオンラインコミュニティ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 一言でコミュニティといっても様々な形式があります。オフラインのコミュニティもあれば、オンラインもあります。チャットのようにフローな会話もあれば、フォーラムのようなストック型もあるでしょう。 Spectrumはオンラインコミュニティを形成するソフトウェアで、フローとストックの間にあるような作りになっています。 Spectrumの使い方 ログインしました。まずはコミュニティを探します。 すでに多数のコミュニティが形成されています。この中から気になるものを購読します。 ジョインすると、ダッシュボードのような画面でフォーラムの更新情報をチェックできます。 ユーザプロフィール。ここからメッセージを送れます。 SpectrumはFacebookグループだけ抽出したようなソフトウェアかも知れませ
QR Code.js - QRコードを生成 MOONGIFT
QRコードはスマートフォンとの相性がとても良いです。URLであったり、文字を送る際にカメラで撮影するだけで良いというのはとても手軽です。技術利用が無料で行えるのもとてもありがたいことです。 そんなQRコードをJavaScriptで生成するのがQR Code.jsになります。 QR Code.jsの使い方 例えばMOONGIFTのURLの場合。 色を変えることもできます。 QR Code.jsはJavaScriptでダイナミックにQRコードを生成するので、様々な場面で使えそうです。同様な仕組みとしてGoogleグラフによるQR出力がありますが、QR Code.jsはオフラインでも使えますし、画像生成用のサーバを用意する必要もないのが手軽です。 QR Code.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 davidshimjs/qrcodejs:
FilePond - 多機能で格好良いファイルアップロードフォーム MOONGIFT
HTML5でファイルアップロード機能も多少改善されました。ファイルのドラッグ&ドロップなど機能は増えているのですが、それを使いこなすためにはコードを書かなければなりません。 そこで使ってみたいのがFilePondです。簡単に設置できて、格好良いファイルアップロードフォームが作れます。 FilePondの使い方 使っているところです。ファイルをドロップするとアニメーションが走ったり、ボタンをクリックしてアップロードを開始できます。 複数ファイルにももちろん対応しています。プレビューもできます。 プロフィール画像のようなデータのアップロードにも。 FilePondを使うと複数ファイルに対応したファイルアップロードフォームが簡単に作成できます。ファイルごとにアップロード処理を行えて、サムネイル表示もできるなどユーザビリティも高そうです。 FilePondはJavaScript製のオープンソース・
ブラウザで機械学習が実行できるようになる「TensorFlow.js」が登場
Googleは2018年3月30日に開かれたTensorFlow Dev Summit 2018にて、オープンソースの機械学習ライブラリ「TensorFlow」をアップデートし、ウェブブラウザで実行できる「TensorFlow.js」や、スマートフォンやRaspberry Piなど小さいパワーのマシンで実行できる「TensorFlow Lite」などを追加したと発表しました。 Introducing TensorFlow.js: Machine Learning in Javascript https://medium.com/tensorflow/introducing-tensorflow-js-machine-learning-in-javascript-bf3eab376db TensorFlow Developer Summit 2018の様子は以下から見られます。なお、全編で8
jdetects - 開発者ツールの起動を検知
現在、モダンなブラウザでは開発者ツールを提供するのが当たり前になっています。開発者としては必須の機能ですが、サイト運営者にとっては見られたくない情報があるかも知れません。 そんな時に使ってみたいのがjdetectsです。開発者ツールが開いているかどうかでイベントを実行できるJavaScriptライブラリです。 jdetectsの使い方 デモです。開発者ツールを開くとon/off表示が変わっているのが分かります。 jdetectsを使うことで開発者ツールを開いたタイミングで特別なメッセージを流したり、画面上で何らかのイベントを実行できます。Googleアナリティクスのイベントを通知してみても面白いかも知れません。 jdetectsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 zswang/jdetects: Detect if DevTools is
FileReader.js - Web上でファイル/クリップボードを簡単に扱う MOONGIFT
HTML5で便利になったAPIの一つがファイルの読み込み、FileReaderではないでしょうか。しかし非同期処理で行うものが多く、実装が若干面倒なイメージがあります。さらにこのデータを扱うのはファイルボックスまたはファイルのドラッグ&ドロップと二種類あるのも面倒です。 そこで使ってみたいのがFileReader.jsです。ファイルに加えてクリップボードまで共通のインタフェースで扱えるようになります。 FileReader.jsの使い方 FileReader.jsのデモです。ファイルボックス、ドラッグ&ドロップ、クリップボードを扱えます。 デモ画面 例えばファイルをドロップするUIの場合。データの受け取り型を指定しておけば、後はファイルが送られてくる仕様です。 FileReaderJS.setupDrop(document.body, { readAsDefault: "DataURL",
Transcrypt - Webブラウザ上でPythonを動かす
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムを作るときに切り離せないのがJavaScriptです。Webブラウザ上で動くプログラミング言語として現状はJavaScriptしか動作しないので、必ず習得する必要があります。しかし、サーバサイドとクライアントで別な言語を使うのは不便です。 そこで使ってみたいのがTranscryptです。Python 3.6相当の記述が可能なJavaScript言語代替です。 Transcryptの使い方 TranscryptでjQueryを使った場合のコード例です。 __pragma__ ('alias', 'S', '$') def start (): def changeColors (): for div in S__divs: S (div) .css ({ 'color':
just-dashboard - 設定ファイルからダッシュボード用のグラフを生成 MOONGIFT
管理画面で必要な機能と言えばデータをメンテナンスする機能と、主なKPIやシステムのトラフィックを確認できるグラフ機能です。しかしメンテナンスは簡単に実現できてもグラフは意外と面倒で後回しになったり、CSVでダウンロードしてExcelで作るなんて状態になっているのではないでしょうか。 そこで使ってみたいのがjust-dashboardです。設定ファイルとデータの二つでダッシュボードを生成します。 just-dashboardの使い方 just-dashboardの設定ファイルです。YAMLまたはJSON形式で記述します。 dashboard "Food": - h1 text: Food - h2 text: By caloric content - 3 columns: - rows: - h3 text: Bananas - pie chart: { "columns": [ ["Pro
nexe - nodeスクリプトをラッピングして実行ファイル化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeを使えばJavaScriptでローカルで動くコマンドなどを作ることが出来ます。これはとても便利で個人的にはよく使うのですが、そのためには予めnodeがインストールされていなければなりません。 もちろんバイナリでも配布されているのですが、インストールの手間は初回実行には相当大きいと言えます。そこで使ってみたいのがnodeスクリプトを実行ファイル化するnexeです。 nexeの使い方 nexeは他の同じようなソフトウェアと同じく、nodeの実行エンジンをスクリプトと一緒にするタイプのソフトウェアです。 コンパイルはこのように行います。 nexe -i ./ -o ./hello-world.nex -r 0.8.18 コンパイルのためにnodeのコンパイルまで行うので初回は時間
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
