MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが開発者用ドキュメントのデファクトスタンダードと言える存在になり、とりあえずMarkdownで書いておくという人が増えています。そうすることで将来的にソフトウェアによって多彩な表現が容易に実現できるようになるでしょう。 今回はその一例として、Markdown記法から年表表示を可能にするMarklineを紹介します。 Marklineの使い方 記述法です。リストを使って書きますが、頭に年月日を記述するのがコツです。 * 2012~2014 year to year. * 2012~2014/02 year to year. * 1986/06/28~1986/08/14 from date to another date. * 2012~ year to now. そ

JavaScriptはイベント購読型の処理が多いです。DOMをクリックした際のイベントであったり、変数の変化をウォッチして処理が行えます。しかし、そういったコードが散在していると、どこでイベントを購読しているのかが分からなくなります。 そこで使ってみたいのがJavaScript Trackerです。JavaScriptのイベント処理を一覧し、ハンドリングできるGoogle Chrome機能拡張です。 JavaScript Trackerの使い方 DOMを選択すると、そこに紐付いているイベントが要素、振る舞いなどを一覧してくれます。 そこから実際のコードを辿ることもできます。 動作デモです。 JavaScript TrackerはjQueryにも対応し、DOMイベントの収集ができます。スタイルを変更するイベントも分かります。そしてそこからコードを辿ってデバッグが可能です。これはフロントエンド

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WikiというとWebサイト上で編集してページを作っていくイメージがありますが、セキュリティ上の問題があったり、Webサーバを立てる必要があります。ローカルドキュメントを管理するのであればあえてWebサーバを立てるのは面倒です。 そこで使ってみたいのがMikiです。Makefileで作られたという変わったWikiエンジンです。 Mikiの使い方 変換結果です。AsciiDoc、Markdown、reStructuredTextが利用できます。 reStructureText版です。 元ファイルです。タイトルとサブタイトルを付けます。 リンクは元文書の拡張子がそのまま使えます。 複数のファイルフォーマットを織り交ぜて使うことは多くないと思いますが、気分に合わせてフォーマットを変えなが

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Twitterは時に炎上が起きます。何気ない一言を簡単に投稿できてしまうので、後になってニュアンスに問題があったり、自分の気付かなかった人たちを傷つけてしまっていたなんてことが起こります。そんな時に悪手ではありますが、ツイートを削除してしまうことがあります。 そんな削除されたツイートを発掘してしまうのがDeadbirdです。あらかじめユーザを登録しておく必要がありますが恐ろしいツールです。 Deadbirdの使い方 メイン画面です。削除されたツイートが並んでいます。 ステータス。削除されたツイート数も確認できます。 削除とツイート数の割合。あまり削除が多いのはよくありませんね。 Deadbirdはあらかじめユーザのツイートを保存しておき、その中から削除されたものだけをピックアップす

勉強会などで全く知らない人たちといきなり会話をするのは気後れしてしまいますが、実はTwitter上でつながっていたなんてことはよくあります。また、顔は知らなくともオンライン上の名前は知っているなんてことも多々あります。 そうした良い出会いの助けになりそうなのが参加者の名は。です。Connpassの参加者一覧からネームカードを生成してくれます。 参加者の名は。の使い方 実行した結果です。良い感じのネームカードができあがります。 印刷版。後は印刷した後、ハサミで切り抜けばOKです。 参加者がカードを付けていれば名前を間違えることもありませんし「ああ、あの人か」と気付くきっかけにもなります。勉強会を主催する方は積極的に使っていくと良いのではないでしょうか。 参加者の名は。はnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 参加者の名は。- Name

先日、Googleがディープラーニングを使って文字文節を自然に区切るというbudouを開発しました。日本語は分かち書きによって分割できますが、それをさらに自然に改行させるというのは面倒なものです。 しかし機械学習を行わずに、クライアントサイドだけでも実現できてしまうのがmikan.jsです。 mikan.jsの使い方 幅が広い場合。 一番狭めた場合。 ちゃんと良い感じに文節に区切れます。 mikan.jsを見ると分かりますが、正規表現であったり、漢字と平仮名の関係を使って解決しています。汎用性という意味においては機械学習でしょうが、日本語の改行問題というごく限られた領域においてはmikan.jsを磨き上げる方が簡単かも知れません。 mikan.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 trkbt10/mikan.js: 機械学習を用いていな

