MOONGIFT

プレビュー付き。FirefoxアドオンのMarkdownエディター「MarkUpDown」

2012-02-25T00:00:00+09:00

Markdownは普通に記述しても十分可読性の高い記法ですが、それでもプレビューがあった方が分かりやすいでしょう。そこで普段Firefoxをメインブラウザとしているなら試してみたいのがMarkUpDownです。Firefoxアドオンとして動作するMarkdownエディターです。

インストールです。ソースコードをダウンロードしてmakeすればxpiファイルが生成されます。

インストールされました。

立ち上げました。最初は真っ白です。

上にプレビュー、下がMarkdownの記述を行うエディット部分です。

水平の他、垂直に分けることもできます。

保存もできます。

MarkUpDownは記述した内容がリアルタイムにHTMLに変換されて、レンダリング結果を確認できます。これはWebブラウザならではの強みと言えるかも知れません。機能はシンプルですが、ちょっとした文書やブログ記事をMarkdownで記述するのに役立ちそうです。なお、XULRUnnerを使って単独のソフトウェアとして立ち上げることも可能です。

大きなアイコン、リボン風UIが格好いいWYSIWYGエディタ「GhostEdit」

2012-02-24T21:00:00+09:00

GhostEditは新規性あるWebベースのWYSIWYGエディターです。ボタンなどが大きくデザインされており、リボン風UIが使い勝手が良いです。

デモです。文字を選択しています。ハイライトはピンクのバックグラウンドになります。

画像の配置換えです。画像の上に矢印が出るので押すだけです。これが格好いい。

テキスト変更だけでなく、画像やリンクの挿入もできます。

リンクの上にマウスを置くと削除のフローティングが出ます。

保存機能もあります。

GhostEditに関する説明です。

GhostEditは周囲のコンテンツに馴染む形で作られており、これまでのWYSIWYGエディタとは一線を画しているように見えます。機能は他のエディタに比べると決して多くはありませんが必要最低限は用意されています。対応ブラウザはIE 6以上、Firefox 3.5以上、Google Chrome、Safari 3以上、Opera 10.5以上となっています。

WordPressのデザインをHTML/CSSのペアで試せる「Pears」

2012-02-24T15:00:00+09:00

PearsはWordPressのテーマですが、デザインフレームワークとしての役割も兼ねています。そして実際にコードを試しつつ、デザインを作ることができます。

インストール後、テーマを有効にします。

一覧の画面です。

記事の画面です。HTML、CSSが入力できます。

例えばリストです。シンプルで見やすいです。

テーブル表示です。

フッターです。

一覧（HTML5）です。

一覧（テキスト）です。

一覧（サムネイル）です。

サムネイルのグリッド表示です。

フォーム（左にラベル）です。

フォーム（上にラベル）です。

検索フォームです。

ログイン系フォームです。

リストです。

ステータス表示です。

タグです。

垂直のタグも。

ナビゲーションです。

水平ボタンです。

水平リンクです。

タブです。

ページネーションです。

Pearsをインストールした後、通常のページに行くとHTMLとCSSが入力できます。そして一番上にそれを合わせた結果が表示されます。一覧、単一記事、検索、タグ、ナビ、ページネーション、リスト、フォーム、フッターなど様々なパターンが登録されていますのでマッチしたデザインをテーマに使うといいでしょう。Pearsは実際にテーマとして使うというよりも、これをベースに自分なりのカスタマイズをしていくのがお勧めです。

業務で役立つオープンソース（4）「アクセス解析」

2012-02-24T13:59:25+09:00

今回のテーマは「アクセス解析」です。Google Analyticsが最も有名なサービスと言える分野ですが、他にも選択肢は数多くあります。どういった選択肢のもとで最良のサービス・ソフトウェアを選ぶべきか、その要素とともにソフトウェアを紹介します。

既存のHTMLやURLからMarkdownへ変換「html2text」

2012-02-24T00:00:00+09:00

html2textを使うと普段見ているWebサイトや既存のHTMLページをMarkdownフォーマットに変換できます。Markdownの練習にも良さそうです。

実行しました。引数にURLを渡すだけの簡単実行。確かにMarkdownのテキストが出力されています。

ちょっと余計な情報も出ていますが、きちんとテキスト化されています。

コマンドオプションです。画像やリンクを除いたりすることもできます。

html2textを使うとHTMLをシンプルなテキストにしてくれるのはもとより、Markdown記法であるために可逆的にHTMLにすることもできます（class指定などは飛んでいるのでデザインは戻りませんが）。HTMLで書いてしまったためにメンテナンス性が悪くなった文書を再利用したりするのにも使えそうです。

HTML5の中でも使える、使わない方が良い機能を学ぶ「HTML5 Please」

2012-02-23T21:00:00+09:00

HTML5が登場してしばし経ちましたが、それでも積極的に使っていくのを躊躇している人も多いのではないでしょうか。そこでHTML5の中でもどの機能を使っていくべきか、または避けるべきかを教えてくれるのがHTML5 Pleaseです。

トップページです。HTML5対応Webブラウザで見てみましょう。

インクリメンタルなフィルタリングもできます。

使えるか使えないかは色分けして表示されます。

やはり全ての機能が使えるという訳ではありません。

各機能からWebブラウザのバージョンごとのサポート具合が一覧できます。

APIに関連したものだけを抽出して対応状況が見られます。同様にCSS、HTML、JavaScriptといった具合に指定できます。

IEのバージョンごとの指定もできます。

HTML5 Pleaseでは推奨されるレベルから利用を避けるべきまで複数段階で記述されています。避けるべき場合も代替え技術やライブラリがあるかどうかも提示されています。

JavaScriptのオブジェクト差分を取る「difflet」

2012-02-23T15:00:00+09:00

インストールはnpmで行います。

テキストのみ。

こちらが結果。異なる部分のみ抽出されています。

さらに色々なデータを入れています。

