Yarn - 次世代のJavaScriptライブラリ管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptのライブラリ管理としてはnpmまたはBowerがよく使われています。npmを使っていて思うのはインストールにかかる時間がとても長いということです。ライブラリをインストールするのに長時間待たされてイライラした経験がある方は多いのではないでしょうか。 そこで使ってみたいのがYarnです。npmと同等に扱え、さらに高速でセキュアなライブラリ管理システムです。 Yarnの使い方 Yarn自体はnpmなどでインストールできます。インストールしたらnpmと同じように初期化をします。 $ yarn init yarn init v0.15.1 question name (test-yarn): question version (1.0.0): question descr
Presentation Annotator - スライドのメモ、注釈を記述 MOONGIFT
プレゼンテーションのスライドは作って終わりではなく発表が大事です。何を話せば良いか忘れないように各スライドにノートを記述しておく人は多いです。筆者もいつもそうしています。Keynoteなどはそのための機能を備えていますが、単なるPDFファイルではメモ書きする場所がありません。 そんなスライドに対する指摘やメモ書きを実現できるのがPresentation Annotatorです。 Presentation Annotatorの使い方 Presentation Annotatorの画面です。スライドが表示されつつ、右側にテキストエリアがあります。 メモを書くと、それがJSONになってとれるようになります。 Presentation Annotatorではサーバに残しておくような仕組みはありませんが、その仕組みを作ってしまえば誰かの注釈を表示できるようになります。サムネイルもあるので、次のスライ
moji - JavaScriptによる全角/半角の文字種変換 MOONGIFT
Webの入力フォームでイライラさせられるのは半角、全角の判定ではないでしょうか。データベースに入れる際にデータを統一したいだけで、利用者に対して苦痛を押しつけています。解決する手段など幾つもあるにも関わらずです。 今回はJavaScriptによる文字種変換ライブラリ、mojiを紹介します。 mojiの使い方 mojiはnpmでインストールできます。後は以下のように使います。 > var moji = require('moji'); undefined > moji('ＡＢＣＤ０１２３４').convert('ZE', 'HE').toString(); 'ABCD01234' > moji('ABCD01234').convert('HE', 'ZE').toString(); 'ＡＢＣＤ０１２３４' > moji('アイウエオ').convert('ZK', 'HK').toStrin
wzrd.in - Browserifyをサービス化 MOONGIFT
最近では多数のJavaScriptライブラリを使うのが当たり前になっています。そうした時に一つ一つのライブラリをscriptタグで読み込むのは大変であり、Browserifyを使って一つのファイルにまとめてしまうのが便利です。 今回はそんなBrowserifyをWeb上のサービスとして提供するwzrd.inを紹介します。 wzrd.inの使い方 wzrd.inの例です。以下のように読み込むライブラリを指定してPOSTメソッドで投げるとJavaScriptファイルが取得できます。 { "options": { "debug" : true }, "dependencies": { "concat-stream": "0.1.x", "hyperstream": "0.2.x" } } さらにWeb APIではGETによる取得もサポートしており、wzrd.in上で生成されるファイルをそのままs
Tesseract.js - なんと！Webブラウザでも動作するJavaScript OCRエンジン MOONGIFT
今後OCRのニーズは高まっていきます。世界中で写真が撮影されており、そこから意味を見いだす上でテキスト情報は欠かせません。ディープラーニングも使われていますが、テキストとして得られる情報はまだまだ多いでしょう。 そんなOCRをJavaScriptで実行してしまうのがTesseract.jsです。なんとWebブラウザベースでも動きます。 Tesseract.jsの使い方 英語の場合です。認識された部分に赤い枠が表示されます。 中国語。 ロシア語。 そして日本語にも対応しています。 残念ながら日本語は一部が正しく認識されませんでした。この辺りは学習によって磨かれる部分かも知れません。現在はコンピュータで書いた文字を認識する程度ではありますが、今後の開発に期待したいソフトウェアです。Webブラウザの場合は辞書をダウンロードしますが、サーバサイドでの実行であれば最初から準備しておけば良さそうです。
Hyperform - Webフォームの入力チェックライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。 今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperformを紹介します。 Hyperformの使い方 利用例です。エラーメッセージをテキストボックスの下に表示します。 パスワードのように二つの入力欄に応じたケースもサポートしています。 チェックボックスが有効な場合だけ入力チェックが行われます。 URLやメールアドレス、時間などのフォーマットに合わせた入力チェックもできます。 エラーメッセージはフォームの上に出すこともでき
Kap - Web技術を使ったスクリーンキャスト
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアのデモ動画を作成する際などにスクリーンキャストが便利です。昔はあまり良い選択肢が多くなかったのですが、今では多くのソフトウェアが存在します。Mac OSXであれば標準でインストールされているQuickTimeで録画することもできます。 今回紹介するKapはオープンソースのスクリーンキャストソフトウェアで、Web技術で作られているのが特徴です。 Kapの使い方 起動するとメニューバーに常駐します。そこからボタン一つで録画、停止を切り替えられます。 録画した動画をアニメーションGIFに変換しました。マウスカーソルが表示されるタイプです。 Kapは録画する範囲を指定できます。記録と停止がボタンのクリック一つで切り替えられるので、ごく簡単に使えます。複雑な機能はありませんが、多
Excel Builder.js - node製のExcelファイル生成ライブラリ MOONGIFT
業務システムを開発していて度々ニーズがあるのがデータのエクスポートです。多くの場合、CSVファイルで出力されますが、数値や日付の型も指定できませんし、ユーザビリティは高くありません。 そこで実現したいのがExcelフォーマットのサポートです。今回はnodeで実現できるExcel Builder.jsを紹介します。 Excel Builder.jsの使い方 Excel Builder.jsで生成した例です。 実際ここまでのコードを生成するのは行数も長いのですが、フィルタが予めついていたり、データが右寄せになっていたりします。数値はちゃんと右寄せになっていて、型も指定できるのが分かります。Excel Builder.jsを使えばこだわったExcelファイル出力も容易でしょう。 なお、JavaScriptで生成はしますが、Webブラウザ向けではなくサーバサイド（node）で使うライブラリになりま
Texture - シンプルながらも構造化された文章を作成できるWebワードプロセッサ MOONGIFT
最近のエディタはとてもリッチで高機能になるか、Markdownのように記法に沿うことでとても簡単に書けるかの二極化されているように感じます。しかし、Markdownではちょっと物足りず、とは言え簡単に書けるエディタが欲しいと思うのではないでしょうか。 今回はそんな可能性を見せるWebベースのワードプロセッサ、Textureを紹介します。 Textureの使い方 Textureの画面です。左側がエディタ、右側にアウトラインが出ます。 文字の装飾ができます。 見出しなどの設定ができます。 リファレンスという単位で情報をまとめられます。 情報に対してタグをつけるという仕組みになっています。 TextureのコンセプトはLaTeXのように開かれた、それでいて昔のワードプロセッサのようにシンプルに、です。多機能化が進んでいくと使わない機能がどんどん増えていきます。Textureはそのバランスを維持し
DPlayer - ニコニコ動画風弾幕動画プレーヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ニコニコ動画で一気に広まったのが動画の上にコメントを載せて表示するシステムです。コメントが多すぎると肝心の動画が見えなくなりますが、盛り上がっている中に自分もいるという動画を見るだけでない楽しみ方も生まれています。 そんなコメントシステム（弾幕コメント）をHTML5の動画プレイヤーとして再現するのがDPlayerになります。 DPlayerの使い方 コメントが増えるとこんな感じになります。動画の内容はもはやよく分かりません。 実際に流れている様子。まさにニコニコ動画のコメントのようです。 コメント入力欄です。 DPlayerを使えばHTML5のビデオタグを使ってニコニコ動画風にコメントが載せられるようになります。名前の通り、大量のコメントがあっても表示できます。動画サイトで使ってみ
ZooMove - 画像をスムーズに拡大するJavaScriptライブラリ
最近は画像の解像度が上がっており、撮影した写真のまま公開するととても巨大になってしまいます。そこで幅を縮めるのですが、あまり小さくすると折角の写真が見えづらくなってしまいます。 そこで必要に応じてズームするライブラリが便利です。今回はそんなライブラリのZooMoveを紹介します。 ZooMoveの使い方 最初の表示です。3つとも同じサイズです。 Image1はマウスオーバーするとちょっとだけ大きくなります。 Image2は一気に拡大されます。 Image3は枠を飛び出して拡大されます。 実際にマウスオーバーしているところです。 ZooMoveで見ると単にズームと言っても色々あるのが分かります。Image2は一気にズームするので、虫眼鏡のような使い方が良さそうです。Image3のズーム方法は面白いですが、使い方が難しいかも知れません。 ZooMoveはjQuery/JavaScript製のオ
optimize-js - JavaScriptのコードを最適化して初回実行を高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはWebブラウザで標準サポートされている唯一のプログラミング言語です。そのため書けるという人は多いのですが、自信をもってパフォーマンスの高いコードが書けると言い切れる人は少ないのではないでしょうか。 そんな方に使ってみて欲しいのがoptimize-jsです。既存のJavaScriptを最適化し、高速化するライブラリです。 optimize-jsの使い方 optimize-jsはnpmでインストールできます。 npm install -g optimize-js 後は処理対象のファイルを指定すると、標準出力で最適化されたコードが返ってきます。 optimize-js input.js > output.js 実際に試すと、括弧の付き方が変わっています。 $ dif
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
JavaScriptフレームワーク「Vue 2.0」がリリース
「Vue 2.0」は2016年4月に最初のプレビュー版が公開されており、最終的に8つのアルファー版、8つのベータ版、8つのリリース候補版を経て、今回の正式版リリースに至った。 「Vue 2.0」では、レンダリングレイヤをsnabbdomからフォークした軽量の仮想DOMで再実装しており、テンプレートコンパイラのコンパイル時の最適化の向上によって、レンダリングパフォーマンスを向上している。また、レンダリングレイヤの再実装にも関わらず、バージョン1.0で作成したテンプレートをわずかな変更のみで利用できる。さらに、ストリーミングやコンポーネントのキャッシュ時におけるサーバサイドレンダリングにも対応している。 vue-router、vuexといった公式のサポートライブラリやツールも、アップデートされてバージョン2.0をサポートしたほか、vue-cliが標準搭載された。また、バージョン1.0からの移行
debugger.html - Web技術で作られたデバッガー MOONGIFT
MozillaはPDFビューワーをpdf.jsにするなど、特殊な技術をなるべく使わずにWeb標準でWebの世界を体感できるようにする熱があります。 そんなMozillaが開発しているのが既存のデバッガーを置き換えるdebugger.htmlです。 debugger.htmlの使い方 デバッガーはWebブラウザからアクセスできます。 ブレークポイントも利用できます。node製のアプリケーションで使っています。 ステップ実行で深く追いかけることもできます。 コールスタックの確認も可能です。 まだデバッガーとして必要な機能すべてがあるわけではありませんが、将来的に既存の開発者ツールを置き換えるものになっていくのではないでしょうか。Firefoxだけでなく、Chromeのリモートデバッグもサポートされているので標準的に使えるデバッグツールになっていくかも知れません。 debugger.htmlはH
argon.js - Web技術を使ったARフレームワーク MOONGIFT
Holo Lensであったり、Magick LeapなどARグラスと呼ばれるデバイスが登場してきています。そうしたデバイスを使えば、リアルの上にデジタルな情報を載せるのが容易に実現できます。 今回紹介するオープンソースソフトウェアはargon.js、Web技術でARを実現するソフトウェアです。 argon.jsの使い方 argon.jsのサンプルアプリケーションです。iOSですが、SafariではgetUserMediaはサポートされていないので、その部分は別途情報を送っていると思われます。 Oculusなど向けに二つに分けられます。 WebGLで描画しているサンプル。 コンパスを使って北にNorthという文字を浮かべています。 空中に浮かぶ元素図。 配置を変更。こういったSF風の体験ができるのがARですね。 全天球画像のビューワーとしても使えます。 Googleストリートビューのビューワ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
TechCrunch | Startup and Technology News
DeNA Engineering - DeNAエンジニアのポータルサイト