Webサイトの記念的なエントリーやページを作成する際には縦向けのタイムラインがよく使われます。Webページは縦にスクロールされるものが多いので、一番上が過去とすれば、スクロールするごとに経過時間をたどれるようになります。 そんなサイトを作る際に使えるのがBlueprint: Vertical Timelineです。センスの良いタイムラインページが作成できることでしょう。 Blueprint: Vertical Timelineの使い方 Blueprint: Vertical Timelineのデモです。日時とコンテンツ、アイコンが並んで表示されています。 レスポンシブ対応です。 スマートフォンサイズにしても見やすいです。 Blueprint: Vertical Timelineはシンプルなデザインですが、それだけに見やすいのではないでしょうか。この手のコンテンツはよく使われますが、イチから

Gitのコミットログやブランチを切った後の分岐やマージを見ていて何かに似ていると思った人がいたようです。確かに出発点があって、最後に終点があると言うのは似ているかも知れません。 それは線路です。MetroGitはなんと、Gitのコミットログを使ってフランスの地下鉄を表現しています。 MetroGitの使い方 既に完成しているのでこれ以上いじることはないでしょう。というか変更すると路線図にならなくなってしまいます。ローカルで確認する場合。 路線の数は増えたり減ったりします。 GitHub上で確認することもできます。確かに路線図っぽいですね。 複雑な乗り換え部のようです。 今後新しい路線ができたりすると、また変更されるようになるのでしょう。巡回路線があるのかは分かりませんが、東京の地下鉄で同じことをするとあまりにも複雑なものができあがりそうですね。 MetroGitはGitを使ったソフトウェア

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 当たり前ですが、英語圏のソフトウェアは英語が綺麗に表示されるように調整されています。そのため日本語にした時に幅が足りなかったり、そもそもフォントが当たっていなくて汚い表示になったりします。 Webのモックアップなどで多く使われているBootstrapについてもそうです。日本語を綺麗に表示するならBootstrapを日本向けに拡張したHonokaを使いましょう。 Honokaの使い方 Honokaは日本語フォントはもちろんのこと、幅や高さが微調整されています。 デフォルトのBootstrapとの比較です。 デザイン一覧。ナビゲーションバー。 タイポグラフィ。 テーブル。 タブ、パンくず、ページネーションなど。 アラート。 パネルなど。 HonokaはBootstrapと高い互換性があ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 時間はどんどん流れていってしまうもので、止めることは誰にもできません。しかし流れていった時を振り返って形にすることはできます。その一つが年表です。 自分のこれまでの歩み、歴史的事件、文明など様々な事柄を年表に表してみましょう。データをプロットするのが大変なイメージがありますが、Lifeを使えば簡単です。なぜならデータフォーマットがMarkdownだからです。 例えばサンプルのMarkdownファイルは次のようになっています。 life.md @USERNAME' life =============== - 24/02/1955 Born - ~1968 Summer job - 03/1976 Built a computer - 01/04/1976 Started a com

Chocolatey NuGetはWindows用のapt-getというべきパッケージ管理ソフトウェアです。 Windows8ではアプリストアができましたが、まだまだソフトウェアの数は多くありません。もっともっと必要なソフトウェアがたくさんあります。それらを旧来の方式でインストールするのはもうやめて、Chocolatey NuGetを使ってパッケージ管理してみましょう。 インストール時にはPowerShellが必須です。それさえあればコマンド実行だけでインストールされます。 例えばgitのインストールは“cinst git.install”で完了です。 ダウンロード中…。 Rubyをインストールしてみました。自動的にパスも設定されます。 Chocolatey NuGetはまるでapt-getのように簡単に使えるパッケージ管理ツールです。今は775パッケージが登録されており、Gitやテキスト

jQuery POP'n SocialButtonはカスタマイズされたFacebook、Twitter、はてなブックマークの共有アイコンを表示します。 WebサイトにTwitterやFacebook、そして日本であればはてなブックマークのソーシャル用アイコンが設置されているのは当たり前になってきました。しかし単に設置するだけではもはや目立ちません。今回はその一歩先をいくjQuery POP'n SocialButtonを紹介します。 各ボタンの右下に共有数が表示されます。 吹き出し風に数値を出すこともできます。 jQuery POP'n SocialButtonはマウスオーバーでアイコンがちょっとだけ上に持ち上がったり、アイコンをクリックするとシェアするためのウィンドウ、数値をクリックするとコメント一覧ページに遷移するようになっています（Facebookはどちらも数値クリックはありません）

Micropolisは初代シムシティのオープンソース版です。 間もなく新作シムシティ6が登場するシムシティ。1989年の登場以来、ずっと愛され続けている有名なゲームです。そんなシムシティのクローンソフトウェアがMicropolisになります。 懐かしい画面！ ゲーム開始です！ 例えばこんな感じに拡張していきます。 税率などの設定。 Micropolisは子供たちに一人一台PCを渡そうとするプロジェクトOLPC向けに初代シムシティのコードをオープンソースにして公開されています（一部相違があります）。あの懐かしいシムシティの世界に浸りたい方はぜひダウンロードしてください。 MicropolisはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（GPL v3）です。 MOONGIFTはこう見る 初代のAngry Birdsもフリーになるなど、旧来のゲームをオープンにする