こちらが結果。関数やバッファーもチェックできます。

結果をカスタマイズしてみます。

こちらが結果。差分結果をHTMLタグで表示しています。classにgやaが使われています（これは指定可能です）。

表示のカスタマイズもできます。

こちらが結果。結果の表示が異なります（カンマが頭についています）。

diffletを使うとキーは一緒ながら値が異なる部分や、キーがなくなっている、または追加されている部分が色分けして表示されます。青が値の変更された箇所、緑が追加、赤が削除されたキーとなっています。

diffletはJavaScript/node.js製のオープンソース・ソフトウェア（MIT License）です。

[s2If current_user_can(access_s2member_level1)]

MOONGIFTはこう見る(プレミアム限定)

ニホンノアニメサイコー「Kanade」

2012-02-23T00:00:00+09:00

日本のアニメは海外でも人気の高いコンテンツの一つです。そんな日本でのアニメ放送に関する情報をiPadやiPhoneでもすぐに確認できるようにしたのがKanadeです。

まずはデスクトップ、iPad向け。右側にシーズンの一覧が出ています。

シーズンを選ぶとその季節に放映されたアニメが一覧で表示されます。

レーティングもついています。リンク先はアニメサイトになっています。

iPhone版です。最初にSeasonsをタップします。

シーズンごとの一覧が出ました。

さらにドリルダウンしてアニメの一覧です。

Kanadeはシーズンごとのアニメの一覧に加えて、最終的にMyAnimeListというWebサイトへリンクします。サーバサイドの仕組みなしにJSONとJavaScriptだけで実行されているのが特徴です。

マーケターに。ツイートを分析、Excelに出力「The Archivist Desktop」

2012-02-22T21:00:00+09:00

Twitterから得られる情報はとても多いです。そこで企業のマーケティング担当者などが使ってみたいのがThe Archivist Desktopです。ツイートを取得、分析できるソフトウェアです。

起動しました。まずは検索をします。

検索中です。しばらくかかります。

結果が出ました。

テキストファイルで保存できます。内容はTSVです。

Excelで開くとこんな感じです。

ユーザごとの円グラフです。

日ごとのツイート数をグラフ化しています。

The ArchivistはWebサービスなのですが、それと似たような機能を実装したのがThe Archivist Desktopになります。データをExcelに出力できるので後の加工はなんとでもなりそうです。

撮ってすぐに投稿「tottepost」

2012-02-22T15:00:00+09:00

カメラアプリは多数ありますが、最近は簡易的な編集ができるものが好まれています。しかし撮った写真をすぐにシェアしたいという手軽さはありません。そこで使ってみたいのがtottepostです。

起動しました。まずサービスを登録します。

設定画面です。複数のアップロードサービスが利用できます。

例えばFacebookです。

他にもいろいろと有効にできます。

全サービスはこちら。

コメント欄が表示されます。

コメントを入れます。

後は投稿ボタンを押すだけです。

右上にサービスごとのインジケータが表示されます。

tottepostが対応しているサービスはFacebook、Twitter、Flickr、Dropbox、ファイルに保存、Evernote、Picasa、mixiとなっています。これらを使っているサービスだけ有効にして写真を撮影してすぐに投稿できます。

HTML5/スマートフォン対応のWordPressテーマ「Reverie」

2012-02-22T00:00:00+09:00

WordPressでHTML5で最適化したブログを作りたい、スマートフォンにも対応させたいと思っている方はReverieをベースに考えると良さそうです。HTML5で作られた、すっきりとしたテーマになっています。

WordPressの管理画面でインストールします。

インストールしました。

テーマはウィジェット対応です。早速画面を見てみます。

すっきりとしたデザインです。とても可読性高いです。

一件表示の場合はこちら。

iPhoneの場合。

スマートフォン向けコメントフォーム。

メニューは画面下に集中。

iPad向け。特に最適化されている訳ではありません。

ReverieはSEO対策、ウィジェット対応（サイドバーとフッター）、bbPress.phpを使ったフォーラム機能、複数のカスタムページテンプレート内包といった特徴があります。

ついにきた。Webブラウザにテキストエディタを内蔵「Skyedit」

2012-02-21T21:00:00+09:00

Google ChromeやFirefoxではhttp://の前にview-source:とつけるとHTMLソースが表示されます。同様にeditをつけるとWebブラウザ上で動作するテキストエディタが立ち上がるのがSkyeditです。

インストールします。今のところGitHubからのダウンロードのみです。

インストールしました。

edit:〜でファイルを開きます。今はローカルファイルのみ対応です。

こんな感じに編集していきます。日本語を打つとその後の入力がおかしくなってしまいました。

コマンドもあります。

ヘルプでコマンド一覧が出ます。

テキストエディタとしてのレベルはまだまだ高くありませんが、コマンドが使えてハイライターも備わっているので安定してくれば十分使えるレベルになるでしょう。なお今のところローカルファイルの場合のみ対応しています。エディタ機能はaceを使っているそうです。

粒子を使ったParticle表現を自在に操るFlashライブラリ「Flint Particles」

2012-02-21T15:00:00+09:00

Particleというのは分子や粒子と言った意味で、細かい粒を意味します。それが元になって、火や雪など自然物の動きを再現する処理をParticleと呼びます。Flint ParticlesはFlashベースでParticle表現を実装するライブラリです。

パチンコのような感じで上からボールが落ちていきます。

傘に雨粒が当たって跳ね返ります。

文字が粒子になって、再構成されます。

草が育っていきます。

画像がクリックではじけ飛びます。

文字の上に火が揺らめきます。

コウモリが飛び交います。

花火のような動きです。マウス追従です。

形が線形型に次々と変わっていきます。

煙と火です。

雪が舞い降りてきます。

無数の線が飛び交います。

花火で文字を描きます。

回転しながら閃光が飛んでいきます。

幅広い花火のような動きです。

3Dでボールが飛んできます。

多数の花火です。

