Yomu - 英和辞書付きのPDFビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PDFは閲覧用ドキュメントフォーマットとしてよく使われています。日本語のドキュメントはもちろん、英語圏でもよく使われます。DRMを嫌う層の多い英語圏では、電子書籍をDRMのないPDFとして配布しているケースもよくあります。 そんな英語のPDFを読む機会の多い方に使ってみて欲しいのがYomuです。英和辞書機能がついたPDFビューワーです。 Yomuの使い方 一見すると普通のPDFビューワーです。 文字を選択すると、フローティングで翻訳結果が表示されます。 英文を読むのが楽になることでしょう。 YomuはPDF.jsを使っています。JavaScriptベースでPDFファイルを扱うことで、Yomuのようなカスタマイズした表示も可能になります。非常に面白い試みと言えるでしょう。PDFはビジ
Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ MOONGIFT
一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。 最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。 Oryの使い方 こちらがエディタの画面。右側にアイコンが並んでいます。 編集中です。文字を選ぶとフローティングで装飾メニューが出ます。 日本語も入力できます。 さらにコンテンツをドラッグして配置変更も。 しかも段組まで変えられます！ 三段だってできます。 新しいコンテンツを追加する場合は右側から。 Oryはコンテンツのカスタマイズできる幅が大きく、かつ編集内容がそのままユーザの見ている画面になるので非常に分かりやすく編集できます。操作性も直感的なので使い勝手は良いでしょう。 OryはJav
PathFinding.js - 様々なアルゴリズムで最適な経路を探索 MOONGIFT
ある点からある点までの最短距離を調べるアルゴリズムがあります。簡単なものであれば人間の目で見た方が早いですが、込み入った図になると最短距離を見つけるのも容易ではありません。 そこで使ってみたいのがPathFinding.jsです。最短経路の調査を様々なアルゴリズムを用いて検証できます。 PathFinding.jsの使い方 緑のドットから赤のドットへ移動する経路を発見します。 この場合は直線で簡単です。 壁を作っても最終的にはゴールに到着します。 別なアルゴリズムでは探索方法が全く異なります。 ちょっと壁を増やすと最適な経路も変わってきます。 一例です。 こちらは別なアルゴリズム。時間が大幅にかかっています。 こちらは早いです。 アルゴリズムによって最短経路を見つけるまでの時間が大幅に変わってきます。もちろん障害物の置き方によっても変わってくるでしょう。アルゴリズムの違いによる探索方法がビ
obstructed.js - JavaScriptのメインスレッド停止を感知 MOONGIFT
JavaScriptはシングルスレッドで動作しているので、ロックされてしまう処理があると他の処理まで影響を受けてしまいます。なるべく処理は短く終われるのが理想で、そのためには既存の状態を調査しなければなりません。 今回紹介するobstructed.jsはそうした処理のロックを感知するソフトウェアです。 obstructed.jsの使い方 テスト用のコードです。下の処理にて100ms、処理を指定しています。 const obstructedTimer = obstructed((time) => { logdown.warn(`obstructed by ~${time}ms`) clearInterval(obstructedTimer) }, {threshold: 10}) setTimeout(() => { logdown.log('Blocking main thread') v
Mavo - Webアプリケーションを作る新しいアプローチ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、ReactやVueなどのビューエンジンに人気が集まっています。双方向更新が可能で、データをアップデートすれば自動的にUI側も更新されます。これにより、DOM周りのステータス管理から解放されるようになります。 今回紹介するMavoもビューエンジンですが、半分ロジックも加わったような作りになっています。 Mavoの使い方 基本はJavaScript/スタイルシートを読み込むだけです。 <script src="https://get.mavo.io/mavo.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> サンプルです。以下のようなコードを書きます。 <main mv-app="p
maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日本企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日本企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日本風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・
GanttPad - テキストからガントチャート生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理と言えばガントチャートと言うくらい必要としている方は多いです。少なくとも一覧では分からなかったタスクの関連であったり、今後のタスクの予定が可視化されるようになります。それによって無理が来るポイントなども掴めるようになるでしょう。 今回紹介するGanttPadはテキストで書いたタスクをガントチャートに展開してくれるソフトウェアです。 GanttPadの使い方 下にあるテキストエリアに入力すると、上にあるガントチャートに反映されます。 日付フォーマットは柔軟なようです。 新しいチャートの作成もできます。 GanttPadはテキストをガントチャートに展開してくれるので、多くのシステムと連携ができそうです。タスク名、日付さえ出力すれば良いので既存システムからそういった文字列
Progressive Image.js - ぼかし画像を使う画像遅延読み込み MOONGIFT
写真コンテンツは見せ方が大事です。単純に一覧として表示しているだけではよくありません。より印象づけるための手段として、ユーザアクションと関連づけるという方法があります。そうすることでオンデマンドな情報提供ができるようになります。 今回紹介するProgressive Image.jsはFacebookやMediumにインスパイアされた画像表示ライブラリになります。 Progressive Image.jsの使い方 表示直後です。画像はボケています。 スクロールしたりすることで画像がはっきりと表示されます。 実際の動きはこんな感じです。アニメーションしながらなのでより印象的です。 スクロールして画像が表示される場所までくるとぼかしが解除されてはっきりと表示されます。最初から普通に表示されている場合に比べて画像に目が引かれやすくなるはずです。遅延読み込みの一種ですが、ダミーの画像を表示する訳では
codepan - オフラインでも動作するJSFiddle/CodePenクローン MOONGIFT
JSFiddleやCodePenといったサービスはとても便利です。Web上の基本要素であるHTML/CSS/JavaScriptを書いて、その場ですぐに実行できます。そのまま残しておけるので、動くデモを人に見せるのが簡単です。 しかし問題はオンラインサービスゆえにインターネット接続が必要ということです。そこで使ってみたいのがcodepanです。 codepanの使い方 最初の表示です。HTML/JavaScriptを記述すると結果が表示されます。 npmライブラリを追加できます。 外部ライブラリを使う場合はインターネット接続が必要になってしまいます。 コンソールを表示させることもできます。独自の関数を定義しているので、codepan上に表示されます。 consoleでオブジェクトの構造も確認できます。 React/Angular/Vueのテンプレートを使うこともできます。 codepanは
node-compiler - nodeのコードを実行エンジンともども一つの実行ファイルに MOONGIFT
nodeで作られたソフトウェアの配布はnpmを使って行うのが一般的です。しかしコードを見られるのが問題だったり、最初にnodeをインストールしなければならず、若干敷居が高くなってしまいます。 そこで使ってみたいのがnode-compilerです。nodeアプリケーションをパッケージして一つのバイナリにします。 node-compilerの使い方 例えばCoffeeScriptをバイナリにする例です。この規模のソフトウェアに適用できるならば大抵使えるのではないでしょうか。 nodec bin/coffee a.outファイルが生成されます。後はこれを実行すればいいだけです。 $ ./a.out coffee> nodeの実行エンジンを含みますのでサイズは肥大化する傾向になります。CoffeeScriptは36.3MBになりました。 node-compilerを使えばnodeのインストールが不
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
PsiTransfer - 自前で立てるファイル共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールなどで巨大なファイルを送りつけるのはあまり良いことではありません。受ける側は強制的に受信せざるを得ませんし、そのせいで大事なメールが受信できなくなってしまうかも知れません。そのため、送受信両方でメールのサイズ制限を設けていることはよくあります。 そんな時のために使えるのがファイルをシェアするサーバです。今回はPsiTransferを紹介します。 PsiTransferの使い方 最初の画面です。ファイルをドラッグ&ドロップで登録します。 ファイルを登録しました。保存期間やパスワードも設定できます。 アップロード中です。 アップロードが完了し、専用のURLが生成されました。 そのURLにアクセスするとパスワードが聞かれます。 パスワードが合っていればファイルがダウンロードできます
React Timekeeper - Google Keepアプリにインスパイアされた時間入力UI
時間の入力インタフェースは意外と古くさくて面倒な場合が多いです。日付はカレンダーで入力できるのに、時間はドロップダウンでいちいち選択しないといけません。テキストで入れる場合も数字のみしか入力できないようにしなければならないでしょう。 そんな時間入力インタフェースとして作られたのがReact Timekeeperです。Google Keepアプリにインスパイアされたソフトウェアです。 React Timekeeperの使い方 入力は二段階に分かれています。まず時を設定します。 次に分を設定します。 AM/PMの切り替えも簡単です。 React Timekeeperは時と分の入力を分けたことで、最初は12分割、次に60分割の表示に分かれる設計になっています。デスクトップではちょっと面倒かも知れませんが、スマートフォンでは入力しやすいでしょう。何よりUIを工夫しているはずのGoogleが提供して
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
across-tabs - クロスオリジンをサポートしたタブ間通信ライブラリ MOONGIFT
Webシステムを開発していて、ボタンを押したりリンクをクリックしたらタブが開くようにすることは多々あります。しかし無尽蔵に開いてしまうとメモリを食いますし、ユーザに嫌がられます。 そこで使ってみたいのがacross-tabsです。タブ同士の通信を可能にするライブラリです。 across-tabsの使い方 新しいタブを開いたところです。タブ情報が取得できています。 複数開けばその分リストが更新されます。 デモです。タブを開いた後、ボタン一つで閉じられます。 across-tabsではクロスオリジンでタブ同士の通信が行えます。一つのタブに対して指令を出すことも、すべてのタブに対してまとめてメッセージを投げることもできます。使い道が色々ありそうです。 across-tabsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Live Demo -
BigPicture - YouTubeやVimeoにも対応した画像/動画表示ライブラリ MOONGIFT
画像や動画は見せ方が大事です。単にリンクを貼って、クリックしたら画像だけが表示される…なんてのはよくありません。最近は画像の解像度が上がっているので、サムネイルと実際の写真とをうまく見せる必要があります。 今回紹介するBigPictureはWebベースの画像、動画表示ライブラリになります。 BigPictureの使い方 デモです。クリックでモーダル表示になります。 動画でも使えます。HTML5動画、YouTubeやVimeoにも対応しています。 サムネイルと実体の大きさが異なる場合。 画像がない場合にも対応してます。 動画は各動画共有サイトによるようです。 BigPictureを使えばYouTubeなどを単に埋め込むのではなく、サムネイル表示にしてクリックしてはじめて再生するようにしたり、サムネイル画像を並べて表示できるようになります。この手のライブラリは他にもありますが、動画にも対応して
jExcel - Webに埋め込んで使えるExcel風表計算
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムなどで一覧表を表示する場合、主に2パターンあると考えます。一つは画面全体に表示する検索結果的な画面、もう一つはマスター管理など小さな表を幾つか並べる場合です。 今回紹介するjExcelはどちらかというと後者の、小さな表を埋め込み表示するのに便利なライブラリです。 jExcelの使い方 こんな感じに表示できます。 セルをクリックして編集もできます。 複数の表を埋め込むこともできます。 ソートも使えます。 入力値のフォーマットも指定できます。 カレンダー入力も。 ドロップダウンからの選択やチェックボックス入力。 データをJSONやCSVで取得できます。動いていないように見えましたが、関数式もサポートされているとのことです。 jExcelはとても軽量なライブラリで、プラグイン
jQuery File Browser - Webベースのファイルブラウザ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ユーザ向けにストレージに開放しているサービスの場合、ファイル一覧やファイルを開くような機能を提供したいと思うでしょう。かといって使い勝手の良いインタフェースは難しく、ツリービューを使ったりします。 もっとインタラクティブなファイル管理機能を提供したいならばjQuery File Browserを使ってみましょう。 jQuery File Browserの使い方 メイン画面です。フォルダやファイルの種類によってアイコンが違います。 フォルダをクリックするとディレクトリを辿れます。 ファイルの種類によって内容が確認できます。 jQuery File BrowserはOS標準のようなファイル管理機能を提供します。慣れたユーザにとってはツリービューの方が効率的かも知れませんが、はじめてのユ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prettier Markdown - Markdown中のJavaScriptコードを整形