PDFAnno - WebベースのPDF注釈ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PDFは基本的に編集できないようになっているので、何か指摘したい時には注釈やコメントという手段になります。macOS標準のプレビューではPDFに注釈を付ける機能があったり、多くのソフトウェアにそういった機能があります。 今回紹介するオープンソース・ソフトウェアはPDFAnno、WebベースのPDF注釈ソフトウェアです。 PDFAnnoの使い方 メイン画面です。 文字を選択して注釈をつけます。 コメントした文字が赤く表示されています。 選択するとハイライトされます。 他にも線を引くこともできます。 注釈の一覧もとれます。 さらに注釈同士のリンクもできます。 参照やリンクなど注釈同士の説明が可能です。 PDFAnnoを使えば任意のPDFに対して注釈が入れられます。データをサーバサイドに
ts2c - JavaScript/TypeScriptのコードをCに変換 MOONGIFT
JavaScriptはWebブラウザで動作する保証がある唯一のプログラミング言語です。さらにnodeによってサーバサイドやデスクトップなどでもJavaScriptでソフトウェアが作れるようになっています。 今回紹介するのはts2c、JavaScriptやTypeScriptをCのコードに変換するソフトウェアです。 ts2cの使い方 例です。 さらにfor文を追加してみます。 生成されたコードをgccでコンパイルすると、ちゃんと結果が表示されます。 $ ./a.out Hello world!a Hello world!b Hello world!c もちろんすべてのコードが問題なく動くわけではありませんが、JavaScriptの中でも特に速度が求められる時にはCで実行するという選択肢ができそうで面白いです。ぜひコードを書いて試してみてください。 ts2cはTypeScript製のオープンソ
Frame Player - 画像を使った動画風プレイヤー MOONGIFT
Web上で再生できる動画と言えばMPEG4やWebM、さらにアニメーションGIFがあげられます。基本的に流れている動画はそのまま使われ、制御できるのは再生や音量くらいとなっています。 もっと細かく制御できる動画（のようなもの）を使いたい時にはFrame Playerを使うというテクニックがあります。 Frame Playerの使い方 こちらがプレイヤー。一見すると普通に見えます。 再生しているところです。じつは画像です。 画像なのでリアルタイムの変換もできます。こちらはセピア版。 こちらは色の反転。 さらに動画の形も自由です。 Frame Playerは画像をパラパラ漫画のように差し替えて動画のように見せます。そのため、音声は出ません。再生と停止ができる程度ですが、開発が進めばもっと多機能になっていくことでしょう。動画やアニメーションGIFとはまた違う魅力が提供できそうです。 Frame
Contour - 多彩な種類に対応したWeb用グラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。 そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあったものを選びましょう。今回はContourを紹介します。 Contourの使い方 まずごく基本的な折れ線グラフ。 D3.jsと組み合わせた例。 曲線グラフ。 棒グラフ。 積み上げ型の棒グラフ。 横棒グラフ。 横でも積み上げ型。 エリアグラフ。 円グラフ、ドーナツグラフもあります。 シリーズ化した円グラフ。 散布図。 散布図＋トレンド。 地図。 アメリカの地図。 CS
Propeller - Bootstrapベースのマテリアルデザインテンプレート
ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。 今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropellerです。 Propellerの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ボタン付きのモーダル。 ドロップダウン。 フォーム。 リスト。 さらにカスタマイズしたリスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 サイドバー。 タブ。 テーブル。 カード。 Propellerはマテリアルデザインになっていますので単純なデザインだけでなく、クリックやマウ
fmt-obj - JSONを見やすく整形
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web APIを使うのが当たり前になり、送受信されるデータフォーマットとしてJSONがよく使われるようになっています。JSONはXMLに比べると冗長性がない分、分かりやすいのですが、それでも人が見て内容がすぐに分かるというものではありません。 そこで使ってみたいのがfmt-objです。JSONを分かりやすい形に整形してくれます。 fmt-objの使い方 fmt-objを使う際にはJSONをそのまま渡すだけです。 const format = require('fmt-obj'); console.log(format(json)); そうすると以下のようにキーの部分がちゃんと揃って分かりやすい形で表示されます。 $ node test.js message: "hello worl
OpenPGP.js - JavaScriptで使えるOpenPGP MOONGIFT
今、セキュアに情報を管理しようと思うと採用したいのが秘密鍵/公開鍵ではないでしょうか。ビット数によりますが、十分に長ければおいそれと解除されることはないでしょう。問題は一般ユーザに普及していないことです。 もしWebサービスで導入したかったらOpenPGP.jsを使ってみてはいかがでしょう。JavaScript上でOpenPGPが使えます。 OpenPGP.jsの使い方 面白いのは鍵の生成がWebブラウザ上でできることです。これによりサーバ側でも知り得ない情報の管理が可能になります。 var options = { userIds: [{ name:'Jon Smith', email:'jon@example.com' }], // multiple user IDs numBits: 4096, // RSA key size passphrase: 'super long and h
Resumable.js - HTML5 File APIを使ったリジューム付きファイルアップローダー MOONGIFT
Webで面倒に感じるのがファイルのアップロードです。特に途中でネットワークが切れた時には大きなストレスになります。1回で数百MB、数GBの大きなファイルをアップロードするとなればリジューム機能が欲しくなるはずです。 そこで使ってみたいのがResumable.jsです。HTML5のFile APIを使ってリジューム機能を実現します。 Resumable.jsの使い方 デモです。大きなファイルをアップロードします。 ファイルをアップロード中。一時停止もできます。 ネットワーク側では巨大なファイルを細かくアップロードされているのが分かります。 ファイルの内容が細かくなっていますので、サーバ側で結合する必要があります。そのための実装がnodeやPHPなど各種言語向けに提供されています。Resumable.jsを使えば巨大なファイルもアップロードしやすくなるでしょう。 Resumable.jsはHT
Console Importer - DevToolsで外部ライブラリをインポート
Google Chromeの開発者ツールを使っていて、外部のライブラリを使いたいと感じることは多々あります。そんな時にはJavaScriptのコードをすべて貼り付けたり、スタイルシートを動的に生成して読み込む手があります。しかし毎回やるのは面倒です。 そこで使ってみたいのがConsole Importerです。簡単に外部ライブラリを読み込めます。 Console Importerの使い方 $iというオブジェクトが追加されます。後はこれにJavaScriptやスタイルシートのURLを渡すだけです。 さらに jquery@2 といったような指定もできます。スタイルシートも特に変わらず使えます。 Console Importerをインストールしておけば、Webサイトの開発やデバッグ作業がとても楽になることでしょう。ライブラリを利用する際の手間が大幅に減るはずです。 Console Importe
WebPack Playground - WebPackをWeb上で体験しよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptの利用範囲が広がるのに合わせてライブラリを使ったり、ソースコードが分かれているのを統合したりする必要が出てきました。その際に使われているのがBrowserifyであったり、WebPackです。 今回はWebPackをWebブラウザ上で体感できるWebPack Playgroundを紹介します。 WebPack Playgroundの使い方 メイン画面です。コンテンツはタブに分かれています。このタブの内容を別なタブから読み込めます。 例えばfile.jsというファイルを追加して、require('./file') とすればちゃんと読み込めます。 WebPack Playgroundでは擬似的にWebPackのようにコンテンツを展開していると思われますが、プレイグラ
LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン MOONGIFT
HTML5によって（またはiOSによって）Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。 そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行ってくれます。 LayaAirの使い方 作成例です。ゴリラがアニメーションします。 Flashにも生成できます。 こんな感じにバウンドするデモ。 一部を拡大表示するデモ。 チュートリアル風にタップすると次の説明が表示されるデモ。 LayaAirはWebGLとCanvasをサポートしており、ゲームやアニメーションで使えるライブラリとなっています。言語はActionScript3、TypeScript、JavaScriptをサポートしています。さらに一つ開発してしまえば、Flash
prh - コマンドラインで文章を校正
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文章を書くというのは難しいものです。文字数もそうですが、分かりやすい文章を書くには漢字の使い方にも気をつける必要があります。あまり多用すると文章が固くなりますし、使わなすぎると幼稚に見えます。 今回紹介するオープンソース・ソフトウェアはprh、そんな文章の構成を行ってくれるソフトウェアです。 prhの使い方 prhはコマンドで実行します。replaceオプションを付ければ元の文章が書き換わりますが、それが嫌な場合は標準出力された文章を別に保存すればOKです。 $ prh path_to_document.md > ~/Downloads/result.md prhはルールファイルがあり、それを使うことで良い感じに校正してくれます。ルールファイルを差し替えれば別な校正に使うこともでき
GetPageTitleAndURL - 複数パターンでタイトルとURLをコピー
WebブラウザではURLのコピーは簡単でも、タイトルのコピーは意外と面倒だったりします。HTMLソースからコピーするのは面倒ですし、ブックマークレットを実行する方が多いかと思います。 そんなURLとタイトルのコピーを手軽に、かつ複数のフォーマットに対応させたのがGetPageTitleAndURLです。 GetPageTitleAndURLの使い方 実行したところです。フォーマットを数字で指定します。 そうすると文字が表示されるのでコピーします。 GetPageTitleAndURLではGoogleスプレッドシート用、Markdown、aタグの3パターンでコピーできます。必要があれば追加するのも難しくないでしょう。機能拡張でコピーすることもできますが、GetPageTitleAndURLをキーボードショートカットで呼び出す方が簡単そうです。 GetPageTitleAndURLはJavaS
Diffy.js - JavaScriptでモーション検知 MOONGIFT
例えば監視カメラなどで、定常的に流れている情報を常に記録し続けると容量がどんどん大きくなってしまいます。そこで使われるのがモーション検知です。動きがあった時だけ記録するようにすれば容量が削減されます。 Webカメラでモーション検知を可能にするのがDiffy.jsです。JavaScriptだけで実現できます。 Diffy.jsの使い方 デモです。左右反転させた動画を検証に使っています。 実際に動かすとこんな感じです。 Diffy.jsではどれくらいの割合で検出するかと言った指定ができ、激しく動いた時だけ反応させると言ったこともできます。Webカメラを使った防犯システムのような使い方やモーションキャプチャなども作れそうです。 Diffy.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 maniart/diffyjs: A dependency-fre
Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ MOONGIFT
Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。 そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。 Slyの使い方 横向きのスクロール例です。数字を選んだり、下にあるナビゲーションで移動ができます。 縦型もできます。 リストだけでなく文章などでも利用できます。 コンテンツを動的に追加する無限スクロールもサポートしています。 Slyを使えば上下または左右のスクロールに多数の機能が持たせられます。目次とその見出しへの移動に使ったり、カルーセルのような使い方も考えられるでしょう。アイディア次第で面白い使い方ができそうです。 SlyはJavaScript製のオープンソース・ソフトウェア（MIT
Chromenu - メニュー常駐型のWebブラウザ
Webブラウザを複数使いこなす人がいます。普段のブラウジング用と開発用で分けると言った具合です。そうすると必要な機能拡張やブックマークも変わるので、重たくなったりするのを防げるようになります。 今回はさらに常駐系サイトを登録しておくのに便利そうなChromenuを紹介します。 Chromenuの使い方 Chromenuはメニューバーに常駐するWebブラウザです。 Facebookみたいなサイトを登録しておくと便利そうです。スマートフォンでアクセスした際と同じ表示になります。 もちろんMOONGIFTも。 Chromenuはソーシャル系のサービスであったり、常時開いておきたくなるサイト（とはいえWebブラウザで開いていると気になって仕事の邪魔になるサイト）を登録しておくと便利そうです。また、定期的にアップデートしてくれる機能もあるので実況系などで役立つこともあるでしょう。 Chromenuは
S3 Bucket Listing - Amazon S3のインデックスページを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Amazon S3は静的なファイルのホスティングに最適ですが、一覧ページを作れません。静的なWebサイトとして使うのであればindex.htmlを置けば良いですが、単純にファイルを置いているのであれば一覧ページがある方が便利です。 あらかじめ生成しておくこともできますが、S3 Bucket Listingを使えばもっと簡単にインデックス化できます。 S3 Bucket Listingの使い方 利用例です。ファイルやフォルダの名前、サイズ、変更日時などが取得できます。 ディレクトリはクリックで辿れます。 ファイルをクリックすればその内容を確認できます。この時の飛び先はAmazon S3になっています。 S3 Bucket Listingは一時的なアクセス権限をCogniteを通じて取
a-table.js - リッチな機能を持ったHTMLテーブルを出力 MOONGIFT
Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。 そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。 a-table.jsの使い方 デモです。上にあるテーブルがa-table.jsの適用例です。文字寄せや色の変更などができます。 カラムを追加できます。 日本語も問題なく使えます。 さらに太字の変更も。 行についても追加や削除ができます。 a-table.jsではHTMLでの出力はもちろん、Markdown形式でも出力できます。ただしMarkdownの場合は文字装飾などの情報は失われています。ビジュアル的にテーブルデータを操作できるので、表計算的な利用もできるでしょう。 a-table.jsはJavaScript
HyperApp - 1KBのビューライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ReactやVue、Riot.js、Angular2などバーチャルDOMを使ったフレームワークが増えています。個人的にはVueが好きなのですが、多くのビューライブラリは大型化し、ちょっとした表示に使いたいというニーズにはマッチしなくなります。 そこで使ってみたいのがHyperAppです。1KBのJavaScriptライブラリと銘打ったビューライブラリです。 HyperAppの使い方 ごく基本的な使い方は次のようになります。modelとviewが基本になります。 app({ model: "Hi.", view: model => <h1>{model}</h1> }) ボタンを押した時のアクションを定義する場合は次のようにreducersを定義します。 app({ model: 0
drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。 そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&ドロップを手軽に実装できるようにします。 drag-dropの使い方 drag-dropのコードです。onDrop/onDropTextメソッドを定義するだけでファイルやテキストデータが取得できます。 window.remove = DragDrop('body', { onDrop: function (files, pos) { var names = file
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