クリックすると弾ける画像の3D版です。

飛び交うコウモリの3D版です。

火と煙の3D版です。

シャワーのように降り注ぎます。

大きなボールと小さなボールが互いに干渉し合うデモです。

デモ動画

Flint Particlesでは多数のデモと一緒に、それをFlashやFlexで実装する際のコードが提示されています。表現方法を覚える必要がありますが、一旦覚えてしまえば色々な場面で使えそうです。

業務で役立つオープンソース（3）「時間管理」

2012-02-21T12:22:46+09:00

今回のテーマは「時間管理」です。個人、または企業において時間管理を行うにはまず何に対してどれくらい時間を割いているか測定を行う必要があります。そこで今回は時間測定を行うソフトウェアについて考えるべき要素とその代表となるオープンソース・ソフトウェアをまとめて紹介します。

【★☆2/24（金）も臨時増員60名★】KONAMI「ドラコレ」の舞台裏を公開！～エンジニア向けセミナー

2012-02-21T10:18:11+09:00

大ヒットソーシャルゲーム「ドラゴンコレクション」のテクニカルディレクターが語る！！そのシステム運用の最前線と今後必要とされるエンジニアとは？

日時	2012/02/24 19:00〜2012/02/24 21:30
定員	60
会場	㈱キャリアデザインセンターセミナールーム8F（東京都港区赤坂3-21-20　赤坂ロングビーチビル８F）
申し込みURL	http://atnd.org/events/24419

概要

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
大ヒットソーシャルゲーム「ドラゴンコレクション」のテクニカルディレクターが語る！！
そのシステム運用の最前線と今後必要とされるエンジニアとは？
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

会員数500万人を突破、TVCMでもお馴染みの「ドラゴンコレクション」を
代表とする数々のソーシャルゲームをリリースする㈱コナミデジタルエンタテインメント。

今回、初めての試みとして、同社の現役エンジニアが大ヒットアプリ制作の裏話や苦労話。
運用を支える技術。今後、ソーシャルゲーム業界で生き残るエンジニア像について4回に分けてお話しいただく予定です。

人気ソーシャルゲームが生まれるまでの過程や、KONAMIが求める人材に興味のある方は
是非ご参加をお待ちしています。

※当セミナーは、typeの人材紹介と㈱コナミデジタルエンタテインメントの共催です。
※講演の後には、講演者も参加する懇親会を予定しています。

【開催概要】――――――――――――――――――――――――――――――――――――

◆※受付終了※[第1回]　1月27日(金)　「ドラゴンコレクション」システム運用の最前線
◆※受付終了※[第2回]　2月10日(金)　トラブル解決にみる大規模ソーシャルアプリの運用テクニック
◆[第3回]　2月24日(金)　ソーシャルゲームで生き残るエンジニアとは？
◆[第4回]　3月09日(金)　プログラマからソーシャルアプリプログラマへの転身～転身に成功するための 8 つのポイント～

※多数の参加申込が予想されますため、お早めのエントリーをお願いします。

会場：キャリアデザインセンターセミナールーム（赤坂ロングビーチビル８F）
http://shoukai.type.jp/aboutus/map.html

定員：40名→60名（好評につき臨時増員！）
※セミナーは人数限定の開催になります。多数のご応募があった場合は
応募者の中から抽選をさせて頂く場合がございます。

参加費：無料

【プログラム】――――――――――――――――――――――――――――――――――――

18:30～　受付開始

19:00～20:15　講演

講演内容（全4回）

■※受付終了（大盛況でした★）※第一回　2012年1月27日(金)■■□■■□■■□■■□■■□■■□■■□■
講演タイトル: 「ドラゴンコレクション」システム運用の最前線
　他に類をみない頻度でイベントが開催される「ドラゴンコレクション」。
その舞台裏では、エンジニア達が日々トラフィックと闘っています。
インターネットで検索しても見つからない、超高トラフィックサイトの
システム運用テクニックを一挙公開！

■※受付終了（満員御礼♪♪）第二回　2012年 2月10日(金)■■□■■□■■□■■□■■□■■□■■□■■□■■
講演タイトル: トラブル解決にみる大規模ソーシャルアプリの運用テクニック
　リリースから 1 年 3 ヶ月を迎えた「ドラゴンコレクション」。
その中で体験した大小さまざまなトラブル事例を紐解きます。
数々の困難を乗り越えてきた「ドラコレ裏 (方) の歴史」を初公開！

■第三回　2012年 2月24日(金)■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■
講演タイトル: ソーシャルゲームで生き残るエンジニアとは？
　あらゆるデジタルエンタメ領域で培ってきた歴史と実績を持つKONAMIだから
こそ見据えられる、ソーシャルエンジニアの未来。そんなKONAMIの求める
エンジニアのあるべき姿とは！あなたのエンジニア人生のヒントになれば...

■第四回　2012年 3月9日(金)■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□■■□
講演タイトル: プログラマからソーシャルアプリプログラマへの転身～転身に成功するための 8 つのポイント～
　コンシューマゲームの先端技術・豊富なノウハウが障壁になる
ことに！？急激に変化する価値観のなかで、ゲームプログラマ達がどのように、
ソーシャルアプリプログラマまで領域を広げられたのかをお伝えします！

20:15～20:30　質疑応答

20:30～　　　懇親会（無料、最大終了時刻 21：30)

【講演者プロフィール】―――――――――――――――――――――――――――――――――

●廣田竜平　氏
㈱コナミデジタルエンタテインメント　ドラコレスタジオ　マネージャー
アーケードゲームやPCオンラインゲームの開発を経て、モバイルゲーム開発担当へ。
ソーシャルゲーム「ドラゴンコレクション」のテクニカルディレクターとして手腕を発揮するとともに、
新作にも精力的に取り組んでいる。

※講演内容や当日のプログラムについては都合により変更する可能性がございます。あらかじめご了承ください。

