Nexus 7に入れているアプリの個人的なまとめ

日本で Nexus 7が発売されたのが9月末ごろのことでした、2万円を切る価格のAndroidタブレット、しかも Google謹製でOSは当時最新！……ということもあって早速ポチり10月上旬には手にしていました。

Nexus 7 - Google
ASUS 日本 （スペックはこのページが分かりやすい）




私がAndroid OSの端末を使うのは国内初のAndroidケータイとして2009年夏に華々しくデビューしたHT-03Aと、2011年夏に買い替えたXperia acro（SO-02C）と3代目です。OSもHT-03Aの Android 1.5 から後にアップデートで 1.6、Xperia acro では 2.3 と使ってきたのですが 3.x系はスルーで、acroは4.x系へのアップデートは行われないとアナウンスされていましたし、携帯電話をすぐに変える予定もないし、試しに新しいAndroid端末欲しいな*1、というのもありました。
タブレット製品としては、iPad（第3世代）も既に購入してはいたのですがそれは家族用で使っていたのもありますし、お値段も半分以下ですし、……というのも理由だったりします。


2ヵ月近く使ってきて感想としては、大きさも手ごろで動作も十分満足できる程度。またこれまでに購入した電子書籍を読むのにも重宝しており、かなり快適に利用していますね。
ただまぁ、iOS端末に比べてAndroidアプリはなかなか情報を集めるのが難しく、評判がよく便利なアプリを探そうとなると結構メンドイなー、と思うことがしばしば。そんなこともあって、現在自分が使っているアプリをまとめておこうかな、という趣旨。これが役に立つかは分かりませんが、一つの例として。

*1:最近の個人的な興味の分野がSVG関連なのですが、Android OS 3.x以降にようやく標準対応されてきたので、その辺りの検証もしたいな、という考えもありました

続きを読む

某オライリー社の技術書風の年賀状素材を作ってみました

具体的にどういうものか？結論から先に言うと、こういう感じのやつです。



Carpet python by rikuo is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://www.flickr.com/photos/brisbanecitycouncil/5278832161/.

来年、2013年の干支は巳年ということでヘビを描いてみました。後段でも説明しますが、クリエイティブコモンズライセンスの「表示」でこのヘビのイラストは公開しているので、自由に使えます。

続きを読む

AmazonのURLを短くするBookmarklet（Kindleのページにも対応）

AmazonのURLってごちゃごちゃと長いので、メールなどで人に紹介するときにやっかいですよね。それを短くするBookmarkletです。
この手のBookmarkletは以前にも作ったのですが、Kindleなど電子書籍のページでは動かなくなってしまっていたので手直しして自分用に利用していたものを公開した次第。
こんな感じの長いURLを

http://www.amazon.co.jp/gp/product/B007OZO03M/ref=bb1_ads_cel_1121?ie=UTF8&nav_sdd=aps&pf_rd_m=AN1VRQENFRJN5&pf_rd_s=center-1&pf_rd_r=16VZCMQM4WMMHB8FPVRE&pf_rd_t=101&pf_rd_p=122583989&pf_rd_i=489986




Kindle Paperwhite http://amazon.jp/dp/B007OZO03M

Bookmarkletの実行で、右上に書籍・商品のタイトルと短くしたURLを並べて表示します。
http://let.hatelabo.jp/rikuo/let/gYC-yunC86-NKA


ちなみに

AmazonのURLを短くする際、日本のAmazonの場合は

http://amazon.jp/dp/B004W2UBYW

こうした「amazon.jp/dp/ + ASIN」の形態ですが、米Amazonにリンクするのであればさらに短く

http://amzn.com/B004W2UBYW

でもいけます。


[これ豆知識な]

><

SVG filterを使って全てのページをゲームボーイ風にするGreasemonkey

ゲームミュージックと生存確認をかねた画期的な: svgのfilterを使ってドット階調っぽい効果をつける がかっこよかったので、アレンジしてこんなGreasemonkeyを作ってみました。


全てのウェブサイトをゲームボーイ風にするGreasemonkey


インストールはこちらから http://userscripts.org/scripts/show/138971


このGreasemonkeyをインストールすると、画面左上にこうしたアイコンが表示されます。

それをクリックすると、閲覧しているウェブサイトがゲームボーイのようなドット絵風の画面になります。


アイコンをもう一度クリックすると元に戻ります。

利用上の注意点
  • 普通のGreasemonkeyはGoogle Chromeなどでも使えるのですが、これはCSSでSVG filterを利用しているので2012年7月現在 Firefoxのみ対応です。
  • 「全てのページ」とは言え、フレームを使ったページとFlashには対応していません。
  • あと画像処理が複雑で、動作が重くなるかもしれませんのでご注意ください。
    • 特にgifアニメ画像があると、かなり負荷が大きいです……。


