React - Facebook製。JavaScriptのUI生成ライブラリ MOONGIFT
Facebookからまた面白そうなソフトウェアが出てきましたよ！ JavaScriptにおけるテンプレートフレームワークは数多く出てきています。いずれも興味深い作りなのですが、ここにきてFacebookがReactというライブラリをリリースしました。 ReactはUIを生成するJavaScriptライブラリで、MVCでいうところのVになります。さっそくコードを見てみましょう。 一番シンプルな実装例。左側がコード、右側が実行結果になります。 Reactは必須ではないのですがJSXというXMLライクな記法を使っています。 <hellomessage name="John" />のように定義するとthis.props.nameで値が取り出せます。実際の描画はリアルタイムに反映されるので、Helloのところを修正すればすぐにレンダリング内容が変わります。 こちらはタイマーを使った例。コードが見やす
SpritePad - ファイルをどんどん追加してスプライト画像を作成 MOONGIFT
CSSでスプライト画像を使うことは増えてきましたが、作成が面倒なのは変わっていません。専用のソフトウェアも幾つかありますが今回はWebブラウザ上でスプライト画像を作成できるSpritePadを紹介します。 使い方 使い方は簡単で、まずはアイコン画像をSpritePadにドロップしていきます。 複数ファイルをまとめてドロップできます。ドロップしたらドラッグして好きな場所に配置していきます。 画像を移動すると右側のスタイルシート設定も変わっていきます。 アイコンの配置が終わったらFit documentを押します。そうすると画像の大きさが最適化されます。 こんな感じにジャストフィットします。 ダウンロード 作業が終わったらDownloadリンクをクリックします。そうするとアイコンをまとめた画像とスタイルシート設定がダウンロードできます。 画像ファイル。ファイル名はsprites.pngになりま
ownCloud·クラウドが使えない職場、なら自前で立てるのはいかが？ MOONGIFT
うお、もの凄い勢いで進化しています！ 今はクラウド全盛の時代です。Dropboxでローカルデータをクラウド上に保存し、Google Appsでメールやスケジュールを管理し、さらにiCloudでスマートフォンやタブレットのデータをバックアップする。そんな中心配になるのは自分のデータがちゃんとセキュアに保存されているのかということでしょう。 企業においてはセキュリティ基準からクラウドサービスを安易に導入できないケースもあります。そこで使ってみたいのが自前で立てられるクラウドサーバ、ownCloudです。 元々ファイルストレージがメイン機能だった覚えがあるのですがバージョン6になって実に多彩な機能を備えるようになっています。順番に見ていきましょう。 ファイル管理 まずはファイル管理。ここではローカルのファイルを同期してクラウド上からの閲覧、ダウンロードできるようになっています。 写真はownCl
jquery.tweetable.js - NYTimesのツイート誘導施策を真似たjQueryプラグイン MOONGIFT
WebサイトのPVを伸ばそうと思った時に、一番に考えつくのがソーシャル拡散ではないでしょうか。単純にタイトル、URLをシェアするほか引用を使うとより訴求力が強まります。 とは言えわざわざ引用してまでツイートしてくれるのはよほどのことです。そこで使ってみたいのがjquery.tweetable.js、引用ツイートを手軽にしてくれるjQueryプラグインです。 例えばこんな感じに表示されます。引用できる部分を指定しているわけです。 マウスオーバーでアイコンがハイライトされます。 Twitterアイコンをクリックするとウィンドウが開きます。その際、引用文も入っています。 使い方としては以下のようにdata-tweetableで囲まれた文章が自動的にツイートできるようになります。 <a class="tweetable" href="https://twitter.com/intent/tweet
Countdown.js - Webで使える汎用性のあるカウントダウン MOONGIFT
カウントダウン機能をうまく使うとわくわくするようなコンテンツが提供できます。自分が生まれてから何時間経ったのか、未来のある日時にローンチするサービスを案内したりと色々な使い方が考えられます。 日時の差分をとって表示するのが基本ですが、その辺りの面倒さを吸収してくれるライブラリがCountdown.jsです。 デモです。 日時の差分を年、月、週、日、時間といった具合に全て分割して取得できています。さらに文字列の取得もできます。 ts.toString() => "5 years, 1 month, 19 days, 12 hours, and 17 minutes" と言った感じです。HTML出力もサポートされています。 ts.toHTML() => "<span>5 years</span>, <span>1 month</span>, <span>19 days</span>, <spa
タスクを見える化するカンバン方式導入のススメ MOONGIFT
今回はカンバン方式についてです。トヨタの生産方式の一つとしてよく取り上げられるカンバンですが、本来はかんばんらしいです。今はアジャイル開発の中で度々取り上げられることが多くなっています。 今回はそんなカンバン方式について、アジャイル開発とは切り離して取り上げてみたいと思います。カンバンを実現するためにアジャイル開発にしなければならないという訳ではありません、その良いところだけを取り入れられればプロジェクト管理に限らず便利に使える場面があるはずです。 やっていることが明確になる チームで仕事をしている時に大事なのは、誰が何をやっているのか分かるようにすることです。それが分かれば安心感が全く違います。怖いのはチームが考えていることと個人の考えとがずれ、全く違う仕事をしていた時です。 アジャイル開発の場合、作業開始のタスクは作業中のボックスに移動されます。それによって作業が行われる、行うと言った
IFTTTで使っているiOS用キーフレームアニメーションライブラリ·Jazz Hands MOONGIFT
Jazz HandsはiOS用、MIT Licenseのオープンソース・ソフトウェアです。 iOSアプリの中でシンプルなアニメーションを実現したいと思ったらチェックして欲しいのがJazz Handsです。IFTTTで実際に使われているキーフレームベースのアニメーションライブラリです。 最初の場面。 スワイプ操作でアニメーションしていきます。 デモ動画です。パーツごとにアニメーションしているのが分かるかと思います。 Jazz Handsではアニメーションさせたいビューを作成し、後はキーフレームを追加していけば良いだけです。変化させるフレーム数も指定できますので、二つを異なる動きで表現したりするとよりダイナミックな感じが出て格好いいと思います。 ユーザ操作イベントによるアニメーション実行はもちろんのこと、チュートリアルで自動で動いていくアニメーションとして使っても面白いと思います。スマートフォ
OneTimeBox - こんな簡単で良いの？と思えてしまうくらいシンプルなファイル共有サービス MOONGIFT
Drop.ioって覚えていますか？Facebookに買収されて消えてしまったサービスなのですが、個人的にとても好きでした。あの復刻版（さらに便利）とも言えるのがOneTimeBoxです。 そのシンプルさたるや、本当にこれで良いのと疑ってしまうくらいです。では早速試してみましょう。 トップページです。Create your Boxボタンを押します。ポチッとな。 完成！これでファイルアップロードができるスペースが出来上がりました。なんと簡単なのでしょう！ ファイルのアップロードはドラッグ&ドロップ。複数ファイルでもどんどんアップロードできます。 完了しました。後はこのURLを相手に教えてあげるだけでOKです。ね、簡単でしょう？ URLは認証すら不要です。Deleteボタンを押せばファイルが消えて、Downloadボタンを押せばファイルがダウンロードされます。ここでアドバンスアップローダーのリン
ソーシャルアイコンをまとめて収納しておくボタン·Share MOONGIFT
ShareはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 今はソーシャルサービスが真っ盛りです。その使い方一つでサービスの盛り上がりが全く変わってきます。しかしサービスが増えてくるとボタンの配置に困ることになります。そこで使ってみたいのがShareです。 押す前。たった一つのShareボタンしかありません。 押すとにょきっと各ソーシャルサービスアイコンが表示されます。 Shareは今のところTwitter/Facebook/Google+に対応しています。押す前は一つのボタンとして統一しておいて、押すとそれぞれのサービスを表示するというのはスペース的にもデザイン的にもいい感じではないでしょうか。 MOONGIFTの姉妹サイトMobile Touchではボタンと同じ動作を自前で実装しています。ボタンのデザインがサイトの色合いと合
なんと！Webブラウザ上で動作するLinuxエミュレータ·jor1k MOONGIFT
jor1kはJavaScript製、GPLのオープンソース・ソフトウェアです。 JavaScriptを頑張れば何だってできる、確かにそうかも知れません。しかしここまでできるとは思いもしなかった。jor1kは何とJavaScriptによるLinuxエミュレータです。 実行中。左がコンソールです。 立ち上げ中。 viだって使えますよ！ cat使って内容の出力ももちろん可能。 topだって使えちゃう！ X Windowも実装されています。速度はあれですがちゃんと動くだけですごいです。 マウスでウィンドウを動かしたりすることだってできます。 メニューも出せます。 jor1kはOpenRISCを使ってJavaScriptで作られたLinuxエミュレータになります。速度面では多少の難がありますが、10年くらい前のマシンはもっと遅かったイメージがあるので十分満足できる速度ではないかと思います。 何より再
フリーランサー/小規模向けのプロジェクト管理·Solo MOONGIFT
SoloはPHP製のソフトウェアです。 ごく小規模な、そう一人でも使えるプロジェクト管理は意外と使い勝手が良いものはなかったりします。少人数で使うにはちょっと大袈裟な機能がたくさんなので、手に余る感じでした。そこで紹介したいのがSolo、小規模にこだわったプロジェクト管理です。 インストール。ウィザードに沿って進めるだけです。 メイン画面です。プロジェクトが並びます。 プロジェクト作成画面。基本的にこういったモーダルウィンドウで入力を行います。 プロジェクトにはタスクが追加できます。 カレンダー機能があります。タスクの期限に合わせて表示されます。 クライアント。 タスク管理。プロジェクトを横断的にチェックできます。 ファイルの添付もできます。 プロジェクトテンプレート。 タスクはタイムトラッキング機能が備わっています。 Soloは主にフリーランスが集まってプロジェクトをこなすのに合わせた設
脱HDDの肥やし。撮り貯めた写真をみんなで楽しもう·Camera Life MOONGIFT
Camera LifeはPHP製のオープンソース・ソフトウェア（GPL）です。 スマートフォンの登場によって写真の扱いが一気に変わったような気がします。デジカメで撮るよりももっとカジュアルにどんどん撮影されていきます。そんな大量の写真をみんなで楽しめるのがCamera Lifeです。 デモサイトです。フォルダ、アルバムに分かれて写真が登録されています。 アルバムの中身。 個別の写真。レーティングやコメントが書けます。 写真のサイズを選んで表示切り替えもできます。 理路整然と写真を並べるのではなく、ななめに傾けて並べるだけで何となく楽しい感じが伝わってきます。写真は指定されたフォルダにアップロードするだけのシンプルな管理で、後はフォルダやアルバムを使って写真を管理すればあっという間にオリジナルギャラリーが出来上がります。 ちょっと前であればPinterest風表示が流行り、さらに最近ではFl
まるで本物！雨粒が窓に落ちる様子をリアルに再現·rainyday.js MOONGIFT
rainyday.jsはJavaScript製、GPLのオープンソース・ソフトウェアです。 コンピュータ上で自然現象を再現するのはとても面白い試みです。例えば物理エンジン、ライフゲームもその一つです。今回はWebブラウザ上で雨が窓にあたる様子を再現するrainyday.jsを紹介します。 背景はぼやけ、曇ったガラスに雨があたっていく感じが再現されています。 中央の枠はYouTube動画の再生ができます。 時間が経つと雨粒が増えていきます。 雨で窓が曇っている感じがうまく再現されています。 雨は垂直だけでなく、斜めに降らせることもできます。 rainyday.jsは背景を曇らせるのはもちろん、雨粒が落ちるところは曇りがとれて向こう側が見えるようになるなど細かい所にもこだわって作られています。さらに雨粒自体も背景の写真を透かしていて本物そっくりです。 コンピュータと異なり、自然現象はランダムな
Gmailを編集してみやすく·Signal MOONGIFT
SignalはGoogle Chrome用のソフトウェアです。 電子メールは仕事に欠かせないツールですが、その内容の殆どは不要なものです。意味のない前書き、フッター、中の本文…などなど。そこで使ってみたいのがSignal、Gmailのメールエディタです。 使い方です。Signalを認証する必要があります。 OAuth2による認証を行います。 例えばこんなメールがあります。上にEditingなどのボタンが追加されているのが分かるかと思います。 そこから不要な部分を消したり、件名を編集したりできます。 やっていることはシンプルで、JavaScriptによって動的にメールの内容を変更しています。そのため勝手に追加した文字は検索には引っかかりませんのでご注意ください。ともあれ件名を編集したりすれば一覧時にも内容が分かりやすくなるので便利です。 MOONGIFTはこう見る ビジネス上のメールでは余計
フラットUIなカレンダー·CLNDR.js MOONGIFT
CLNDR.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 カレンダー機能は意外とよく使われます。イベント系はもちろん、ブログのサイドバーにつけることもあります。そんなカレンダー表示をjQueryで提供するのがCLNDR.jsです。 デモ。左側にカレンダー、右側にイベントの一覧が表示されています。 別なデモ。カレンダーのみ表示して日付をクリックすると… イベント表示に切り替わります。 こちらはすっきりとしたデザインのデモ。 CLNDR.jsは今時のフラットデザインですっきりとした見やすいカレンダーになっています。そのまま使うのはもちろんjQueryベースとあって、他の処理と組み合わせて拡張するのも容易です。シンプルなUIだけに使い勝手が良さそうです。 MOONGIFTはこう見る カレンダーの利用場面はとても多いです。単純に表示するの
GoogleドキュメントをMarkdownに変換·gdocsExporter MOONGIFT
gdocsExporterはJavaScript製、Googleドキュメント用のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Googleドキュメントでファイルを作成して、その内容をMarkdownに変換して受け取れるのがgdocsExporterです。再利用性が高まりそうです。 スクリプトエディタでファイルを作成します。 さらに関数を実行。 最初は認証が必要です。 認証しました。これで準備は完了です。 後は任意のドキュメントでスクリプトを実行します。 変換結果はメールで受け取れます。 変換結果がメールで受け取れるというのが最初分かっておらず、筆者は何度も実行してメールが何通も届いてしまったのでご注意ください。GoogleドキュメントであればWebベースで文書が作成できますので、まずそちらで作成して結果だけメールでMarkdownとして受け取ると言った利用法が
高機能フィードリーダーがオープンソース化·Feedbin MOONGIFT
FeedbinはRuby/Ruby on Rails製のオープンソース・ソフトウェア（MIT License）です。 Googleリーダーの終了アナウンス発表後、雨後の筍のように出現したリーダーサービスも落ち着きを取り戻しつつあります。多数のサービスが生まれ、間違いなく多数のサービスが終了していくと思われますが、そんな中Feedbinはオープンソース化という道を選択したようです。 サインナップします。 3カラムの構成になっています。一番左がフィード一覧、中央がエントリー、右がエントリーの内容を確認する画面です。 スター登録もできます。 設定画面です。タグやAPIなど多数の機能があります。 シェアに際して外部サービスへ飛ばすこともできます（例えばApp.netが紹介されています）。 Feedbinは基本的な操作はキーボード主体でできるようになっています。サポートしているデータベースはPost
画面幅に応じて文字サイズ、高さを変更·FlowType.JS MOONGIFT
FlowType.JSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 レスポンシブWebデザインにおいては画面幅によってコンテンツの表示が変化します。そのため意図した通りに表示されていないと感じることが多いかも知れません。そこで使ってみたいのがFlowType.JSです。 最初の表示です。一行目の終わりの文字は75です。 文字サイズを大きくしましたがやはり終わりは75です。 逆にもの凄く小さくしましたが75のままとなっています。 FlowType.JSではフォントサイズ、行の高さをベースに幅を決定しています。そのため意図した通りのテキストがそのまま表現できるようになっています。幅を縮めると一気にテキストがぐしゃぐしゃになってしまった、といった事態が防げそうです。 MOONGIFTはこう見る FlowType.JSが役立ちそうな場面としてWebサイトの
PHP製のノンブロッキングサーバ·React MOONGIFT
ReactはPHP製のオープンソース・ソフトウェア（MIT License）です。 最近流行のnode。その特徴は何と言ってもノンブロッキングな仕組みにあります。しかしそのためにnodeを覚えるのはちょっと…と思う方はReactを使ってみましょう。PHPでノンブロッキングWebサーバを実現しています。 デモ。Hello World。 デモのコードです。PHPでWebサーバを立ててアクセスを処理しています。 別なデモ。変数は解放されず、アクセスの度にインクリメントしていきます。 そのコード。変数が徐々にあがっていくのが分かります。 ReactはPHP自体がアプリケーションサーバになってリクエストを処理しています。特徴としてはノンブロッキング、イベント駆動型での処理になります。多数のコネクションを処理しなければならないといった時に使えるのではないでしょうか。 MOONGIFTはこう見る 慣れて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使えるWebサービス・オープンソース（14）·Markdown MOONGIFT