～【 KONAMI社のトピックスについて】～
◆GREEの殿堂入りアプリ「ドラゴンコレクション」、２０１２年アニメ化が決定した「戦国コレクション」、
更に「プロ野球ドリームナイン」」「Jリーグドリームイレブン」などのヒット作品を続々とリリース。
GREEやMobageで提供するソーシャルゲームの会員数は1100万人を突破。そのほか多数のタイトルを展開中です。

◆同社は平成24年3月期第1四半期業績の売上高において、ソーシャルゲームが78億円。
コンシューマーゲーム(家庭用)と肩を並べる収益源となっており、今後も成長事業として期待されております。
GREEやMobageを中心にヒットコンテンツを展開、コナミブランドでのソーシャルゲーム確立を目指しています。

◆ウイニングイレブン、メタルギアソリッド、実況パワフルプロ野球、ラブプラス、
その他人気アーケードゲームやオンラインゲームなどのヒットコンテンツを持つ総合力
は、他のSAP(ソーシャルアプリプロバイダー)にない強みです。

★twitterのハッシュタグは「 #type_konami 」です。
質問やセミナーに参加してみての感想などどんどんつぶやいてください♪
予定が合わなくて参加難しい、という方もどうぞ。

手軽に電子書籍を作成できるコマンドツール「easybook」

2012-02-21T00:00:00+09:00

電子書籍を作成するのは大変そうなイメージがありますが、easybookを使うとごく手軽に作成を進められます。書籍作成プロジェクトの作成から実際の電子書籍生成まで一通り面倒みてくれます。

とりあえず実行しました。幾つかのコマンドが用意されています。

まずは新規ブックを作成します。

作成しました。

構成はこういう形になっています。

設定ファイルの内容です。

次に作成です。文書のタイトルとエディションを選択します。例えばprintはPDF生成します（設定できます）。

生成されました。奇麗なPDFです。

目次も生成されています。

コードも奇麗です。

エディションをwebにするとHTMLが生成されます。

コード部分も奇麗です。

デモ動画です。

easybookはコマンドラインでファイルを配置して、後は文書を書いて生成コマンドを打てばPDFやWeb向けにHTMLを生成してくれます。PDFの生成についてはPrinceXMLを使っています。

JavaからWordPressを操作するライブラリ「WordPress-Java」

2012-02-20T21:00:00+09:00

WordPressにはXML-RPCがあるので、プラグインなどのインストールでなければ大抵のことはリモートで操作できます。それを使ってWordPressをJavaから操作してしまうライブラリがWordPress-Javaです。

CUIで使えるバイナリも提供されています。ユーザ名とパスワード、XML-RPCのURLを引数に実行します。投稿したりコメントを編集したりと様々なアクションが可能です。

例えばカテゴリの一覧を取ります。

最近の投稿を3件取得しています。

コメントの取得や編集、投稿の取得や追加に編集、削除さらにページの管理機能も備わっています。JavaのシステムとWordPressを連携させたいという時やローカルで作成したファイルをWordPressにアップロードしたいと言った時に役立ちそうです。

IE8以前に救済。HTML5のタグを利用可能に「html5shiv」

2012-02-20T15:00:00+09:00

HTML5のWebサイトを作りたいと思いつつ、IE向けのデザイン適用について心配する声は多数あります。そこで使ってみたいのがhtml5shivです。HTML5非対応のIEでもHTML5の要素を使ったデザインをサポートします。

例えばこんなデザイン。HTML5を使っていますがちゃんとスタイルシートが当たっています。

ソースコード。sectionタグなどを使っています。

まだ開発中ということもあって全てのテストが通る訳ではなさそうです。

別なソース。markタグを使ったり、jQueryも使えています。

こんな感じのグラフも描けています。

グラフのソース。おそらくCanvasタグで描かれているはず。

html5shivを使えばHTML5非対応のWebブラウザであってもデザインの崩れが避けられるようになります。対応ブラウザはIE6〜9、Safari 4.x、iPhone 3.x、Firefox 3.xとなっています。

プレミアム会員300名突破記念「なぜプレミアムなのか？」

2012-02-20T09:10:12+09:00

いつもMOONGIFTをご覧いただきありがとうございます。約15ヶ月前にはじまったMOONGIFTプレミアムですが、先日アクティブ登録数が300名に達しました。ご支援、誠にありがとうございます。そこで今回は人に会う度によく聞かれる「なぜプレミアムを行っているのか？」について書いてみたいと思います。

メディアは広告だけなのか？

ブログやメディアサイトを運営する場合、その価値基準がPVで取られることが多いです。そのためPVを増やしがちな煽り記事であったり、記事を読む前に二、三回のクリックが入ったり、中途半端な部分で区切ってページネーションしたりと可読性を下げるような行為が平然と行われています。また、PVだけで価値基準を考えるとAjaxなどスムーズなナビゲーションを実現するUIも実装しづらくなります。メディアの収益モデルとして広告を考えた場合、MOONGIFTのようなごく小さなブログサイトでは直販の広告を取ってくるのは非常に困難で、その割に価格もPVあたりの単価になるので非常に安くなります。またどれだけ大きなサイトであってもアドネットワークの巨大さには到底かないません（なので大抵のサイトにはAdSenseが入っていたりします）。また、広告主としてはPVによるブランディングよりもクリック数による成果報酬を好む傾向にあります。 IT系ブログは読者のリテラシーが高く、クリック率は非常に低い傾向にあります。MOONGIFTもそれは同様で、AdSenseなどによる収益はごくごく僅かです。だからこそMOONGIFTとしてはごく小規模なサイトだからこそ、メディアとしての新しい可能性を試してみたいという思いがあります。プレミアムを軸とすることで、PVベースの競争から脱却し、意味のある記事だけを提供できるようになっています。

読んでもらえる