Bookmarklet版

Bookmarklet版も作ってみました。
Pixel Art filter - Hatena::Let

こちらはアイコンでの切り替え機能は無しで、元に戻す際はページを再読み込みしてください。


[どうぞご利用ください。]

ドット絵てきな解説


ゲームボーイは今から23年前の1989年に任天堂からは発売されたゲーム機で、当時の液晶画面はモノクロ4階調（4色）しか表示できませんでした。そのため、このGreasemonkeyでも全てのページを4色で表示されるように変換しています。
ただカラーが白黒になるのは仕方ないにしても
「4色だとガタガタになってしまうんじゃない？」

……と思ってしまうかもしれませんが、そこはタイルパターンというドット絵の技法でカバーしています。

タイルパターンとは

タイルパターンはこのように、少ない色数しか使えない環境でもピクセルの組み合わせて模様を作りグラデーションを表現するドット絵の基礎的な技法です。白から黒に変化するグラデーションをタイルパターンを使って表現すると









（2倍に拡大 上から順に4階調・7階調・13階調・25階調）

いずれも4色だけしか使っていませんが、こんな風にやりようによっては滑らかな階調を作ることができます。

ただ、頑張って25階調分のタイルパターンを作ってみたものの、その代わりに動作がすげー重くなってしまったために実際は階調を減らして、もう少し処理を簡略化させています。


この辺りの話はこちらに書いたのと、25階調版のSVG filterも置いてあります。
写真をゲームボーイ風にするCSS & SVG filterのデモ



技術的な解説

今回はそれぞれGreasemonkey/Bookmarkletではあるのですが、画像変換の部分ではJavascriptを使っているわけではありません。仕組みとしては、タイトルの通り SVG filter を CSSで指定しているだけ、という単純な構成です。

SVGとはなにか？

SVGとは Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、XMLで記述された画像形式のことです。ベクター系ということで、イラストや図などにも使われるのですが、アニメーションもできたりと様々な機能があります。
その中の一つが fliterです。

SVGのfilterとは

例えばこんな感じに使えます。


filterでぼかしをかけたサンプル

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 80">
<title>SVG filterのデモ</title>
<defs>

<!-- filter要素の設定、IDはbokashiに -->
<filter id="bokashi">
	<!-- feGaussianBlur要素はガウスぼかしを行います -->
	<feGaussianBlur stdDeviation="2"/>
</filter>

