Webサイトのスクリーンショットは色々な場面で使われます。ニュース系サイトであったり、Webサイトを紹介するブックマーク的なサイトでも使われるでしょう。そんなスクリーンショットを一つ一つ手動で保存していたら時間がかかってしまいます。 そこで使ってみたいのがScreenshot as a Serviceです。Webサイトを画像化するコマンドツールです。 Screenshot as a Serviceの使い方 Screenshot as a Serviceを使ってGoogleのスクリーンショットを保存する例です。 画面の幅や高さを指定することもできます。レスポンシブなサイトに良さそうです。 さらにウィンドウの一部だけを指定も可能です。 Screenshot as a Serviceはコードから操作もできるので自動化することもできます。ウィンドウの中だけなので余計な機能拡張が写ってしまうこともあ

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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画はみんなで見ると楽しいので、インターネットで離れていてもそんな楽しさが感じられるようにしているのがニコニコ動画です。動画の時間に対してコメントすることで、いつ動画を見ても一緒に見ているかのように楽しめます。 しかし動画によってはリアルタイムに同じ場所を見ていないと困ることもあるでしょう。そこで使えるのがRabbitです。 Rabbitの使い方 Rabbitを使うにはまず一つのブラウザで動画を表示します。 もう一つのブラウザでも動画を表示したら、動画の下にある青いボタンをクリックします。これで再生場所が同期されます。 動画の再生、停止はもちろんのこと、スライダーで動かしても再生場所を追従してくれます。 Rabbitはインターネット越しで同じ動画を楽しんだり、セミナーや授業において

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Tumblrはお使いでしょうか。リブログの文化を生み出しただけに、他のサイトからコンテンツをポストしたり、他のユーザをフォローするような使い方が多いようです。 しかし普通のブログとして使っているサイトも数多くあります。そんな使い方を手軽にできるようにしてくれるのがTumblotteです。 Tumblotteの使い方 TumblotteはElectronで作られたTumblr用のMarkdownエディタです。はじめにログインします。 そうすると自分で作ったブログがドロップダウンに出るので、そこから選択して記事を追加します。記述はMarkdownでできて、右側にプレビューも出ます。Reactで作られているので、編集からプレビューへの反映はリアルタイムです。画像の表示もできます。 そのま

Webに足りないのは高度な表現力と言われていますが、HTML5のSVGやCanvasによって大幅に向上しています。しかし、それらを使いこなしたり、プログラミングと組み合わせるのは大変です。 そこでライブラリを使って手軽に表現力を増してみましょう。今回はグラフライブラリのplotly.jsを紹介します。 plotly.jsの使い方 サンプルです。マウスオーバーにも対応しており、ハイレベルな描画ができます。 マウスで囲んでズームできます。 こんなグラフまで。 データの幅から平均値を使ってトレンドを見ることができます。 この淡い感じがすごいですね。 WebGLを使った3Dグラフにも対応しています。 基本的なグラフにももちろん対応しています。 複雑かつ使われる機会も多いグラフ。 地図やローソクチャート。 3Dチャートは使いこなすのが難しそうですが、インパクトがありますね。 plotly.jsはグラ

ここ数年ではUIツールキットと呼ばれるデザインテンプレートが多く出てきました。もっとも有名なところではBootstrap、Foundationなどが知られています。 そんなUIツールキットを自作できるのがFabricatorです。階層構造でファイルを管理し、スタイルガイドなども生成してくれます。 Fabricatorの使い方 デモです。デモなのでスタイル設定はほとんどされていません。2ペインでメニューとコンテンツに分かれています。 各コンポーネントのページです。本当はここに装飾を施した状態で表示されます。 テーブルやテキストエリアなど。 フォーム。 HTMLタグの確認もできます。 Fabricatorを使うことで、自社サービスのデザインを統一したり、新しく入った人でもすぐにデザインにかかることができるでしょう。何よりすべてのスタイルガイドが一覧できることで品質維持にもつながるはずです。 F

写真を加工するソフトウェアは数多くありますが、ちょっとした作業のために重たいソフトウェアを立ち上げるのは面倒ですよね。 そこで簡易的なものであればWeb上だけでやってしまうのもいいかも知れません。今回はPhoto Editor、Webベースの写真をエディタを紹介します。 Photo Editorの使い方 メイン画面です。写真をドロップすれば編集モードになります。 ツールバー。向きを変えるのと切り抜きができます。 切り抜き中。 切り抜きました。Undoもできます。 Photo Editorはまだまだ簡易的な機能しかありませんが、多くの画像編集は切り抜きや向きの修正、後は一部の塗りつぶしなどになるでしょうか。ちょっとした修正であればWebベースでも十分になりそうです。 Photo EditorはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 P

