WordPressやDrupal、Joomlaは世界的にも圧倒的にシェアの高い3大CMSと言えるでしょう。そんなシェアの高いCMSではセキュリティホールも世界中に知られており、弱いプラグインなどはあっという間に狙われてハッキングの被害に遭います。 そんなセキュリティリスクを低減できるツールがCMSmapです。CMSmapを使ってセキュリティチェックを行っておくのがお勧めです。 CMSmapの使い方 CMSmapはURLを渡すだけで使えます。 $ python cmsmap.py -t http://localhost/wordpress/ [-] Date & Time: 03/08/2015 15:47:59 [-] Target: http://localhost/wordpress [M] Website Not in HTTPS: http://localhost/wordpres

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、GitHubのタスクブラウザが増えています。Webベースで機能が提供されているものの、常時見る機能とあって常に手元で見られるようになっていると便利なのでしょう。 今回紹介するgithub-issue-teevもGitHub Issueブラウザとなっています。3ペインになっている点がユニークなソフトウェアとなっています。 github-issue-teevの使い方 github-issue-teevは3ペインの構成になっていて、左側にIssueの一覧、中央にその内容、そして右側にサブタスクが表示されます。 サブタスクというのはタスクの中で使っているチェックリストがタスク化されます。Issueは自分がアサインされているものと、お気に入り登録したリポジトリのIssueが表示されるよ

Webシステムのテストと言えば、入力してサーバに送ってデータをチェックして、また入力して…の繰り返しです。それこそうんざりするほど入力を繰り返すのではないでしょうか。 そこで使ってみたいのがFormFillerです。ブックマークレット型のソフトウェアで、入力を再現してくれる機能があります。 FormFillerの使い方 FormFillerはブックマークレットなので、ツールバーなどに登録後、まず何も入力していないフォームでクリックします。 そして再度フォームを表示した際にブックマークレットを実行すると入力内容が再現されます。 使用例。ブックマークレットを実行すると最後に入力した内容になります。 FormFillerは入力を監視し、最後の入力内容に復元してくれます。JavaScriptを修正しつつ、フォーム入力を行う…といったフロントエンド開発に大いに役立つことでしょう。 FormFille

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Amazon S3には静的なファイルホスティング機能があります。個人的にはDevRelのサイトはS3とCloud Frontを組み合わせてSSL/TSLでホスティングしています。静的なサイトであれば手軽に公開できて便利です。 とはいえ、多少は設定が必要であったり、S3にアップロードする時の手間が発生します。そこで使ってみたいのがStout、S3対応の静的サイトデプロイツールです。 Stoutの使い方 Stoutはcreateサブコマンドを使ってバケットの作成とRoute53へのドメイン設定追加を行ってくれます（ゾーンは予め作っておく必要があります）。 $ stout create --bucket moongift.co.jp --key $AWS_KEY --secret $AW

コンピュータは実際のものをそのままに表現するのは得意です。3pxの線を引けば3pxになりますし、マウスで辿った通りに正確に線が引けます。逆に人が書いたようにちょっと乱れた感じというのは苦手です。 今回は画像をほんの少し崩した感じ、イラストっぽい雰囲気に仕上げてくれるライブラリcomic.jsを紹介します。 comic.jsの使い方 comic.jsを使った一例です。右側のオブジェクトに対して、左側のは若干崩れた線なのが分かるでしょうか。 他にもこんな感じ。右側は手描きイラストっぽい雰囲気になっています。 正確なのも良いですが、こういう風に仕上がるのも面白いですね。 堅苦しいグラフもファジーに。 ここまで細かくなると線の乱れで見づらくなるでしょうか。 comic.jsは既存の画像を取り込んで自動的にイラスト風（ライブラリ名からいくとコミック風に）してくれます。ほんの少し人の温かさが感じられる

アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです

勉強会で発表している時にリアクションが何もないほど辛いことはありません。しかしこれは分からないでもなくて、真剣に聞かなければならないという雰囲気がそうさせるのではないでしょうか。 もっと気軽にコメントしたり、反応できるようにしてくれるのがNicoNico SPEENYAです。スライドの上にニコニコ動画風にコメントを流して表示してくれるソフトウェアです。 NicoNico SPEENYAの使い方 NicoNico SPEENYAのサーバを立てるとこんな感じのコメント入力画面が表示されます。 そしてプレゼンターはChrome機能拡張をインストールします。 これで準備は完了です。任意のファイル（プレゼンテーション）を表示します。コメントすると文字が流れていくのが分かるはずです。 文字色を変えたり… 実際に動かしたところ。連射するとプレz年が見えなくなりますね。 NicoNico SPEENYAは

