Clairvoyance - CSSカバレッジツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。 プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。 Clairvoyanceの使い方 Clairvoyanceを実行します。 $ clairvoyance --css path/app.css --html path/index.html --reporter clairvoyance-html HTMLとCSSファイルを指定して実行すると、結果のHTMLファイルが生成されます。 レポートです。使われているクラスは緑色に
ReadRemaining.js - 読了するのにかかる時間は？ MOONGIFT
時間は有限です。そのため、ちょっとした空き時間に長文を読ませようというのは無理があります。ざっとスクロールしてもの凄く長かったら読むのをあきらめてしまうのではないでしょうか。 しかし読むのにかかる時間は読んでいる速度に関係します。そこで使ってみたいのがReadRemaining.jsです。 ReadRemaining.jsの使い方 ReadRemaining.jsを使っているところです。左上に完読するまでの時間が出ています。 読んでいくと徐々に時間が減っていきます。 同じような機能はKindleにもあります。読み手の速度を考えつつ、残りを読むのに必要な時間を出してあげれば今日はもう止めておこうと考えることもできるでしょう。長文を書くことが多い方はぜひ。 ReadRemaining.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 ReadRemai
devtool - ChromeのDevToolsを使ったnodeデバッガー
nodeを使ったソフトウェア、開発案件が増えてきています。そして開発を効率的に行うために必要なのがデバッグツールです。皆さんは何を使っているでしょう。 今回紹介するのはChrome/Chromiumで使われているDevToolsを使ってnodeアプリをデバッグできるdevtoolです。 devtoolの使い方 devtoolのインストールはnpmを使って行います。 npm install devtool -g 後はdevtoolコマンドを叩くとコンソールがnodeのインタプリタになります。requireも使えます。 ソースなどのタブも利用できます。 もちろんブレークポイントも使えます。 使い方としては以下のようにスクリプトを渡したり、標準入力を渡す、Browserifyなどと組み合わせることもできます。 # run a Node script devtool app.js # pipe i
サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」
ページに目次があると内容がある程度わかって分かりやすいこともあります。 WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。 先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。 TOCとは TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。 ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています） このTOCプラグインの特徴は以下です。 カスタマイズの自由度が高い 目次をクリックするとスムーズにスクロール移動する 現在見ているセクションをハイライト表示 スクリプトが軽量 スムーズなスクロール
pageSwitch - 多彩なアニメーションが指定できるページ切り替え MOONGIFT
SPA（Single Page Application）ではページの切り替わり時にアニメーションしながら表示することが多いです。それによって一連の動作に流れが生まれ、継続的に使い続けられます。 ページを切り替える際のアニメーションは多数ありますが、pageSwitchを使えば多彩なアニメーションから選んで実装できます。 pageSwitchの使い方 pageSwitchでは多数のアニメーションがありますが、その一部を紹介します。3Dでフリップ。 ズーム。 Y軸方向が縮みます。 前の画面が背後に消えていきます。 Y軸が縮んでちょうどいいサイズになるもの。 pageSwitchでは100種類近くのエフェクトが用意されており、それらを簡単に切り替えられるようになっています。Web上の画像や画面を切り替える際にとても有益なライブラリになりそうです。 pageSwitchはHTML5/JavaScr
InfernoJS - 高速なVirtualDOMライブラリ
VirtualDOMの魅力はあれど、Reactは重いというのは度々聞かれます。開発者にとってはDOMの状態を気にしなくなって便利に使える仕組みなれど、速度が遅くなっては意味がありません。 そんなこともあって代替のVirtualDOMライブラリがたくさん登場しています。今回はその一つ、InfernoJSを紹介します。 InfernoJSの使い方 InfernoJSのデモです。他のライブラリとの比較ができますが、Reactはかなり重たいです。 高速に大量の行を書き換えていくデモです。InfernoJSは高速さを売りにしているだけあって、かなりスムーズです。 APIは極力Reactに似せて作られているので、迷わず使うことができそうです。また、Reactのようにサーバサイドレンダリングにも対応しています。 InfernoJSはnode/JavaScript製のオープンソース・ソフトウェア（Mozi
Clipboard Hook - カット/コピー/ペーストをイベントフックするJavaScriptライブラリ MOONGIFT
Webのコンテンツをコピーしたり、逆にペーストすると言ったことはよくあるかと思います。そんな時、URLであれば自動的にリンク展開したり、画像や動画を埋め込み表示にできたりするとUXがとても良くなるはずです。 そんな操作を実現してくれるのがClipboard Hookです。コピー、カット、ペーストと言ったクリックボード操作をイベントフックできるライブラリです。 Clipboard Hookの使い方 デモです。コピーしたタイミングでイベントが呼ばれているのが分かります。 ペーストも同様です。 面白いのはJavaScriptで操作できる点で、貼り付ける場所や内容によってテキスト以外の情報を追加できるということでしょう。 Clipboard Hookのデモでは文字だけでなく色情報も組み合わせてコピーできるようになっています。そして貼り付けるときにはその情報によって描画する内容を変えています。Web
CMS.js - クライアントサイドで動作するCMS MOONGIFT
Webサイトの基本といえばCMSです。そのため、Web表示に使えるプログラミング言語があればまず作られるのがCMSと言えます。 今回紹介するCMS.jsもそんなCMSの一つです。プログラミング言語としてJavaScriptを使っています。 CMS.jsの使い方 CMS.jsはJekyllを使っており、実際の描画はクライアントサイドだけでできるようになっています。こちらは設定ファイル兼、スクリプトとなっています。 トップページです。記事が一覧表示されます。 記事詳細。 アバウトなどのページ機能もあります。 リンク一覧です。 CMS.jsはJavaScriptだけなのでどんなWebホスティングでも使える一方、サーバサイドのレンダリングを行っていないのでSEOに弱いという問題があります。社内であったり、ログイン後にしか使えないサイトであれば良さそうです。 CMS.jsはJavaScript/no
nativefier - Webサイトをローカルアプリケーション化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今やWebサイトであってもローカルアプリケーション並に使えるサイトが増えています。むしろクラウド上にデータが保存できる分、ローカルアプリケーションよりも便利な場合もあります。 そんなWebアプリケーションをローカルアプリケーション風にしてくれるのがnativefierです。 nativefierの使い方 nativefierはnpmでインストールして使います。 nativefier -name "MOONGIFT" http://www.moongift.jp/ そうするとElectronを使ってラッピングし、アプリとなります。 アプリを立ち上げるとWebサイトがそのまま表示されます。 nativefierはWebサイトをそのままラッピングしてアプリ化しているだけです。しかし普段使
rmdr - コンソールで使えるリマインダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました タスク管理にはリマンインダーが付いているものが多いです。タスクを登録するだけでなく、必要になったタイミングで通知してくれることで思い出したり、作業をはじめることができます。 rmdrはそんなリマインダー部分だけを取り出したソフトウェアになります。面白いのはCLIで動くということでしょう。 rmdrの使い方 rmdrは例えば次のように使います。meというのは通知先の指定です。 $ rmdr me get coffee -in 1min 登録したタスクを確認することもできます。 $ rmdr list ┌────┬────────────┬─────┬────┬─────┬───┬─────┐ │ id │ message │ min │ h │ dom │ m │ dow │ ├──
Sukiyaki - Webブラウザでも動く。JavaScript製ディープラーニング MOONGIFT
ディープラーニングが盛り上がっています。大量のデータを分析する際に画一的なアルゴリズムではなく、学習しながらエンジンを磨いていくことで、これまでにない精度で分析ができるようになっています。 今回紹介するSukiyakiもそんなディープラーニングエンジンの一つですが、特徴としてJavaScriptで作られ、Webブラウザ上で動くという点があげられます。 Sukiyakiの使い方 分析の一例です。画像の数字を見極めます。最初は精度が高くありません。 学習を繰り返す内に徐々に精度があがってきました。 最後はだいたい2%に落ち着きました。 SukiyakiはGPGPUとマルチコアCPUををサポートしています。nodeでももちろん動作します。ディープラーニングをさくっと体験するにはWebブラウザで動くという利点は大きいと思われます。 Sukiyakiはnode/JavaScript製のオープンソース
Dinos - HTML5を活用。日本製WebOS MOONGIFT
HTML5の高い表現力とJavaScriptのパワーが合わさることで、かつてのコンピュータ上で実行されていたものがWebブラウザ上で再現できるようになっています。ChromeOSはその最たるものと言えるでしょう。 HTML5を使ってどこまでできるのか、それに挑戦したのがDinosです。いわゆるWebOSと呼ばれるソフトウェアの実験ですが、実用的な機能も多数実装されています。 Dinosの使い方 Dinosのトップページです。雰囲気がMac OSXっぽいですね（アイコンが右に並んでいるところなど）。 HTMLを開いたところ。ソースが表示されています。 イメージビューワー。 設定画面。 Dinosはあくまでも実験的なものであって、実用できる訳ではありません。しかしウィンドウ制御であったり、XMLベースのファイルシステム、各種Webアプリケーションなど磨いていけば十分使えるレベルになるのではない
Screenshot as a Service - Webサイトのスクリーンショットを保存するコマンド MOONGIFT
Webサイトのスクリーンショットは色々な場面で使われます。ニュース系サイトであったり、Webサイトを紹介するブックマーク的なサイトでも使われるでしょう。そんなスクリーンショットを一つ一つ手動で保存していたら時間がかかってしまいます。 そこで使ってみたいのがScreenshot as a Serviceです。Webサイトを画像化するコマンドツールです。 Screenshot as a Serviceの使い方 Screenshot as a Serviceを使ってGoogleのスクリーンショットを保存する例です。 画面の幅や高さを指定することもできます。レスポンシブなサイトに良さそうです。 さらにウィンドウの一部だけを指定も可能です。 Screenshot as a Serviceはコードから操作もできるので自動化することもできます。ウィンドウの中だけなので余計な機能拡張が写ってしまうこともあ
pangaea - JavaScriptが使えるGo製のテキストプリプロセッサ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発の中でテンプレートを使うことは当たり前になっています。そうすることでデザインとコードとを分離したり、繰り返しの処理などを簡略化して書けるようになります。そんな便利なテンプレートをプログラミングでしか使えないのは勿体ないでしょう。 そこで使ってみたいのがpangaeaです。Go製のテンプレートエンジンで、普段のテキスト文書を対象として処理してくれるソフトウェアです。 pangaeaの使い方 pangaeaはJavaScriptが埋め込めるのが特徴となっています。以下は例文です。 This is just a normal text file that has pangaea scripts embedded, e.g. JavaScript: <pangaea type="tex
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
AllcountJS - デスクトップ/スマートフォン対応の高速Webアプリケーション開発フレームワーク MOONGIFT
Webアプリケーションを素早く組み上げられるフレームワークはとても重要です。ここ数年ですとRuby on Railsがそんな高速開発可能なフレームワークとして注目を集め続けていますが、他の言語でも類似フレームワークがたくさん存在します。 今回はそんなRailsっぽさはまるでなく、高速にWebアプリケーションを開発できるとしているフレームワークAllcountJSを紹介します。nodeを使い、デスクトップとスマートフォンの両方に対応しています。 AllcountJSの使い方 デモアプリです。プロフィールを表示するものになります。 編集画面があります。 スマートフォンにも対応しています。 スマートフォンでは画面遷移もスムーズです。 デモアプリではありませんが、AllcountJSではこんな感じにコードを書きます。 A.app({ appName: "Hello World", appIcon:
schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
JS BoardではじめてみようJavaScript組み込みプログラミング
JS Boardとは、HTML5、JavaScript等のWeb技術を中心に据えているマイコン、デバイスのことを指します。もともと筆者がそういう趣の勉強会を開きたくてつくった造語です。この記事では主にJavaScriptを利用した組み込み開発に興味がある方、電子工作をやってみたいWebクリエイターなどを対象に、JavaScriptで動作する組み込みデバイスを紹介したいと思います。 はじめに IoTやウェアラブルデバイスは、これからのITトレンドを牽引していく可能性を秘めています。これらの開発は組み込み系のジャンルだととらえられがちですが、実はJavaScriptが強く関連し、インターネット、Web系のジャンルだとも言えます。 インターネット、Web系の技術者がIoTなどに目を向けることによって、従来にはない新しいサービスや製品が考えだされていく可能性があります。そこからチャンスを掴んでスキ
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