<style type="text/css">
<![CDATA[
	/* fill は塗り、strock系は線の設定です */
	.face{fill:#FFDD5F;stroke:#FF591F;stroke-width:3;stroke-miterlimit:10;}
	.lip{fill:none;stroke:#BF3000;stroke-width:2;stroke-miterlimit:10;}
	.eyes{fill:#044F00;}
	/* イラストの各種設定はここまで */

	/* filterの設定 IDを指定します */
	.elm{
		filter: url(#bokashi);
	}
]]>
</style>
</defs>

<!-- イラストの部分はここから -->

<g><!-- g要素はそれぞれの要素をまとめるグループ化の役割があります -->
<circle class="face" cx="27.6" cy="40.7" r="17.1"/>		<!-- 円 -->
<ellipse class="eyes" cx="16.8" cy="39.8" rx="2.2" ry="4.3"/>	<!-- 瞳の楕円 -->
<ellipse class="eyes" cx="38" cy="40.2" rx="2.2" ry="4.3"/>
<polyline class="lip" points="23.6,49 27.3,51.8 31.4,49 "/>	<!-- 口 -->
</g>

<g class="elm">
<circle class="face" cx="72.6" cy="40.7" r="17.1"/>
<ellipse class="eyes" cx="61.8" cy="39.8" rx="2.2" ry="4.3"/>
<ellipse class="eyes" cx="83" cy="40.2" rx="2.2" ry="4.3"/>
<polyline class="lip" points="68.6,49 72.3,51.8 76.4,49 "/>
</g>

</svg>

通常の(X)HTMLと違い、fill（塗り）やstroke（線関連）など独特のプロパティはありますが、Adobe Illustratorに慣れているとどういう指定かは理解しやすいんじゃないかなと思います。で、注目する点はfilterで

<filter id="bokashi">
	<feGaussianBlur stdDeviation="2"/>
</filter>

	.elm{
		filter: url(#bokashi);
	}

filter要素にidをつけて、それをCSSで指定する、といった形式でそれを適用します。
今回は対象となる要素（右側の顔マーク）にぼかしをかける、という指定になっていますね。


SVGでは他にもどのようなfilterが使えるか？というとMicrosoftのデモページで色々と試すことができるので便利です。
Hands On: SVG Filter Effects

SVGのfilterを(X)HTMLに

先ほどまでの例では、SVGファイルの中でfilterを使っていましたが、このfilterを(X)HTMLにも適用することもできます。
こんな感じで、CSSでfilterを指定すると画像もテキストもページ全体にぼかしがかけられます。

ページ全体にぼかしをかけたサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVG filterのデモ</title>
<style>
body{
	/* SVGファイルを指定して、filterのIDを記述 */
	filter: url(blur.svg#bokashi);
}
</style>
</head>
<body>
（略）

先ほどのSVGファイルを指定し*1、さらにIDを書くとそのfilterが適用されます。


SVGのfilterはうまく利用していくと結構複雑なことが可能で面白いのですが、SVGファイル内ならモダンなブラウザは大抵対応しているものの、CSSでfilterを指定するのはまだFirefoxしかダメなのが残念なところなんですよね……。

SVG関連リンク

あと、SVG作成ソフトとしてはオープンソースの Inkscape が定番ですが正直言ってかなりとっつきにくいのが難点。しかし、こちらサイトはかなり詳しい解説サイトですので色々と参考になるかなと。
InkscapeでDesign - Inkscapeの使い方 - もくじ

><

*1:インラインSVG要素があればそちらでも可

最近私が聴いているWebラジオ・アニラジ一覧

webラジオ・アニラジ消化しきれない・・・と聞いてるラジオをカウントしたら、前回集計時よりも視聴本数増えてて唖然とした。 - ポケグレにヌカ・グレネード。
こちらを読んで、さすがにこんなに多くはないけれども私もWebラジオをよく聴いているので、備忘録的にまとめておこうかなと。
2012年6月頃の記録として。


※更新日別に並べています。

月曜


火曜


水曜

  • 無し


木曜


金曜


土曜


日曜

  • 無し


特定日時


隔週配信のものがあったりするけれども、全部で週16本かー。とは言え、毎回欠かさず全部聞けているわけでもなく、ときどき抜けていたりしますが。

Webラジオの魅力や特徴

私はアニメ関係のラジオが好きで聴いているんですが、こうしたWebラジオ全般の特徴として大きいのが基本的に「いつでも好きなときに聞ける」こと。
配信の形態よっては電波のラジオのように、そのときしか聴けないタイプもあったりするんですが、上に挙げたラジオ番組は多くの場合 配信期間中であればいつでも好きな時に聴ける、また途中まで楽しんで一旦中断・そしてあとから再度続きを聴く……なんていうことも気軽にできるのが利点として大きいと考えています。
あとは電波のラジオだと住宅状況によってはノイズが入ってしまうけれども、Webラジオの場合はインターネットが繋がりさえすれば、クリアに聴けるのもメリットですね。私の住んでいる新潟県だと文化放送にハングルのラジオが混信してしまって、聞けないことも多かったです。


また、電波のラジオだと番組の時間は30分などときっちり決まっていますが、Webラジオの場合そこまでカツカツでないためにゆったりとしたリズムで番組が進行していることが多いですね。電波のラジオでも深夜帯の雰囲気に近いというか。そのため、他のメディアに比べてリラックスした感じでパーソナリティの話が聞けるのもWebラジオの魅力です。



おすすめラジオ番組

うーんこれは結構難して、どの番組も私は好きなんですが、放送回数を重ねるとそれぞれ独自の雰囲気が決まってくるので、人にはなかなか薦めにくいなぁ、と。
もしも好きなアニメ作品があれば、最近は連動した宣伝のラジオ番組をやっていることが多いので、そこから興味を繋げていくといいんじゃないでしょうか。また気になる役者さんがいるのなら、そちらの線から探すのもいいかと思います。
インターネットラジオ･テレビの番組表
こちらのサイトでは、Webラジオ番組とパーソナリティを網羅しているので現在どのような番組があるのか？あの声優さんがラジオをやっているのか？といったところも簡単に探せます。




……そういった点を踏まえて、おすすめのラジオ番組だと
ゆりゆららららゆるゆり放送室
来月7月から2期の放送が始まるアニメ『ゆるゆり』（公式サイト）のラジオ番組。ただ女性4人のパーソナリティという構成のため、初めて聴くと誰が誰の声なのか把握しにくいかもしれませんが、アニメ第1期の第1回の放送はニコニコ動画で無料配信しているので、そちらを見てからだとキャラクターが捉えやすいかなと

><

虹をモチーフにした他の公開デザインの紹介

今回、虹を装飾の要素に取り入れた公開デザインを制作したわけですが、はてなダイアリーには他にも虹をモチーフにしたステキな公開デザインがいくつもあるので、ピックアップして紹介してみます。



id:coyanさんの公開デザイン「RainbowSong」
こちらは正確には虹ではなく「環水平アーク（Wikipedia）」という気象現象をモチーフにされたものなのですが、大気中の水分による屈折で起きる状況……という広義には虹に類するということで。
固定幅の1カラムにフッタの構成で、青空に輝く七色をビビットな色彩で表現されています。



id:marchenroadさんの公開デザイン「rider」
2カラム右サイドバーの構成。この公開デザインの特徴はページのヘッダ部分にかかる大きな虹のアーチですね。



id:konkonholicさんの公開デザイン「rainbow on the blue sky」
2カラム右サイドバーで全体的にシンプルな構成になっています。虹の要素は？というと

ワンポイントでここに使われています、さりげないデザインで使いやすいかなと。



id:smoking186さんの公開デザイン「21 Prism」
2カラム右サイドバーの構成です。黒背景に虹の七色、という対比になっていますね。



id:enableさんの 公開デザイン「bifrost」
2カラム右サイドバー。ヘッダ部分に二つの虹が淡く配置されているのが特徴の公開デザインです。全体的に色も抑えめで落ち着いた印象になっています。またこの公開デザインの特徴ははてなスター

スクリーンショットだと分かりにくいのですが、はてなスターの星がgifアニメーション画像で踊るように飛び跳ねているのが特徴です。動きもとてもかわいくて、こちらはリンク先のサンプルで是非確認してほしいです。



関連リンク

公開デザイン一覧 - はてなダイアリー

><

dusk

theme

久しぶりにこのダイアリーのデザインを変更しました。単に作るのも面白くないので、今回制作するに当たって自己ルールで設定したのが大きく2点。

  • 画像を使わない
  • IE6でもきちんと表示されるように

世間的にはそろそろIE6,7のシェアも下がってきたのでそろそろIE8以上を前提に作ろう！画像を使わなくても色々できるはず！……と当初は思ったのですが、仮にIE8だったとしても はてなダイアリーは互換モードなので関係ないでござるの巻 orz
そのため、

  • ::afterとかでcontentプロパティを使わない（※っていうか使えない）

また

  • CSSハックは使わない
  • vendor prefixも使わない

ともしました*1。

全体的なレイアウトは1カラム

サイドバーがある2カラムにするのが面倒、ということも理由としては大きいのですが、1カラム & 太いフッタが好きなのでこの形態に。

装飾的な部分

IE6相当で、画像無しとなると border と background-color くらいでしか装飾に使える要素がないため、どういう風に構成するか？パズルのようで悩みました。

（Firefoxの3Dビューでページ構造を立体化）
CSSだけでやるとは言え、div要素を多用するのも安易ですし*2。
ページの要素をメモ帳に書き出し、あーでもないこーでもないとにらめっこしながら、これなら作れそうと考えてやってみたのが虹色の配色です。

日付部分の上部にある他、

Amazonの商品紹介時にも虹が現れるようになっています。


なお部分的な装飾は虹を模していますが、全体的なモチーフとしてはタイトルの「dusk」のままで

通常の日記部分は、薄暮の虹を示していて



プロフィールページ（/about）でさらに空が陰り



日記一覧ページ（/archive）では陽が沈む、という時間経過と黄昏を描きたかった、というのが今回のテーマですね。虹の部分はあくまで装飾のいち要素。






そしてこの「dusk」は公開デザインにも登録したので、利用は自由です。

公開デザイン「dusk」 - はてなダイアリー
[どうぞご利用ください。]


利用に当たっての注意点

この公開デザインを使うに当たって、いくつか問題点もあるのでそれの解説など。

日付部分の扱い



日付のH2要素では、文字間と行間をつめた設定になっています。そのため「2012年5月31日」などと、年月日といった漢字を使うと表示が崩れてしまいます。ですので、

「設定」から「記事の設定」で、日付の部分を編集するといいでしょう

%Y%m%d

個人的にはこの設定がいいかなと、「%Y-%m-%d」でも良いですが。また、年月日を使いたい場合はスタイルシートを変更してください。

「今日の一枚」の配置

はてなダイアリーにはフォトライフを使わずにダイアリーだけで画像登録できる「今日の一枚」という機能があるのですが、この機能は現在ではほとんど使われていないと思うので、対応しませんでした。一応 表示はされるんですが、かなりずれてしまいます。

（ページ右端にずれる）

ページ上部の前次リンク部分

はてなダイアリーは「<前の日 | 次の日>」などと前後の日記に移動できるリンクがページ上部と下部の二か所にあるのですが、上のリンクは非表示にしています。


これらの点は不具合ではなく、意図的な指定ですのでご了承ください。



*1:今回は既存の hatena2-lightblue をベースに制作しているのと、そもそもはてなダイアリーでは一律に base.css などが使われているため、ここでは「自分では使わない」というルールで。

*2:div.main / div.sidebarくらいは使っています