ダミーデータを作るのは意外と面倒で、つい“ああああ”などとしてしまったり、同じ文字を繰り返してしまったりします。しかしそれでは実際にありそうな文字数が分かりづらかったり、雰囲気として本物っぽさが感じられません。 そこで使いたいのがGimeiです。偽名、偽の住所などを生成してくれるライブラリです。 Gimeiの使い方 GimeiはRubygemでインストールできます。 gem install gimei 例えば男性を作る場合は以下のようにします。 gimei = Gimei.male gimei.male? #=> true gimei.female? #=> false gimei.kanji #=> "小林 顕士" もちろん実行する度に結果は変わります。 > gimei = Gimei.male => #< gimei::name:0x007fd2cb35b4c0 @gender=:ma

キー操作を見せたいと思うことが時々あります。例えばキーボードショートカットは単に画面を見ているだけでは分かりづらいので画面上にショートカットキーを表示してあげると操作を見ている人にとって便利です。 コンピュータ操作の動画であったり、コンピュータの使い方を学習する際などにそういった操作を見せてあげると理解が進むでしょう。そのためのソフトウェアがKeyCastrです。 KeyCastrの使い方 KeyCastrを使う場合にはシステム環境設定のセキュリティとプライバシー設定において、プライバシーペインのアクセシビリティでKeyCastrを追加しておく必要があります。 設定画面です。キーボードショートカットで機能をトグルできます。 表示設定です。 例えばこんな感じにフロートで表示されます。通常の文字入力は出ず、キーボードショートカットだけを表示します。 Optionなども認識します。 KeyCas

写真はそれ単体で載せるだけでなく、写真に合わせてコンテンツの雰囲気を変えたりするとより際だって表現力が高くなります。そのためには写真の解析が欠かせませんが、これは意外と難しいです。 そこで使ってみたいのがVibrant.jsです。写真を解析し、主立ったカラーパレットを抽出してくれるライブラリです。 Vibrant.jsの使い方 Vibrant.jsを使って解析された画像の背景にメインカラーを当てています。 必ずしも一番多い色ではなく、その写真の中で一番目立っているところを使っているのが分かります。 この手のライブラリは幾つかありますが、どの色をピックアップするか、さらにどれを優先するかはアルゴリズムによって違って面白いです。写真を元にしたカラーリストの作成やデザインのインスピレーションを得るのにぴったりではないでしょうか。 Vibrant.jsはJavaScript製のオープンソース・ソフ

プログラマーのパフォーマンスを測る一番のツールはバージョン管理のリポジトリを見ることです。コード量を増やせばいいわけではありませんが、日々のコーディング結果が反映されるのは間違いなくリポジトリです。 そこで使ってみたいのがGipedaです。GitHubに限らず、そのコミット歴などを可視化してくれるツールになります。 Gipedaの使い方 Gipedaは静的なHTMLファイルを生成します。 コミット一覧をクリックすると、変更したファイルの内容が分かります。 コミット履歴のグラフ化もできます。 Gipedaはローカルで使えますのでGitHub以外はもちろん、オフラインでも使えるのが利点になります。また、静的なファイルを生成するので任意のサイトにホスティングすることができます。 GipedaはPerl製のオープンソース・ソフトウェア（MIT License）です。 Gipeda itself –

カラオケでよく見かけるのがテロップです。言葉の流れに合わせて文字の色が変わる仕組みですが、あのシンプルさで歌が歌えるようになるというのはとても面白い仕組みです。 そんな仕組みをWeb上で実現したのがkaraoke-telopです。まさにあのカラオケ風なテロップが実現します。 karaoke-telopの使い方 何はともあれ見てもらうのが早いでしょう。 【ニコニコ動画】JavaScript/CSS でカラオケ風テロップ こんな感じに流れます。「は」の一部だけが赤くなっているのが分かるでしょうか。 現状、プレイヤーの一時停止やシークには未対応とのことなので（カラオケも止めることはないと思います）、みんなで歌詞を共有すれば面白いサービスができあがるかも知れません。なおテロップデータの作成はなかなか大変そうだったので実際に作る際にはがんばってください。 karaoke-telopはHTML5/Ja

ここ数年チャットアプリが盛んになっています。機能として求められるものは決して多くなく、似通った作りになってしまうものの、UI/UXにおいてSlackが頭一つ飛び抜けた存在になってきています。 そんなSlackを真似て作られたのがRocket.Chatです。基盤としてMeteorを使ったのが特徴となっています。 Rocket.Chatの使い方 Rocket.Chatの画面です。まずユーザ登録をします。 こちらがダッシュボード的な画面です。 チャットルームに入りました。Slackと似ていますね。 メッセージを書いて、さらに編集もできます。 右側のペインは非表示にできます。 大勢いるとこんな感じ。 Rocket.Chatではファイルの添付はできないようですが、画像のURLを貼り付けると画像がインラインで表示されるようです。社内でSlack風のチャットが欲しかったらRocket.Chatを使ってみ