WordPress.comの管理画面がNode.js x Reactベースになるというのが話題になりました。Web API自体は元々のPHPのものを使うことで、フロントを画面遷移なしのスムーズな操作性のものに変更しています。 その恩恵として出てきたのがWordPress.com for Desktopです。こちらはElectron x Reactによるデスクトップ用WordPress投稿ソフトウェアです。 WordPress.com for Desktopの使い方 最初にログインします。なお、自分でビルドする場合はOAuth2アプリケーションを作っておく必要があります。 管理画面です。Web版とほとんど変わりません。 記事作成画面です。 画像はドラッグ&ドロップで貼り付けられます。 アイキャッチ画像を貼り付けました。 WordPress.com for Desktopは画面自体はWebです

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iOS9のSafariで追加されて以降、話題に上がることが多いのがアドブロックです。オンラインメディアにとっては死活問題になる訳で、アドブロックに対抗するJavaScriptライブラリも作られています。 そんなアドブロック対抗ライブラリに対抗するのがFuckFuckAdblockです（ややこしい）。とどのつまり、アドブロックが有効になります。 FuckFuckAdblockの使い方 アドブロック対抗ライブラリ、FuckAdblockが有効な時。アドブロックが使われていますと検知できています。 FuckFuckAdblockを使った場合、アドブロックが検知できなくなっています。これでアドブロックが有効になりました。 FuckFuckAdblockはGreasemonkeyとして動作す

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソーシャルボタンや動画などの埋め込みに際してiframeタグを使うのが基本となっています。iframeの中は別サイトとしてセキュリティも切り分けられている気がするのではないでしょうか。 しかしやろうと思えばiframe内のクリックを検知できるのです。それがjQuery iframe click tracking pluginです。 jQuery iframe click tracking pluginの使い方 この赤い枠やソーシャルボタンがiframeの部分になります。 クリックのタイミングで右上のところにクリックを検知したアラートが出ています。 クリックイベントをクリアすることもできます。 jQuery iframe click tracking pluginを使えばソーシャルボ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackを使っている企業は多いですが、その中でよく聞かれるのが、チャットの中で話したいつかのメッセージが流れてしまって探せないといった問題です。 フローのサービスではありがちですが、業務で使っているとサービスである以上、知識をストックできる場を用意すべきです。それがTogelackになります。 Togelackの使い方 Togelackのメイン画面です。まずSlackで認証します。 認証したら、適当なSlackのメッセージリンクをコピーします。 貼り付けると関連するメッセージも一気に表示されます。 左側にメッセージを貼り付けていきます。これはドラッグ&ドロップでできます。 最後にタイトルと概要を入力してまとめの完成です。 TogelackはSlackのTogetterのような存在

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ネットワーク速度が高速になり、さらにWebアプリケーションが高機能化するのに伴ってWebアプリケーションで仕事をするのも苦ではなくなっています。 オープンソースのオフィススイートとして知られるLibreOfficeが開発しているのがCODE（Collabora Online Development Edition）です。Webベースのオフィススイートになります。 CODEの使い方 CODEはownCloudに組み込んで使います。 Wordドキュメントの編集です。現時点では日本語は入力不可です。 PDF出力をサポートしています。 画像はドラッグ&ドロップで配置の変更ができます。 表計算機能。こちらも日本語は入力できません。 スライド作成。GUIアプリケーションを使っているのと変わらな

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackの急成長が止まりません。どこの企業でも新しくチャットをはじめようと思ったらSlackが第一の選択肢に思い浮かぶのではないでしょうか。 そんなSlackの魅力といえば簡単に外部システムと連携できる機能だと思います。そしてBotkitはそんなチャットボットを手軽に開発するための開発キットになります。 Botkitの使い方 例えばこのようなコードになります。 controller.hears(['hello','hi'],'direct_message,direct_mention,mention',function(bot,message) { bot.api.reactions.add({ timestamp: message.ts, channel: message.ch

Markdownを頻繁に使っていると、つい間違った更新も発生してしまいます。そんな時に役立つのがバージョン管理システムですが、Markdownファイル同士の差分は単なるテキストファイルの比較以上のものではありません。 せっかくここまで広く使われているのですから、差分ももっと適した表示があるはずです。そこで使ってみたいのがmarkdiffです。 markdiffの使い方 markdiffはHTML上で使うようにもなっています。 このようにHTMLが出力されるので、スタイルシートで色分けしてあげればOKです。Aタグのhrefが違う場合はちょっと表示が確認しづらいですが、Markdownをそのまま比較するよりも分かりやすいのではないでしょうか。 markdiffはRuby製のオープンソース・ソフトウェア（MIT License）です。 r7kamura/markdiff

全天球動画が人気です。RICOH THETA Sやfly 360など全天球動画が撮影できるレコーダーも数多く出てきています。さらにFacebook、YouTube、Flickrなどが再生に対応しています。 今回紹介するValiant360はWebブラウザベースの全天球動画プレーヤーになります。デスクトップのブラウザで見られるのは便利です。 Valiant360の使い方 Valiant360のデモです。画面上にある動画が全天球となっています。 再生しているところ。マウスでグリグリと視点が変えられます。 Valiant360のいいところはWebブラウザで手軽に全天球動画が試せるところでしょう。ヘッドマウントディスプレイで体験する方が没入感はありますが、手軽とはいえません。このくらいカジュアルに見られると普及が進むのではないでしょうか。 Valiant360はJavaScript製のオープンソー

プレゼンで使ったスライドはどうしているでしょうか。せっかく作ったものなので、そのままにしておくのは勿体ないでしょう。SlideShareやSpeakDeckにアップロードする人が多いかと思います。 しかし自社のブランディングであれば自分たちのサイトにアップしておく方がいいという話もあります。そこで使ってみたいのがShareDocです。 ShareDocの使い方 トップページです。まずはユーザ登録からはじまります。 ユーザ名を決めます。 ファイルをアップロードします。各種スライドファイルに対応しています。今回はPDFですが、それ以外のフォーマットの場合はOpenOffice.orgの機能を使います。 こんな感じに一覧が並びます。 スライドはWeb上で閲覧できます。 ShareDocは一般公開はもちろんのこと、社内にあるスライドを共有して誰でも使えるようにすることもできます。内容が手軽に確認で

今は数多くのサービスが埋め込み表示に対応しています。外部サイトに埋め込んでもらうことで閲覧数を増やしたり、結果としてバイラルしていくきっかけになります。とはいえ、各サイトによって埋め込み方が違うのでいちいち覚えるのが面倒です。 そこで使ってみたいのがembed.jsです。embed.jsを読み込むだけで多くのサイトの埋め込みを自動処理してくれます。 embed.jsの使い方 Markdownコンテンツの埋め込み。HTMLにしてくれますし、絵文字も展開しています。 Instagram。 Flickr。 Googleマップ。 SoundCloud。 ビデオタグ Video.jsのサポート。 Vine。 YouTube。 Twitter。 GitHubのGist。 CodePen。 このようにembed.jsを使えば簡単にコンテンツの埋め込み表示ができるようになります。サイトによっては埋め込むコ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Code in the Darkは約2年前からはじまったイベントで、暗い部屋の中で20分間コーディングを行います。HTML5/JavaScript/CSSを使ってコーディングするのですが、ルールの一つのプレビュー禁止というのがあるのが肝となっています。 そんなCode in the Darkの中で使うとエディタがCode in the Dark Editorです。シンプル、かつ最低限の機能しかないエディタとなっています。 Code in the Dark Editorの使い方 メイン画面です。 上の方にコーディングしています。 ハイライト表示もされないようです。これでミスなく作品を完成させるのは至難の技に見えます。 ハッカー向けのプログラミングコンテストなので、参加者はみんな楽しそ

文章というのは読みやすくあるべきで、難しい漢字を使えばいいというものではありません。むしろ普段使わないような漢字を使うと全体的に固く、読みづらい文章になります。 自分で文章を書いたら、kanjilintを使って自動チェックしてみるといいでしょう。kanjilintは漢字を平仮名にすると読みやすくなる単語を抽出してくれるソフトウェアです。 kanjilintの使い方 kanjilintのインストールはpipで行います。 $ pip install git+https://github.com/momijiame/kanjilint.git インストールが終わるとkanjilintコマンドが使えるようになります。 detectは特定、replaceは置き換えも行ってくれます。 $ kanjilint detect Interview.md Interview.md:126:0:物の売り切りに限

多くのWebサービスがデザインテンプレートを公開するようになっています。その恩恵はとても大きく、デザインテンプレートをベースにすれば格好良いデザインのサイトが簡単に立ち上げられるようになっています。 今回はその一つ、BuzzFeedが公開したテンプレートSolidを紹介します。 Solidの使い方 スクリーンショット多めで紹介します。まずはタイポグラフィ。 リスト。 カラーリング。ビビット系の強いカラーリングです。 ボタン。 フォーム。結構シンプルです。 大きさも変更できます。 グリッド。 テーブル。これもまたシンプルです。 ボーダー付きテーブル。 グリッドはレスポンシブ対応です。 レイアウト設定。 マージンもクラスで設定します。 ボーダーのクラス。 画像を丸く表示するためのクラスもあります。 Solidはシンプルなデザインテンプレートですが、色合いは強いものが多くの使われています。Buz