AlluraはSourceForge.net 2.0と銘打たれた新デザイン、新機能のシステムです。 かつてオープンソースのリポジトリサービスと言えばSourceForgeでした。今では随分影が薄くなってしまったように感じますが、まだまだ根強い人気があります。そんなSourceForgeが2.0として生まれ変わろうとしています。それがAlluraです。 Wikiページです。 こちらはリポジトリ。2カラムで、右側が狭いのが特徴です。 フォーラム。 チャット。 Pastbin。いわゆるスニペット機能です。 チケット。 チケットの詳細です。 Alluraは既に既存のシステムの一部分に適用され始めています。グレーを基調としたデザインは現在と同じですが、より角丸を多用した、今風のデザインになってきています。デザインも見やすい形で、まさに2.0にふさわしい形と言えるのではないでしょうか。 Alluraは

Markdown.cssはスタイルシートを使ってHTMLをMarkdownフォーマットとして表示するソフトウェアです。 既存のHTMLをMarkdownで書くとどうなるか、変換ツールも幾つかありますが今回は変わり種のMarkdown.cssを紹介します。 純粋なHTMLソースコード。 一般的なスタイルシートを当てた例。 Markdown.cssを当てた例。 Markdown.cssはスタイルシートだけを使ってHTMLソースをMarkdownフォーマットに変換します。あまりにも見事に変わってしまうので笑ってしまうくらいです。ぜひお試しを！ Markdown.cssはスタイルシート製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る Markdown.cssはCSS3のafterやbeforeを使ってコンテンツを追加しています。リ

Bootstrap Application WizardはBootstrap用のアプリケーションウィザードフローを提供するライブラリです。 Bootstrapを使ってWebサービスを提供するサイトが多くなってきました。今回はその一つ、Bootstrapを使ってウィザード風の流れを実現してくれるライブラリ、Bootstrap Application Wizardを紹介します。 フローティングでウィザードが表示されます。 次へを押して順番に進めていきます。 左下のステータスバーが徐々に進んでいます。 完了しました！ Bootstrap Application Wizardではwizardというメソッドを使って一つ一つをスライド風に切り替えながら処理を選べるようになります。入力チェックも内蔵されています。そして最後にデータが飛んでくるのでサーバ側で処理して返却すれば良いだけです。とても手軽です。

PerspectiveImageCorrectionは建物の写真を真正面から撮ったように加工するソフトウェアです。 建物の写真を撮影する場合、どうしても下から見上げるような角度の写真になってしまいます。そういった写真でちょっと残念な思いをした方であれば使ってみて欲しいのがPerspectiveImageCorrectionです。 元の写真です。上が狭まっています。 四隅を指定してまっすぐになるように調整されます。 PerspectiveImageCorrectionは垂直、水平になる4つの角を指定することで写真を真正面から見たような形に加工してくれます。それ以外の空間が歪んでしまうのが難点ですが、ターゲットだけを切り抜けば素敵な写真になりそうです。 PerspectiveImageCorrectionはWindows用、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこ

Gist BlogはGistをコンテンツストレージにしたブログエンジンです。 ブログは記事が第一であるのは当たり前ですが、エンジニアであればWordPressをそのまま設置するのではなく、そのやり方についてもこだわりを見せてみると面白いかも知れません。今回はコンテンツにGistを使ったGist Blogを紹介します。 記事一覧です。 記事詳細。 Gistは言わずと知れたGitHubのスニペットサービスですが、そのコンテンツをブログ化してしまう面白い試みです。システムはHerokuで動作するようになっていて、コンテンツはRedisを使ってキャッシュされます。 Gist BlogはRuby/Sinatra製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 単なる情報発信をするだけであれば、TwitterやFacebookを使うの

jQuery emojiareaはテキストエリアの内部に絵文字を表示できるようにするjQueryプラグインです。 日本製で、iPhoneで採用されたあたりから一気に普及が進んでいるのが絵文字です。元々アイコンを表示するレベルであれば多数ありましたが、よりバリエーションが増えたように思います。Webサービスにおいて絵文字を利用する場合に使ってみたいのがjQuery emojiareaです。 上が素の表示。下が絵文字表示版です。 絵文字は色々用意されています。 選択することもできます。 ダイレクト入力においても選択すると該当する絵文字が文字として入力されます。 こんな感じで。 jQuery emojiareaを使えばテキストエリアの中にダイレクトに絵文字が差し込めるようになります。絵文字は絵文字チートシートに記述されている指定が利用できます。例えば:smile:と打てばスマイルアイコンが表示さ