はてなブックマークなどで「あとで読む」タグを付けておいて実際に読まれた記事というのは思いのほか低いのではないかと考えています。どれだけ役立つ記事であったとしても無料で手に入る程度のものである場合、単にブックマークして蓄積されていくのみです。それでは読者にとって何の意味も持ちません。500円/月という貴重なお金を払うことによって、プレミアム記事を読まないと勿体ないと考えていただけるのはないでしょうか。メディアとして大事なのははてなブックマーク数を稼ぐことではなく、実際に読んでもらって「良い記事だ」と感じてもらえることにこそあるのではないでしょうか。少なくともMOONGIFTではそう考えています。もちろん、そのためにはプレミアム用の記事が品質高くあり続ける必要があり、それはMOONGIFTの課題になっています。

読者の方を向く

MOONGIFTは常に読者の方を向いて記事を書きたいと考えています。広告を入れる場合、広告主の方を向いて仕事をすることになりかねません。読者の方にとって有益であり、役に立つ記事を提供していくためにもプレミアムによる収益を通じて「自分は読者のために書いているのだ」と実感する必要があります。 MOONGIFTプレミアムは単純計算で20名/月（実際には辞められる方もいらっしゃるので25名/月程度でしょうか）ずつ増加中のようです。今後も読者の方にとって役立つ記事を提供し続けるためにもぜひご登録をお願いします！無料体験は1週間で、その間に辞められた場合はお金はいっさいかかりません。

プレミアム向け機能

1. プレミアム専用記事の購読

毎週火曜日、金曜日にプレミアム専用記事を提供しています。記事の内容はMOONGIFTが決めていますが、ご要望を承ることも可能です。

2. ソフトウェア紹介記事の先行購読

約1〜2週間前から一般公開予定に入っているソフトウェア紹介記事を購読できます。専用のフィードURLが発行されますので、それを使えばRSSリーダーで新着チェックもできます。

3. 電子書籍（ePub）ダウンロード

月ごとにまとまった電子書籍ファイル（ePub）がダウンロードできます。日々自動的に更新されています。

4. 各記事に付与情報

記事頭にソフトウェアの概要、記事末尾にMOONGIFTの意見、さらに公式サイトやデモページへのURLが追加されます。

5. ブックマーク機能

プレミアム用のブックマーク機能があります。記事をメモしておきたい時に使えます。

料金について

MOONGIFTプレミアムは月額500円の有料サービスになります。また、以下のような料金パックもあります。

半年パック（3,000円/半年＋2週間）
年間パック（6,000円/年＋1ヶ月）

また企業向けに請求書を発行することもできます。3アカウント以上で承ります。プレミアム決済ページへ今後ともMOONGIFTをよろしくお願いいたします。

こんな手が！Faviconを使って通知数を表示する「Tinycon」

2012-02-19T21:00:00+09:00

Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。

Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。

デモです。どんどん数字が繰り上がっていきます。

実装する際のコードです。数値を当てるだけの簡単な使い方です。

Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。

グループ決めに。ランダムにATNDイベント参加者をグループ化「ATND GROUPING」

2012-02-19T15:00:00+09:00

イベントを行う際に、何人かでグループを作って話し合ってもらったりすることがあります。そんな時にどうグルーピングするか、自動で決めてくれるのがATND GROUPINGです。

トップページです。まずは適当なATNDのイベントIDを入れます。

後はグループ数を入れます。終わったらシャッフルボタンを押します。

シャッフルを開始しました。

シャッフル完了です。第1〜3グループまで決定しました。

組み合わせ結果はユニークなURLで残しておけます。そのURLを参加者に連絡すれば、自分が何グループかすぐに分かります。

ATND GROUPINGはランダムでグループを作ってくれるので、人見知りの人でも安心して参加できるのではないでしょうか。グループ作業、飲み会での席決めにも使えそうです。

Web上のテキスト修正をトラッキング「Ice.js」

2012-02-18T21:00:00+09:00

ニューヨークタイムスが開発したエディター向けソフトウェアがIce.jsです。テキストエリア内の修正点をトラッキングし、色付けして表示してくれます。

これが最初の表示です。変更、追加、削除されているテキストが色づけ表示されています。

変更を適用した結果がこれです。

Tinymceと組み合わせて使えます。ボタンとして機能が組み込めます。

ボタンを使って変更を適用、非適用を選択できます。

全体を一括適用したり、適用済文書を確認することもできます。

Ice.jsを使うためには変更個所に予めカスタム属性を設けて描画する必要があります。その中には誰がいつ変更したかと言った情報が必要なようです。元々Ice.jsを使って文章を作成し、管理していれば気にすることはないでしょう。しかしそうしたコンテンツ管理を行うことで、文章をより洗練されたものにしていけるのでしょう。

凄いん…だよな？デザインの自由度を最大化したCMS「Berta」

2012-02-18T15:00:00+09:00

なんか凄いソフトウェア…。BertaはCMSですが、自由度が非常に高く、コンテンツの配置が自由にできてしまいます。その自由度の高さも相まって、デザインや写真家の方が数多く使っているようです。

まずログインします。

サイトをセットアップします。

セクションを作ります。これがメニューになります。チュートリアルのヘルプ付きで分かりやすいです。

セクションを作ったら、その内容を編集します。

これがページです。ほぼ何もありません。ここから自由にコンテンツを配置していきます。

配置する場所はX/Y軸ともに自由です。

ファイルを貼付けたりテキストを入れたりできます。

例えばこんな画像を。場所は自由に設定できます。

実際にBertaを使ったWebサイトです。ポートフォリオ的なサイトでしょうか。

こういった写真系のサイトが数多いようです。

こういった雰囲気のいいサイトも作れます。

Bertaはデザインの自由度の高さ、Webフォントの利用、データベース不使用と言った特徴があります。慣れるまでは結構大変かも知れませんが、この自由度の高さは見逃せない面白さです。

滑らかに自然なページ送りができるJavaScriptライブラリ「turn.js」

2012-02-18T00:00:00+09:00

