<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>cockscomb.info</title>
	<atom:link href="http://cockscomb.info/feed/" rel="self" type="application/rss+xml" />
	<link>http://cockscomb.info</link>
	<description>cockscomb on blog</description>
	<lastBuildDate>Fri, 03 Sep 2010 04:59:23 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Realmac software &#8211; Courier</title>
		<link>http://cockscomb.info/realmac-software-courier/</link>
		<comments>http://cockscomb.info/realmac-software-courier/#comments</comments>
		<pubDate>Wed, 01 Sep 2010 11:58:26 +0000</pubDate>
		<dc:creator>cockscomb</dc:creator>
				<category><![CDATA[コラム]]></category>
		<category><![CDATA[ユーザーインターフェースの潮流]]></category>

		<guid isPermaLink="false">http://cockscomb.info/?p=20</guid>
		<description><![CDATA[Realmac software から リリースされた “Courier”。「配達人」の名を持つこのアプリケーションは、封筒 (envelope) と切手 (stamp) をモチーフとして、ファイルをオンラインの共有サー &#8230; <a href="http://cockscomb.info/realmac-software-courier/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.realmacsoftware.com/">Realmac software</a> から リリースされた “<a href="http://www.realmacsoftware.com/courier/">Courier</a>”。「配達人」の名を持つこのアプリケーションは、封筒 (envelope) と切手 (stamp) をモチーフとして、ファイルをオンラインの共有サービスにアップロードする。これまでにも美しいビジュアルの UI を生み出してきた Realmac software が、遊び心いっぱいの UI で送り出した、珠玉のソフトウェアである。</p>
<p><a href="http://cockscomb.info/wp-content/uploads/Courier-icon.png"><img class="alignleft size-medium wp-image-28 colorbox-20" title="Courier icon" src="http://cockscomb.info/wp-content/uploads/Courier-icon-300x300.png" alt="" width="300" height="300" /></a>アイコンは配達人らしい、メッセンジャーバッグをモチーフにしている。緑がかった青を基調として、絶妙なコントラストで描かれている。またステッチの表現や、Realmac software の頭文字から “RMS” とプリントされている表現など、細かい部分までしっかりと描き込まれている。</p>
<p><a href="http://cockscomb.info/wp-content/uploads/Courier-first-started.png"><img class="aligncenter size-medium wp-image-27 colorbox-20" title="Courier first started" src="http://cockscomb.info/wp-content/uploads/Courier-first-started-300x142.png" alt="" width="300" height="142" /></a></p>
<p>最初の起動直後にはビデオによるデモが観られる。最近よく見られる手法であるが、ユーザーが使い方に迷わないもっとも確実な方法であろう。</p>
<p>UI は、封筒の並んだ棚をイメージしたものである。棚のモチーフは近年の流行であろうか。また木目調も最近は多く見られる。注目したいのは画面中央下に見られるスイッチ型のコントロールだ。iPhone の標準 UI である <a href="http://developer.apple.com/iphone/library/documentation/uikit/reference/UISwitch_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006784">UISwitch</a> が登場して以来、この形のコントロールはデスクトップにも普及してきた。Courier ではこれを、封筒のモードと履歴のモードを切り替えるのに用いている。</p>
<div id="attachment_25" class="wp-caption aligncenter" style="width: 310px"><a href="http://cockscomb.info/wp-content/uploads/Courier-envelopes.png"><img class="size-medium wp-image-25 colorbox-20" title="Courier envelopes" src="http://cockscomb.info/wp-content/uploads/Courier-envelopes-300x142.png" alt="" width="300" height="142" /></a><p class="wp-caption-text">封筒が並ぶ表示</p></div>
<div id="attachment_32" class="wp-caption aligncenter" style="width: 310px"><a href="http://cockscomb.info/wp-content/uploads/Courier-successed-upload.png"><img class="size-medium wp-image-32 colorbox-20" title="Courier successed upload" src="http://cockscomb.info/wp-content/uploads/Courier-successed-upload-300x142.png" alt="" width="300" height="142" /></a><p class="wp-caption-text">履歴が並ぶ表示</p></div>
<p><a href="http://cockscomb.info/wp-content/uploads/Courier-demo-mode.png"><img class="alignright size-full wp-image-22 colorbox-20" title="Courier demo mode" src="http://cockscomb.info/wp-content/uploads/Courier-demo-mode.png" alt="" width="255" height="70" /></a>さて、このアプリケーションを購入するまではデモモードとして5回までの試用ができる。このときウインドウ右上には、残り試用回数が表示される。ウインドウ右上に試用中の表示をするのは最近のシェアウェアにありがちなことであるが、このように少し凹ませるような表現は目新しい。いずれにしても、ウインドウのタイトルバー部分に自前で何か描画するのは今後も流行していくだろう。</p>
<p>このボタンをクリックすると、購入を促す画面が表示される。このときアプリケーションの内部か、ウェブブラウザかのどちらかで購入できる。アプリケーション内からスムーズに購入できることで、購入までの敷居を少しでも下げようという姿勢が垣間見える。</p>
<div id="attachment_30" class="wp-caption aligncenter" style="width: 310px"><a href="http://cockscomb.info/wp-content/uploads/Courier-purchase.png"><img class="size-medium wp-image-30 colorbox-20" title="Courier purchase" src="http://cockscomb.info/wp-content/uploads/Courier-purchase-300x191.png" alt="" width="300" height="191" /></a><p class="wp-caption-text">購入を促す画面</p></div>
<p>実際に利用する際は、はじめに封筒を作成、編集する。この封筒はアップロード先やアップロード時の設定などをまとめておく機能で、複数作成できる。<a href="http://cockscomb.info/wp-content/uploads/Courier-editing-envelope.png"><img class="aligncenter size-medium wp-image-23 colorbox-20" title="Courier editing envelope" src="http://cockscomb.info/wp-content/uploads/Courier-editing-envelope-300x128.png" alt="" width="300" height="128" /></a>画面には封筒の表側と、サービスを表した切手が並んで表示され、この封筒に切手をドラッグアンドドロップする。はじめてそのサービスを使う際には、切手から吹き出し状の認証画面が表示される。認証できると次はアップロードの設定画面がやはり吹き出し状に表示される。吹き出し状の UI は、コンテキストをはっきりさせる上で十分に有用であり、Apple 自身 iOS における <a href="http://developer.apple.com/iphone/library/documentation/uikit/reference/UIPopoverController_class/Reference/Reference.html">UIPopoverController</a> の形で採用しているほか、多くのアプリケーションで見ることができる。</p>
<div id="attachment_21" class="wp-caption aligncenter" style="width: 310px"><a href="http://cockscomb.info/wp-content/uploads/Courier-authenticate.png"><img class="size-medium wp-image-21 colorbox-20" title="Courier authenticate" src="http://cockscomb.info/wp-content/uploads/Courier-authenticate-300x130.png" alt="" width="300" height="130" /></a><p class="wp-caption-text">Ember への認証画面</p></div>
<div id="attachment_31" class="wp-caption aligncenter" style="width: 310px"><a href="http://cockscomb.info/wp-content/uploads/Courier-setting-ember.png"><img class="size-medium wp-image-31 colorbox-20" title="Courier setting ember" src="http://cockscomb.info/wp-content/uploads/Courier-setting-ember-300x300.png" alt="" width="300" height="300" /></a><p class="wp-caption-text">Ember へのアップロード設定画面</p></div>
<p><a href="http://cockscomb.info/wp-content/uploads/Courier-envelopes-icon.png"><img class="alignleft size-medium wp-image-53 colorbox-20" title="Courier envelopes icon" src="http://cockscomb.info/wp-content/uploads/Courier-envelopes-icon-300x300.png" alt="" width="300" height="300" /></a>こうして作成されたアップロード設定のセットである封筒は、アップロード先を元に自動でデザインテーマが設定される。このデザインテーマは “.courierEnvelopes” の拡張子を持つプラグインバンドルになっており、<del datetime="2010-09-02T15:36:12+00:00">あるいは今後追加することも可能になるかもしれない</del>追加するための SDK が製品ウェブサイトでリリースされている。この SDK には Photoshop 用のテンプレートや、プロパティリストの書き方を説明する文書、サンプルのデザインテーマが入っており、デザインテーマに必要な3つの画像を比較的簡単に作ることができる。（2010/09/03 追記）</p>
<div id="attachment_24" class="wp-caption aligncenter" style="width: 310px"><a href="http://cockscomb.info/wp-content/uploads/Courier-ember-envelope.png"><img class="size-medium wp-image-24 colorbox-20" title="Courier ember envelope" src="http://cockscomb.info/wp-content/uploads/Courier-ember-envelope-300x137.png" alt="" width="300" height="137" /></a><p class="wp-caption-text">アップロード先に Ember を設定した封筒</p></div>
<p><a href="http://cockscomb.info/wp-content/uploads/Courier-plug-in-icon.png"><img class="size-medium wp-image-29 alignright colorbox-20" title="Courier plug-in icon" src="http://cockscomb.info/wp-content/uploads/Courier-plug-in-icon-300x300.png" alt="" width="300" height="300" /></a>アップロード先は初期状態で</p>
<ul>
<li><a href="https://s3.amazonaws.com/"> Amazon S3</a></li>
<li><a href="http://emberapp.com/">Ember</a></li>
<li><a href="http://www.facebook.com/">Facebook</a></li>
<li><a href="http://www.flickr.com/">flickr</a></li>
<li>FTP</li>
<li><a href="http://vimeo.com/">Vimeo</a></li>
<li><a href="http://www.youtube.com/">YouTube</a></li>
</ul>
<p>が選択でき、また “.uploader” 拡張子のプラグインバンドルで、追加することができる。現在のところ公式に</p>
<ul>
<li><a href="http://www.getcloudapp.com/">Cloudapp</a></li>
<li><a href="http://twitpic.com/">Twitpic</a></li>
</ul>
<p>のプラグインが提供されている。プラグイン開発用の API 公開が予告されていることから、対応するサービスは今後も継続的な増加が見込まれ、Objective-C 開発者であれば自分で増やすことも可能であろう。</p>
<p style="text-align: center;"><a href="http://cockscomb.info/wp-content/uploads/Courier-file-in-envelope.png"><img class="size-medium wp-image-26 aligncenter colorbox-20" title="Courier file in envelope" src="http://cockscomb.info/wp-content/uploads/Courier-file-in-envelope-300x142.png" alt="" width="300" height="142" /></a></p>
<p>アップロードするにはこの封筒に文書や画像、ビデオなどのファイルをドラッグアンドドロップする。そうするとファイルが封筒の中に入る。このとき複数のファイルをまとめて入れることもできる。<a href="http://cockscomb.info/wp-content/uploads/Courier-upload-setting.png"><img class="size-medium wp-image-33 aligncenter colorbox-20" title="Courier upload setting" src="http://cockscomb.info/wp-content/uploads/Courier-upload-setting-300x164.png" alt="" width="300" height="164" /></a>そしてタイトルや説明、タグに加え、サービスごとの設定をし、ウインドウ右下の “Deliver” ボタンを押すことでアップロードが開始される。</p>
<p><a href="http://cockscomb.info/wp-content/uploads/Courier-uploading.png"><img class="aligncenter size-medium wp-image-34 colorbox-20" title="Courier uploading" src="http://cockscomb.info/wp-content/uploads/Courier-uploading-300x142.png" alt="" width="300" height="142" /></a>アップロード中は履歴画面に移り、Mac OS X 10.6 から追加された <a href="http://developer.apple.com/mac/library/documentation/CoreLocation/Reference/CoreLocation_Framework/">Core Location フレームワーク</a>から位置情報を取得し、地図を使って進行状況を表示する。位置情報が取得できない際にはその説明とともにプログレスバーが表示される。このプログレスバーは <a href="http://www.atebits.com/">atebits</a> の <a href="http://www.atebits.com/tweetie-mac/">Tweetie</a> などでも使われているデザインで、シンプルなこのかたちが普及しつつある。</p>
<p>全体として遊び心に満ちており、また <a href="http://twitter.com/">Twitter</a> の普及にともない伸びてきたファイルを簡単にアップロードしたいという需要にも、分かりやすく簡単な使い勝手で答えている。今後プラグインが十分増えれば、ファイルアップローダーの決定版的アプリケーションとして不動の地位が約束されるだろう。</p>
<p><a href="http://www.realmacsoftware.com/courier/"><img class="aligncenter size-medium wp-image-35 colorbox-20" title="Courier website" src="http://cockscomb.info/wp-content/uploads/Courier-website-99x300.png" alt="" width="99" height="300" /></a>実際に利用している様子は <a href="http://www.realmacsoftware.com/courier/">Realmac software のウェブサイト</a>に画像やビデオを交えて詳しく紹介されている。ウェブサイト自体もアプリケーションと同じくらいよくできているため、一見の価値がある。</p>
<p>また Courier の最新情報は、Twitter で <a href="http://twitter.com/courierapp">@courierapp</a> をフォローすると良い。</p>
]]></content:encoded>
			<wfw:commentRss>http://cockscomb.info/realmac-software-courier/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>札幌発iPhone・iPadアプリのご紹介 2010 Summer</title>
		<link>http://cockscomb.info/present-iphone-ipad-apps-from-sapporo-2010-summer/</link>
		<comments>http://cockscomb.info/present-iphone-ipad-apps-from-sapporo-2010-summer/#comments</comments>
		<pubDate>Fri, 20 Aug 2010 04:58:07 +0000</pubDate>
		<dc:creator>cockscomb</dc:creator>
				<category><![CDATA[告知]]></category>

		<guid isPermaLink="false">http://cockscomb.info/?p=12</guid>
		<description><![CDATA[こんにちは。iPhone アプリ “Typoclock” のプログラミングを担当した大学生プログラマー Hiroki Kato (a.k.a cockscomb) です。「テクノロジーで個人を empower する」をモ &#8230; <a href="http://cockscomb.info/present-iphone-ipad-apps-from-sapporo-2010-summer/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>こんにちは。iPhone アプリ “<a title="Typoclock" href="http://typoclock.com">Typoclock</a>” のプログラミングを担当した大学生プログラマー Hiroki Kato (a.k.a cockscomb) です。「テクノロジーで個人を empower する」をモットーに開発中。現在は Mac/iOS 向けソフトウェアを適宜製作中。主に札幌・函館に登場。某大学非情報系学部在籍。志望校はありませんが、最終学歴大卒を目指しています。支援者随時募集中。(feat. <a title="@tehutehuapple" href="http://twitter.com/tehutehuapple">@tehutehuapple</a>)</p>
<p>iPhone Dev Sap という、札幌で iPhone/iPad 向けアプリを開発している人たちのコミュニティがあります。主に <a title="iPhone Dev Sap" href="http://twitter.com/iphone_dev_sap">Twitter 上で活動</a>しており、ときどき勉強会や飲み会を行っています。かくいう僕も iPhone Dev Sap の集まりに時たま参加させていただいています。</p>
<p>そして iPhone Dev Sap では明日、8月21日18時から <a title="Apple Store, Sapporo" href="http://www.apple.com/jp/retail/sapporo/">Apple Store, Sapporo</a> で、<br />
<strong>iPhone Dev Sap presents: 札幌発iPhone・iPadアプリのご紹介 2010 Summer</strong><br />
というイベントを行います。</p>
<p>主催の <a title="@frnk" href="http://twitter.com/frnk">@frnk さん</a>によると<q><a title="frnk*blog" href="http://d.hatena.ne.jp/frnk/20100819/1282182328">アプリの夏コレ</a></q>ということで、先日 iPhone アプリをリリースした僕も、ちょっとしたプレゼンテーションをやらせていただけることになりました。</p>
<p>なんだかちょっとしたプレゼントもあるらしいので、皆さんいらっしゃると良いですよ。発表者一覧など、詳しくは <a title="frnk*blog" href="http://d.hatena.ne.jp/frnk/20100819/1282182328">frnk さんによる告知</a>をご覧ください。</p>
<h3><span style="color: #444444;">追記 (2010/8/20 14:30)</span></h3>
<p>大切なことを書き忘れておりましたが、iPhone Dev Sap の最重要人物、幼児プログラマーとのユニットである <a title="@TeamMOSA2" href="http://twitter.com/TeamMOSA2">@TeamMOSA2 さん</a>にプレゼンテーションの手引きをしていただきました。この場を借りてお礼申し上げます。(answering to a <a href="http://twitter.com/TeamMOSA2/status/21639766502">tweet</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://cockscomb.info/present-iphone-ipad-apps-from-sapporo-2010-summer/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>WordPress を使い始める</title>
		<link>http://cockscomb.info/starting-to-use-wordpress/</link>
		<comments>http://cockscomb.info/starting-to-use-wordpress/#comments</comments>
		<pubDate>Tue, 17 Aug 2010 15:47:14 +0000</pubDate>
		<dc:creator>cockscomb</dc:creator>
				<category><![CDATA[雑文]]></category>

		<guid isPermaLink="false">http://cockscomb.info/?p=1</guid>
		<description><![CDATA[弊サイト “cockscomb.info” をライフストリーミングツール “Sweetcron” を使って作ったのがおよそ二年前。ウェブ上の活動を一箇所に集約できるのはなかなか素敵だった。ところが Sweetcron は &#8230; <a href="http://cockscomb.info/starting-to-use-wordpress/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>弊サイト “cockscomb.info” をライフストリーミングツール “<a title="Sweetcron" href="http://code.google.com/p/sweetcron/">Sweetcron</a>” を使って作ったのがおよそ二年前。ウェブ上の活動を一箇所に集約できるのはなかなか素敵だった。ところが Sweetcron は開発が止まり、オープンソースなのだから自分でいじればよいのだけれどそこまで時間も執着もなく、放置した。</p>
<p>とりあえず安定したプラットホームで作り直そうと思いながらだらだらと時間を過ごし、気が向いたから “<a title="WordPress" href="http://wordpress.org/">WordPress</a>” をバックエンドにした。見た目は以前のものの雰囲気を維持しつつ、WordPress 標準 “Twenty Ten” のスタイルシートだけ書き換えた。あとからぼちぼちテーマを作って、流行とかに乗りたい。（ちなみに Internet Explorer で見た目が崩れる気がするけど、面倒だし無視した。確認もしてない。どうせ Internet Explorer を使う人はあんまり見ないだろうし。CSS 切ってくれたら良いと思う。）</p>
<p>ライフストリーミングのコンセプトはとても面白いから、プラグインとかで追加していきたい。あとは Mac/iOS のプログラミング的なこともそのうち書く。</p>
<p>Sweetcron のサイトは<a title="cockscomb.info" href="http://archive.cockscomb.info/">アーカイブ</a>として残しておいた。</p>
]]></content:encoded>
			<wfw:commentRss>http://cockscomb.info/starting-to-use-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