最近、ソフトウェアの紹介時にアニメーションGIFを使うようにしています。YouTubeと違って画像なのでスマートフォンなどでも手軽に見られますし、何度も自動再生されるのが良い感じです。 しかしアニメーションGIFの難点として、サイズが大きくなりがちというのがあります。画像サイズを小さくする手もありますが、一緒にお勧めしたいのが Lossy GIF compressor です。 Lossy GIF compressorの使い方 Lossy GIF compressorは以下のようなコマンドで実行します。 $ gifsicle --colors 256 --resize-width 440 -o animate-plus-4.gif animate-plus-3.gif リサイズなども行うと、例えば半分くらいになったりします。 サイズを変更しなくとも軽くなるのでブログなどでアニメーションGIF

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングする上で必須の機能と言えるのがコード補完です。そのためにはまずコードの解析が行われなければなりません。正しくコードが解析されることで、既にある変数やライブラリ名を補完できるようになります。 JavaScriptをコーディングする際に使えるコード解析ライブラリがTernです。Web上はもちろん、Emacs/Vimなどのプラグインも提供されているソフトウェアです。 Ternの使い方 Ternを使うとこんな感じにIDE的な入力補完ができます。 関数に対する引数の表示も。 定義元に飛ぶこともできます。 jQueryやunderscoreにも対応しています。 TernはWeb、Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse

世の中にはExcel職人と呼ばれる人たちがたくさんいます。そうした方達はExcelを表計算ソフトウェアとしてではなく、プラットフォームとして使います。書類もプロジェクト管理も勤怠管理もすべてExcelの中で実行されるのです。 そんなExcelで何をするか、その発想力が大事です。表計算なんかに使っている場合ではありません。ということで今回はimg2xls、画像をExcelファイル化するソフトウェアを紹介します。 img2xlsはPythonスクリプトになっており、必要なライブラリをインストールするだけで使えます。 $ pip3 install Pillow $ pip3 install xlwt3 後はPythonで img2xls.py を実行し、画像を引数に渡すだけです。そうするとExcelファイルが生成されます。そのファイルを開くとこんな感じで表示されます。 一つ一つのセルの背景色を指

IDEは開発効率を高めてくれる存在です。特にコンパイルが必要なプログラミング言語の場合は必須ではないでしょうか。iOSアプリの開発でもXcodeを使って開発している人は多いはずです。 そんな方に使ってみて欲しいのがBacklight for XCodeです。キャレットの当たっている行の背景色を変えて、さらに目立つようにしてくれるXcode拡張です。 Backlight for XCodeの使い方 Backlight for XCodeをコンパイルするとXcodeのメニューにBacklightが追加されます。 遊行するとこんな感じに現在の行がちょっと目立つようになります。 背景色を自分で選択することもできるので、好みの背景色にすることができます。Xcodeをより使いやすくするためにBacklight for XCodeを使ってみてください。 Backlight for XCodeはMac O

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつてのWebブラウザだけという枠を越えてJavaScriptが活用されるようになっています。サーバサイドはもちろん、スマートフォンアプリや組み込みデバイスでもJavaScriptに注目が集まっています。 そんなJavaScriptの利用領域が広がるのに合わせて考えなければならないのがセキュリティでしょう。そこで使ってみたいのがJavaScriptの静的解析ツールJSPrimeです。 JSPrimeの使い方 JSPrimeはサーバサイド、クライアントサイドの両方で利用できます。下の画像はWebブラウザ版です。 テキストエリアにJavaScriptのコードを入力します。 そして実行すると解析結果が表示されます。document.writeの使用が問題ありと指摘されています。 別なデモ

未だにOSが代わり映えしないのがクリップボードです。たった一つしかなく、履歴管理もされません。これだけ長くOSの歴史がありながらも、その点だけは今もなお受け継がれています。 そのためクリップボード管理ソフトウェアはたくさん作られてきました。CopyQもその一つです。マルチプラットフォームで使えるのが大きな利点のソフトウェアです。 CopyQの使い方 今回はMac OSX版で試しましたが、WindowsやDebian、Ubuntu、Fedora、OpenSUSE向けにもリリースされています。UI周りはQTを使っています。 こんな感じでメニューバーに常駐します。 下の画像は設定画面です。 クリップボードの内容をプレビューしたり、そのフォーマットを確認できます。Mac OSXの場合は一つのファイルでも複数フォーマットが出ますね。 CopyQはファイルのコピーについても対応しているのがポイントで、

個人的にGitHubでとても好きな機能にテキストエリアに画像をドロップしてアップロードする機能があります。自分でWebサービスを作っていて、画像をアップロードして欲しい場面があったらこういう実装をするだろうなと思える良い機能です。 InlineAttachmentはそんなテキストエリアを使ったファイルアップロードを実現してくれるライブラリです。 InlineAttachmentの使い方 一番下がアップロード中、中間がアップロードが終わった表示です。URLが展開されるのが良い感じです。 InlineAttachmentはAngularJS、CodeMirror、jQueryで使えるようになっています。ぜひ使ってみて欲しいライブラリです。 InlineAttachmentはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Rovak/InlineAttachm