turn.jsはリアルなページ送りができるWebベースのソフトウェアです。ハードウェアアクセラレーションを使い、滑らかに動きます。

四隅にマウスを持っていくと小さくカールします。ここをドラッグして引っ張ります。

ページをめくります。何となく海外のページの薄い雑誌をめくっているような感じです。

それ以外にもページの端にマウスを持っていくと矢印が出ますので、これをクリックしてもページめくりされます。

右から左の他、逆に左から右へもめくれます。

デモ動画です。

この手のライブラリは幾つかありますが、turn.jsは水平にページがカールするだけではなく、実際の雑誌のように斜めにカールしてページ送りできるのが特徴と言えます。ただ、その雰囲気がTime誌のような作りでちょっとペラペラな感じになってしまうのが残念ではあります。

自炊した電子書籍を読むのに使えるWebベースのZipリーダー「Mark It Now!」

2012-02-17T21:00:00+09:00

Mark It Now!はWebブラウザ上で動作するZipリーダーです。Zipで作成された電子書籍をWebブラウザで読み進めるのを目的としています。

最初にログインをします。

本当はここで書籍の一覧が出るはず…。でも登録方法などが分からず挫折しました。

デモ動画です。きちんとセットアップするとこうなります。

Mark It Now!はスワイプ操作でページ切り替えができたり、しおり情報もオンラインで管理されるのでマルチデバイスで共有されます。容量の少ないスマートフォンなどでも書籍データ全てを持ち歩かなくても良いので手軽に読めるようになるでしょう。

業務で役立つオープンソース（2）「パスワード管理編」

2012-02-17T15:33:50+09:00

今回は「パスワード管理」にフォーカスして業務で役立つオープンソース・ソフトウェアやWebサービスを紹介していきます。運用も含めて、より良いパスワード管理のあり方を考えてみます。

Webアプリケーションを作るのに便利そうなコンポーネント群「UIKit」

2012-02-17T15:00:00+09:00

最近、TwitterのBootstrapが人気ですが、同じようにWebアプリケーションをデザインする際に使えそうなコンポーネント群がUIKitです。

まずダイアログ系のコンポーネントです。

閉じるボタン付き。

グレーアウトしたダイアログ。

HTML埋め込みもできます。

カラーピッカーコンポーネント。

確認ダイアログ。

通知（右上）。自動的に消える設定もできます。

コンテクスト（右クリック）メニュー。

主なコンポーネントとしては、ダイアログ、確認ダイアログ、カラーピッカー、クリックで回転するカード、通知、メニュー、ボタン式のドロップダウンとなっています。デザインがすっきりとしているので今風のWebアプリケーションに似合いそうです。

Webデザイナー向け。CSSを手軽に楽しむ「dabblet」,

2012-02-17T00:00:00+09:00

dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。

トップページです。上半分が適用されたHTML、下がそのCSSとなっています。

上にマウスを持っていくとメニューが表示されます。

ログインします。GitHubアカウントでログインできます。

色のところにマウスを持っていくとマウスオーバーで色が表示されます。格好いい！

グラデーションだとバルーンもグラデーションがかっています。

HTMLに切り替えて記述もできます。

メニューも色々です。保存しておくこともできます。

表示の配置を変更できます。

重ねて表示もできます。

Gistに保存できます。

dabbletを使うとリアルタイムに記述したスタイルシートがそのまま展開されていくのが面白いです。特にCSS3などの新しいプロパティをどう活かすか、みたいな実験をするのに向いていそうです。

GitHub+Capistranoでデプロイ管理「Strano」

2012-02-16T21:00:00+09:00

StranoはWebベースのCapistrano管理です。特にGitHubとの連携を重視して開発されています。

最初の画面です。まずGitHubを使ってログインします。

予めアプリケーション登録が必要です。

次にプロジェクトを登録します。

GitHubアカウントに登録されているプロジェクトを追加します。

登録しました。次にリポジトリをコピーするようですが、筆者環境では失敗してしまいました。

キュー管理もあります。

公式サイトのデモ画像です。

Stranoを使うとWebブラウザ上からデプロイタスクを追加してそのステータスを管理できるようです。GitHubのOAuthを使っているので面倒な設定も殆どなく使えるのが便利です。

Webページ内の検索ハイライトを複数ワードに対応させる「Find Many Strings」

2012-02-16T15:00:00+09:00

Webブラウザの検索機能は貧弱なものが多いです。インクリメンタル検索が限界でしょう。そこで検索に不満を感じていた方に試してもらいたいのがFind Many Stringsです。連続して検索してどんどんハイライトを追加できます。

インストールしました。右上、右から二番目のアイコンがFind Many Stringsです。

早速適当なWebサイトを開きます。

検索ボタンではなくFind Many Stringsのボタンを押して検索ウィンドウを表示します。

ファイル、ARの二つがハイライトされています。

さらに追加で検索します。今度は緑になりました。

さらに検索するとモスグリーンでハイライトされています。消す時には一括で消すのみになります。

デモ動画です。

2つ以上のワードがあった時に、そのどちらもが近い場所を検索したりするのに便利です。

秀丸エディタでReVIEW記法を便利に「ReVIEWタグ編集支援　秀丸マクロ集」

2012-02-16T00:00:00+09:00

テキスト記法の一つにReVIEWというものがあります。ePubやLaTeXに変換もできる記法です。そんなReVIEW文書を秀丸で作成する際に使いたいのがReVIEWタグ編集支援　秀丸マクロ集です。

利用には色々な手順があります。まずダウンロードしたマクロファイルを秀丸のプログラミングフォルダに入れます。

次に秀丸で.reファイル（README.reが一緒に配布されているのでそのファイル）を開きます。

そしてファイルタイプ別の設定を開いて、デザインを選びます。

ハイライトファイルを追加するのでReViewという設定を追加します。

ハイライトファイルも配布されているので、それを指定します。

するとこんな感じで色がついてみやすくなります。

