Bootstrapはとても便利に使えるUIフレームワークですが、多機能になるにつれて設定するクラスや作法が増えていきます。バージョンアップも早いので追従するのが大変です。 今回はもっとシンプルに使えるUIフレームワーク、その名もSimple UIを紹介します。 Simple UIの使い方 Simple UIはあまりクラス設定が多くないフレームワークとなっています。まずはタイポグラフィ。 グリッド。 ボタン。 フォーム。 テーブル。 ナビゲーション。 カード。 クラス設定が少なければ学習コストは下がります。最初のモックアップやプロトタイプをいい感じに仕上げるのに良さそうです。ただしデフォルトのタグにスタイル設定がされていますので、カスタマイズしようと思った時には影響範囲が大きくなる可能性があります。 Simple UIはHTML5/CSS3製のオープンソース・ソフトウェア（MIT Licen

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 何度も行う作業は自動化したり、スクリプトによって改善できる可能性があります。それを考えずに、日々なんとなく繰り返してしまっていたりしないでしょうか。今回はその一例として宅配を考えてみましょう。 宅配状況を確認する際には各宅配業者のサイトに行って、送り状番号を入力します。そんな作業を自動化してくれるのがtrackerです。 trackerの使い方 trackerで佐川を調べる例です。この番号はダミーなのでデータはありません。 $ bundle exec bin/tracker trace -n 123412341231 -c sagawa input: 123412341231 output: [[{"no"=>"123412341231", "status"=>:noentry,

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Chromeがいくら便利だと言っても、全ユーザがデフォルトの機能で満足できるわけではありません。Chromeの利便性はサードパーティー製の機能拡張によって支えられている面が大きいでしょう。 そこで今回はGoogle Chrome機能拡張を作る際に使えるGenerator Chrome Extensionを紹介します。 Generator Chrome Extensionの使い方 Generator Chrome ExtensionはYeomanやgulpを使ってセットアップします。 まず必要なライブラリをインストールします。 npm install --global yo gulp bower そしてGenerator Chrome Extensionをインストールし

Google Chromeは開発者を中心として人気あるブラウザです。しかし外部のソフトウェアの影響によって、動作が不安定になることがあります。場合によっては意図せずインストールしたマルウェア的ソフトウェアもあるでしょう。 そんな時には今回紹介するChrome クリーンアップ ツールを使って環境を自動的にリフレッシュしてみてはいかがでしょう。 Chrome クリーンアップ ツールの使い方 Chrome クリーンアップ ツールはごくごく簡単なソフトウェアで、ダウンロードした実行ファイルを起動するだけです。 筆者の環境では該当するソフトウェアはなかったようです。 削除対象のアプリケーションを確認できます。これらがあるとChromeが不安定になる恐れがあるとのことです。 Webブラウザは普段のネット生活の中で必ず使われる必須のツールになっています。そんなツールが不安定になるとストレスも溜まるはずで

GitHubのファイルブラウザは良くできているので、ライブラリをわざわざダウンロードすることなく動作を確認するのに便利です。しかしライブラリによっては多くのディレクトリに分かれているため、ナビゲーションが面倒に感じることもあります。 そこで使ってみたいのがCompassです。Google Chrome向けにスムーズなGitHub上のナビゲーションを提供します。 Compassの使い方 Compassを使うには任意のGitHubリポジトリにてコマンド+K（Windowsの場合はCtrl+K）を押します。そうするとフローティングが表示されますのでファイルのパスを入力していきます。 ファイルを選択してエンターキーを押せばそのファイルが表示されます。 実際に操作しているところです。結構スムーズなのが分かるかと思います。 Compassを使えばGitHub上でのファイル移動やコードのブラウジングがと

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackが流行っていることもあって、情報をどんどんSlack上にアップしていこうという流れになっています。外部のWebサービスもSlack連携のものが増えてきました。 今回紹介するのはSlackcat、コンソールとSlackを連携させるソフトウェアです。スクリプトの出力結果をSlack上にポストします。 Slackcatの使い方 Slackcatは標準出力などをそのままパイプで渡せばいいだけです。結果はこんな感じでファイルとしてポストしてくれます。 コマンドのヘルプです。ストリームにも対応しています。 $ slackcat --help NAME: slackcat - redirect a file to slack USAGE: slackcat [global option

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマであれば普段からお世話になっているのがDiffコマンドではないでしょうか。しかし差分を表示したいニーズはプログラマに限らず存在するはずです。例えばオフィスファイルでも差分を出したいと思うことがあるはずです。 今回はdiff-pdf、PDFの差分表示を行ってくれるソフトウェアを紹介します。多くなってしまったPDFの整理に使えそうです。 diff-pdfの使い方 diff-pdfは2つのPDFファイルを指定して実行するだけです。そして、差分ファイルがPDFとして生成されるのがユニークです。 こんな感じで文字がずれているところもすぐに分かります。 diff-pdfを使えば作った時期の異なる営業資料などを比較したり、請求書を比較することもできるでしょう。エンジニア以外でも使えるこ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CLIで処理を実行して、それが重たいのでしばらく他の作業をしていると、いつの間にか終わっていたという経験は誰もがあるのではないでしょうか。ちょっと時間を損した気分にさせられますよね。 そこで使いたいのがnotiです。コマンドが終了した時にデスクトップ通知を出してくれるソフトウェアです。 notiの使い方 例えばこんな感じにコマンドを打ちます。 $ noti -t "Reply to Pedro" gsleep 3s そうすると3秒後にデスクトップ通知が出ます。 日本語のメッセージも出せます。 $ noti -t "homebrew" -m "up to date" brew upgrade --all メッセージも含められます。 notiとメッセージを頭につけて、その後に時間のかか

Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分

画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。 そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。 jQuery DrawSVGの使い方 jQuery DrawSVGのデモです。SVG画像がアニメーションしながら描かれているのが分かります。 画像と組み合わせるとこんなこともできます。 jQuery DrawSVGを使うとSVGに書かれている内容をアニメーションしながら描写してくれます。アニメーションGIFのようですが、よりスムーズで綺麗に描かれます。SVGを画像とはまた違った使い方で楽しめるのではないでしょうか。 jQuery DrawSVGはjQuery/JavaScript製

ニュースメディアではここ数年ペイウォールと呼ばれる課金の仕組みが取り入れられるようになっています。日本では日経新聞のオンラインサイトが有名でしょう。無料会員でも月何本かまで無料で、それ以上読む場合は有料と言った具合です。 そんなペイウォールの壁を回避してくれるGoogle Chrome機能拡張がnikkei-hackerです。 nikkei-hackerの使い方 nikkei-hackerをインストールします。 そうすると有料記事のところに無料で読むというボタンが表示されます。 ボタンをクリックすると、Googleニュース検索に飛びます。 nikkei-hackerではタイトルをそのまま検索するのではなく、Yahoo! JapanのWeb APIを使うことで主なキーワードだけを抽出し、それで検索を行います。その結果、同じような見出しで記事を載せているサイトが検索結果に出てくるという仕組みで

Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログやソーシャルメディア、バイラルメディアなどここ数年でテキストコンテンツは爆発的に増えています。しかし私たちの時間は1日24時間で変わりません。となると処理しきれない情報ばかり増えてしまいます。 そこでテキストを解析し、そこから大事な部分だけを抽出してくれるような技術に注目が集まります。Shucaは日本語に対応したサマライザーです。 Shucaの使い方 原文です。 実際にはshucaにかける前に分かち書きや日本語の構文解析を行ってくれるJUMANやKNPを実行する必要があります。 そうするとこんな感じでサマライズできます。 100文字などと指定もできます。 150文字で抽出した例。 Shucaは原文の中から重要と思われる部分を抽出し、指定した文字数で結果を返してくれます。今後さ

圧縮ファイルのフォーマットは多数あります。それに伴ってファイルの拡張子も異なります。有名なzipやtar.gzなどは解凍の仕方も覚えているでしょうが、rarやbz2、.Zなど時々しか使わないフォーマットだとコマンド入力に手間取ってしまいます。 そこで使ってみたいのがExtract it!です。ファイル名だけコピーしたらExtract it!で実行してみましょう。 Extract it!の使い方 Extract it!のトップページです。 ファイル名を入力して実行します。 そうするとtarを使った解凍するコマンドに変わりました。 bz形式の場合はコマンドのオプションが変わります。 Extract it!は実に多くの拡張子に対応しています。 .tar .tar.gz .tar.bz .tar.bz2 .zip .lzma .bz2 .rar .gz tgbz2 .tgz .Z .7z .xz

HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。 Dropifyの使い方 上が通常、下がDropifyを使った場合です。 デフォルトの画像を適用したり、ボックスの高さを指定することができます。 こちらは無効な場合。打ち消し線が良い感じです。 多言語対応もしています。 Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。 Dropif

PDFはビジネスの場でも数多く使われています。一つはビューワーを使えばどのプラットフォームでも同じように見られること、さらに印刷や編集の禁止など作成した人によってセキュリティを指定できる点にあると思われます。 しかしそんな幻想を破壊してしまうのがpdfunlockです。なかなか恐ろしいソフトウェアですよ。 pdfunlockの使い方 pdfunlockはこんな感じに使います。PDFファイルを渡すと、unlockedというサフィックスがついたPDFファイルが生成されます。 $ java -jar dist/pdfunlock.jar path_to_.pdf Unlocking path_to_.pdf to path_to_unlocked.pdf PDF Unlocked successfully! 解除されるのは印刷時やテキストコピー時のパスワードロックが解除されます。あまりにも簡単に

Gitは誕生して10年になろうとしているそうです。そして現在、GitHubを筆頭として多くのエンジニアがGitを使っています。しかしGitの使い方について、日々多くのエンジニアが悩んでいるのではないでしょうか。 そこで作られたのがGitUpです。分かりやすくGitを使えるようにしたいと考えているクライアントソフトウェアです。 GitUpの使い方 GitUpを立ち上げるとまず、リポジトリを選択するウィンドウが表示されます。 リポジトリを開くとグラフが表示されます。 ブランチなども見やすいです。 コミットメッセージも見られます。 修正した場所も分かります。ここからコミットもできます。 GitUpでは操作の殆どがundo/redo可能であり、タイムマシーンさながらに指定したリポジトリの状態に戻すのも簡単にできます。UIはとてもシンプルですが、GitUpを使うことで普段のGit運用がとても楽になる

ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。 jquery.cb-slideheader.jsの使い方 jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。 スクロールでヘッダーが変わるもの。 スクロールでヘッダーを非表示に。ただしパララックス風です。 スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader

Web開発時においてフォーム入力ほど面倒なものはありません。入力しては送信し、ちょっと変更してはまた入力し…とエンドレスに入力が求められます。こんな作業こそ自動化したいポイントじゃないかと思います。 ということでフォームインプットメーカー（FIM）を使ってみましょう。予め入力内容を定義することで値を一気に入力するブックマークレットができあがります。 フォームインプットメーカーの使い方 フォームインプットメーカーの画面です。こんな感じでnameと値を定義していきます。 作り終わったら作成ボタンを押すと、専用のブックマークレット（緑色のボタン）が生成されます。これを実行するとフォームに自動入力されます。 フォームインプットメーカーを使えばデータの入力がぐっと楽になりそうです。以前の入力内容は保存されていますので、再編集も簡単にできるようになっています。 フォームインプットメーカーはHTML5/