次にマクロを一気に設定します。

さらにメニューを設定します。

最後にショートカットとメニューを紐づけて完了です。

例えば今回のCtrl+Eを設定しておけばこんな感じにメニューが表示できます。

コメントを追加したりするのも簡単です。

設定する際のステップが若干手間ではありますが、一回設定してしまえば便利な世界が待っています。ショートカットも充実しており、ヘッダの挿入やテキスト装飾も簡単に指定できます。

面白い！画像の上下の遠近を補正「ShiftN」

2012-02-15T21:00:00+09:00

建物の写真を撮ると、通常は下からのアングルになるかと思います。あまり極端な下からのアングルが格好悪い、そう感じる方はShiftNを使って調整してみましょう。

起動しました。

デモ画像を読み込みました。下からのアングルになっています。

自動で調整した結果です。随分真正面っぽくなっています。

調整する際に設定するパラメータです。

基準線を設定します。

ShiftNは独自のアルゴリズムによって遠近法によって歪んだ画像を補正してくれます。回転も使えるのでちょっと失敗した写真なども見やすくなるのではないでしょうか。

Webプログラマ必見。HTML5のセキュリティチートシート「HTML5 Security Cheatsheet」

2012-02-15T15:00:00+09:00

HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。

トップページです。様々な項目が並んでいます。

左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。

まだ日本語化されていない部分もあります。

ほぼ全てのWebブラウザが対象になる部分もあるようです。

項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。

HTML5ではありますがIE6などでセキュリティホールになる場合もあります。

任意のJavaScriptが実行されたりしないよう、エスケープしたりするのは当たり前ですが、それでも意外なところに書かれたJavaScriptが自動実行の対象になっていたりします。そうした見逃しを作らないためにも見ておきたいページになるでしょう。

Apache Clickを使ってWebアプリケーションを組むなら知っておきたい「Click JQuery」

2012-02-15T00:00:00+09:00

Click JQueryはApache ClickとjQueryを連携された場合のデモソフトウェアです。実際にApache Clickを使っていく上でのテクニックとして知っておくと便利そうです。

デモサイトです。様々なコンポーネントを試せます。

スライド系のデモです。

カレンダー連携です。

ダイアログのデモです。

カラーピッカーのデモです。

フォルダのツリービューです。

テーブルです。Ajaxでデータを読み込んでいます。

グラフ描画のデモです。

円グラフのデモです。

Apache Clickのコードも確認できます。

機能はメニューに分かれて表示されています。Ajaxやフォーム、チャート、各種コントロール、イフェクト処理などをコードを見ながら実際にコーディングに使えるのは良さそうです。コードを見るとJavaScriptライブラリを取り込んだりしているので、組み方も若干特殊になっているかと思います。

お手軽。動画をアニメーションGIFへ変換「video2gif」

2012-02-14T21:00:00+09:00

YouTubeなどの動画共有サイトの発達によって、ブログなどに動画を埋め込むのが簡単になっています。しかし面白いか面白くないか分からない動画をずっと見続けるのは苦痛です。そこでざっと内容を知りたい人のために使えるのがvideo2gifです。動画をアニメーションGIFに一発変換してくれます。

ターミナルで実行します。FFMPEG、Image Magickが別途必要です。

実行しました。が、筆者環境ではうまくいきませんでした。FFMPEGによる画像取り出しがうまくいなかった模様です。

video2gifの処理はシンプルで、MPEG4の動画からステップごとにGIF画像としてエクスポートして、それをImage MagickでGIFアニメーションとして結合しています。動画の概略を見せたりするのに役立ちそうです。

プロでも使えるレベルの多機能Webギャラリー「JetPhoto Server」

2012-02-14T15:00:00+09:00

JetPhoto Serverはオンラインギャラリーソフトウェアです。オープンソースの他に商用ライセンスもあるくらい、多機能で実用的なソフトウェアになっています。

インストールはウィザード形式で行えます。

DBテーブルの作成も自動です。

完了したら管理画面にログインします。

ログインウィンドウです。

ログインしました。エラーが出てしまっているのか、ローディングアイコンが出続けた状態でした。

こちらはデモサイトで写真が登録されています。こちらはアルバム一覧です。

一枚の写真を表示した例です。

時間ベースにストーリー仕立ての表示もできます。

外部ウィンドウで写真を表示した例です。

サムネイルビューです。

スライドショー表示もできます。

位置情報がついている場合はGoogleマップで表示できます。

アルバムごとにテーマを変更できます。

システムはPHP+MySQLで作られています。Webベースの管理画面の他、WindowsやMac OSX向けのクライアントソフトウェアも開発されています。

業務で役立つオープンソース（1）「グループウェア編」

2012-02-14T10:11:54+09:00

今回から不定期に「業務に役立つ」にフォーカスしてオープンソース・ソフトウェアやWebサービスを紹介していきます。まずは業務の根幹を担うとも言えるグループウェアに注目したいと思います。

表現力の高さに驚き。HTML5/Canvasグラフライブラリ「Flotr2」

2012-02-14T00:00:00+09:00

これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。

たくさんのサンプルが用意されています。一気に紹介します。

線グラフです。

途中で途切れた曲線のグラフも描けます。

棒グラフです。

マウスオーバーで値を表示できます。

積み上げグラフです。

円グラフです。

レーダーチャート。

範囲グラフ。

ローソクチャートです。

滑らかな曲線のグラフです。

マウスオーバーでグリッドが表示されます。

マウスズームのデモです。

マウスで一部の範囲を指定できます。

折れ線グラフです。

マイナスの値にも対応。

クリックでリアルタイムにグラフを描きます。

画像ダウンロードにも対応しています。

データを表計算で見せる機能も。

タイトル部分もカスタマイズできます。

グラデーションもできます。

タイムライン表示です。

マーカーをつけることもできます。

Flotr2で表現できるグラフは基本として線、棒、ローソク、円、バブルとなっています。対応ブラウザはHTML5を利用できる必要があります。ただしIEについてはIE6からサポート対象になっています。もちろんスマートフォン対応です。

この発想はなかった。GIFアニメーションをCanvasで解析して自由に再生「jsgif」

2012-02-13T21:00:00+09:00

GIFアニメーションは動画が当たり前になった現在、廃れるかと思ったのですが未だに好んで使われています。特にちょっとしたお笑い系動画をGIFアニメーションにしていると面白いです。そんなGIFアニメーションを再生、リバース再生など自由に操作できるようにするJavaScriptがjsgifです。

まず最初の表示です。全てGIFアニメーションになっています。

ブックマークレットを実行すると、赤い枠が表示されます。クリックするとフレームの解析が行われます。HTML5対応ブラウザ向けですが、Google Chromeではコントローラーがうまく表示されませんでした（SafariはOKでした）。

画像の下に操作するコントローラーが表示されます。

フレームに関する情報を表示しています。

色々なGIFアニメーションが用意されているので楽しめます。

右回転、左回転によって右脳、左脳が分かれる女性の回転する画像もばっちりです。

デモ動画です。猫がビニールにアタックする有名なGIFアニメーションを操作しています。

jsgifはGIFアニメーションをCanvas上でレンダリングする際に解析し、フレーム単位での再生を行えるようにしています。思ってみれば単に繰り返すだけで技術的にはとても古くさいものでした。それだけにjsgifによってHTML5の力がアニメーションGIFに加わったとさえ言えそうです。

PCやスマホがなくてもこれがあればツイートできる（ただしモールス信号）「tworsekey」

2012-02-13T15:00:00+09:00

インターネットはあるけれどパソコンもスマートフォンもない。そんな時でもTwitterをやりたいという方で、モールス信号が打てる方はtworsekeyを用意しておくと幸せになれるかも知れません。tworsekeyを使うとモールス信号のデバイスを使って、ツイートができます。

装置の全体像です。

中はこんな感じ。

デモ動画です。

モールス信号機にイーサネットケーブルがついているというのがなかなかシュールですが、実際にメッセージが送れてしまう辺りがとても面白いです。実際にTwitterアカウントもあり、@tworsekeyでツイートが見られます。

MOONGIFT

プレビュー付き。FirefoxアドオンのMarkdownエディター「MarkUpDown」

大きなアイコン、リボン風UIが格好いいWYSIWYGエディタ「GhostEdit」

WordPressのデザインをHTML/CSSのペアで試せる「Pears」

業務で役立つオープンソース（4）「アクセス解析」

既存のHTMLやURLからMarkdownへ変換「html2text」

HTML5の中でも使える、使わない方が良い機能を学ぶ「HTML5 Please」

JavaScriptのオブジェクト差分を取る「difflet」

ニホンノアニメサイコー「Kanade」

マーケターに。ツイートを分析、Excelに出力「The Archivist Desktop」

撮ってすぐに投稿「tottepost」

HTML5/スマートフォン対応のWordPressテーマ「Reverie」

ついにきた。Webブラウザにテキストエディタを内蔵「Skyedit」

粒子を使ったParticle表現を自在に操るFlashライブラリ「Flint Particles」

業務で役立つオープンソース（3）「時間管理」

【★☆2/24（金）も臨時増員60名★】KONAMI「ドラコレ」 の舞台裏を公開！ ～エンジニア向けセミナー

概要

手軽に電子書籍を作成できるコマンドツール「easybook」

JavaからWordPressを操作するライブラリ「WordPress-Java」

IE8以前に救済。HTML5のタグを利用可能に「html5shiv」

プレミアム会員300名突破記念「なぜプレミアムなのか？」

メディアは広告だけなのか？

読んでもらえる

読者の方を向く

プレミアム向け機能

1. プレミアム専用記事の購読

2. ソフトウェア紹介記事の先行購読

3. 電子書籍（ePub）ダウンロード

4. 各記事に付与情報

5. ブックマーク機能

料金について

こんな手が！Faviconを使って通知数を表示する「Tinycon」

グループ決めに。ランダムにATNDイベント参加者をグループ化「ATND GROUPING」

Web上のテキスト修正をトラッキング「Ice.js」

凄いん…だよな？デザインの自由度を最大化したCMS「Berta」

滑らかに自然なページ送りができるJavaScriptライブラリ「turn.js」

自炊した電子書籍を読むのに使えるWebベースのZipリーダー「Mark It Now!」

業務で役立つオープンソース（2）「パスワード管理編」

Webアプリケーションを作るのに便利そうなコンポーネント群「UIKit」

Webデザイナー向け。CSSを手軽に楽しむ「dabblet」,

GitHub+Capistranoでデプロイ管理「Strano」

Webページ内の検索ハイライトを複数ワードに対応させる「Find Many Strings」

秀丸エディタでReVIEW記法を便利に「ReVIEWタグ編集支援 秀丸マクロ集」

面白い！画像の上下の遠近を補正「ShiftN」

Webプログラマ必見。HTML5のセキュリティチートシート「HTML5 Security Cheatsheet」

Apache Clickを使ってWebアプリケーションを組むなら知っておきたい「Click JQuery」

お手軽。動画をアニメーションGIFへ変換「video2gif」

プロでも使えるレベルの多機能Webギャラリー「JetPhoto Server」

業務で役立つオープンソース（1）「グループウェア編」

表現力の高さに驚き。HTML5/Canvasグラフライブラリ「Flotr2」

この発想はなかった。GIFアニメーションをCanvasで解析して自由に再生「jsgif」

PCやスマホがなくてもこれがあればツイートできる（ただしモールス信号）「tworsekey」

【★☆2/24（金）も臨時増員60名★】KONAMI「ドラコレ」の舞台裏を公開！～エンジニア向けセミナー

秀丸エディタでReVIEW記法を便利に「ReVIEWタグ編集支援　秀丸マクロ集」