& 5周年！！！！！
もうずいぶん放置なかんじですが； 今年もよろしくお願いします。
せっかくなので軽く目標を立てるとすると、このブログをMovableTypeからWordPressに乗り換えようかなと思っております。ここ最近はMTカスタマイズネタをめっきり見なくなったのと、逆にWordPressのプラグインネタなどはしょちゅう見かけるようになったこともあり、流れに乗ろうかなと思ってるしだい。更新なさすぎのクセに...。
ついでにデザインもリニューアルしたいかなと。来月あたりでなんとかしたいなっ。
]]>
ついにスマートフォンデビューしました。
auはずっとスマートフォンでは他社から遅れをとっていたので、自分も次こそはauを離れてiPhoneにするつもりだったんですが、1ヶ月ちょっと前にこのINFOBAR A01が発表されて、考えが変わってしまいました。
前にPRISMOIDを買ったときも書いたんですが、今のところ4連続で深澤直人氏のデザインした携帯を使っている深厨でして、去年出たIS01があまりにもメガネケースだったため、もうauはないな...と思ってたんですが、ここにきてあのINFOBARのスマートフォンです。
もうこれは買うしかないなと、過去2度のINFOBAR（とくにNISHIKIGOIカラー）の状況から考えて初日は入手しにくいだろうと思い、発表後すぐにヨドバシで予約してました。
予想どおり初日の店頭販売はなく、予約した人のみ購入可能だったみたいで、無事に入手成功。
これで、INFOBAR » neon » INFOBAR2 » PRISMOID » INFOBAR A01 と、5連続深澤ケータイに。
そろそろauから何か出てもおかしくないレベルだと思う。
あと中村勇吾氏のデザインしたiida独自のUIもいいかんじですね。
iida UI デモサイト： http://iida.jp/infobar/virtual-touch/
http://twitter.com/yugop/status/70318750578130945INFOBARのUIですが、アイコンをはじめとするグラフィックは@hybridworks、フォントデザインは@motla、サウンドデザインは@yama_g、の皆さんの手によるものです。なんかウェブっぽいでしょ～。（謎）
とのことで、Webデザインを仕事にしてる身としては、たまらん仕様になってます。
]]>
& 4周年！！！
ブログ更新しなさすぎですが＞＜、今年もよろしくお願いします。
今ちょいとスマートフォンサイトなんかを仕事でやり出したりもしてるので、html5とかcss3等々アウトプットできればなと...。
]]>
前回のサイトリニューアル（html5編）につづき、今回はCSS3編を。まあそれほど多用してはいないんですが。当然と言ってはなんですが、IEは未対応で...。
最近ちょくちょく使ってるサイトを見かけるようになりました。うちでもテキストにシャドウをかけている場所が何ヶ所かありますが、例えば上のエントリータイトルの部分がそうですね。
ドロップシャドウ
.text-shadow {
text-shadow: 1px 1px 1px #79f;
}
x方向に1px、y方向に1px、ぼけ1px、色#79f のドロップシャドウを指定しています。
Aboutページでちょこっと使ってます。
.box-shadow {
-webkit-box-shadow: 3px 3px 6px #555;
-moz-box-shadow: 3px 3px 6px #555;
}
x方向、y方向、ぼけ具合、色 の指定の仕方は、テキストの場合と同じ。webkitというのはChromeやSafari用で、mozの方がFirefox用になります。
同じくAboutにて使用。
.box-radius {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
8px は角丸の半径ですね。
CSS3のMedia Queriesというやつらしいですが、ブラウザのウィンドウサイズに応じてCSSを変更できるというもの。
/* 横幅1677px以上 */
@media screen and (min-width: 1677px) {
.mediaqueries {
max-width: 1360px;
}
}
/* 横幅1337px～1676px */
@media screen and (min-width: 1337px) and (max-width: 1676px) {
.mediaqueries {
max-width: 1020px;
}
}
/* 横幅997px～1336px */
@media screen and (min-width: 997px) and (max-width: 1336px) {
.mediaqueries {
max-width: 680px;
}
}
/* 996px以下 */
@media screen and (max-width: 996px) {
.mediaqueries {
width: 340px;
}
}
このサイトは上の4段階で変化します。とは言え横幅1337px以上になると、あまり見られることはなさそうですが...。IEでは機能しないので、固定幅にしてます。
アニメーションプロパティtransitionというのを使うと、JavaScriptを使わずに動きを付けることができます。ただし現状ではwebkit系（Chrome、Safari）のみで、Firefoxでも対応してません。まああくまで実験ということで。サイト右部の「TOP」「ABOUT」のナビゲーション辺りで使いました。
.transition {
opacity: 0.5;
-webkit-transition: 1s ease-in-out;
}
.transition:hover {
opacity: 1;
}
上の場合だとマウスオーバーした時に、1秒かけてopacity（透明度）が0.5→1 になる、みたいなかんじですね。
今のところは、こんなかんじでCSS3を使ってます。何度か述べたように現状ではIEが対応してないので、企業サイトではまだ使いづらいですが、個人サイトレベルなら積極的に使っていけそうかな。
]]>
さてさて、Movable Type 5にしてからは、サイトがMTデフォルトなデザインで放置してましたが、ようやくリニューアルです！ サイト全体を右寄せにしたり、ロゴを右上、PAGE TOPを右下に固定したり、今までとちょいと違うことをやってみてます。
まあデザインに関してはさておき、今回はhtml5でコーディングすることをメインテーマにしていました。トップページはdivを1つも使わないという逆div厨風を吹かしています。あやしい所はまだありそうですが、とりあえずやってみることが大事！ ざっくりとした構成を以下にまとめてみました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <header> <hgroup> <h1></h1> <h2></h2> </hgroup> </header> <nav> <ul> <li></li> <li></li> </ul> </nav> <article> <section> <h1></h1> <p></p> </section> </article> <aside> <section> <h2></h2> </section> <section> <h2></h2> </section> </aside> <footer> <p><small></small></p> </footer> </body> </html>
「article」の使い方にちょっと迷いました。これについてW3C（日本語訳）では以下のように記述。
article 要素は blog エントリや新聞記事など、文書の中で独立した一片の内容を表します。
HTML 5 における HTML 4 からの変更点
独立っていう概念が分かりづらい感じがしましたが、上記のとおりエントリ部分を囲んでみました。
Internet Explorerは現在最新版の8でもhtml5には対応していません。これはJavaScriptを1つ読み込ませれば簡単に解決。
HTML5 を IE や Firefox 2 でも使えるようにする方法 - html5doctor - HTML5.JP
上記サイトの中ほどにあるhtml5.jsを使ってhead内に以下を入れてやればおｋです。
<!--[if IE]> <script type="text/javascript" src="html5.js"></script> <![endif]-->
html5は今までなかった要素が増えたので、cssをリセットするのも盛りだくさん。これもHTML5.JPさんを参考に。
HTML5 のリセット・スタイルシート - html5doctor - HTML5.JP
文法チェックしたら一応OK出ました。ただWeb制作者おなじみのFirefoxアドオンHtml Validatorは、なぜかhtml5になると&や©のような&の付く特殊文字がエラー扱いになって、ちょっと残念なかんじに...。Another HTML-lintも未対応ですね。
というほどでもないんですがね。まあ基本的なところで
<div id="header"> </div>
みたいにやっていたところを
<header> </header>
にしていって、あとは時間を<time>でくくったくらいなんで。
「form」はtype要素が増えたり、「canvas」で何かしら描いたり、「audio」やら「video」やら...とまだまだ試してないことが多すぎるので、たまにアウトプットしていければいいかなと思ってます。
サイトリニューアル（css3編）に続く...
]]>& 3周年！！！
ちょいと遅れぎみですが、今年もよろしくお願いします。（↑今年はこんなデザインで）
最近細かいネタはTwitterの方に吐き出してるせいか、ここでは全然アウトプットしてないので、もうちょっとなんとかしたいですな。
実はこのブログをhtml5でコーディングして、デザインもリニューアル予定だったりするのですが、いつ頃になるやら。
]]>今まで使ってたINFOBAR2がぼちぼち2年経つなぁと思っているタイミングで、同じプロダクトデザイナー深澤直人氏の新作PRISMOIDが発売されたので、機種変してみました。
未来的な未来
というコンセプトなのですが、これは1970～1980年代に思い描かれた"未来のイメージ"をテーマにしているということみたいです。ニコ動的にいうと「おっさんホイホイ」ですね。違います。
今回の機種変、実はiPhoneもちょっと考えたりしたんですが、長年auってこともあって結局は見送りになりました。あと2年くらい経ったら、auからもiPhoneもしくはAndroid携帯が出るんじゃないかという期待を込めつつ...。
そう言えば最近は携帯の専用スタンドが付属しないんですかね？このPRISMOIDもデフォでは付かず、別売のようです。しかも買った店では取り寄せになるとかで、とりあえずはスタンド無しでいってます。(´･ω･｀)
あとワンセグが非対応で、僕は全然使わないのでいいんですけど、ワンセグよく使う人にはオススメできない機種かと。
ちなみに自分の携帯は、INFOBAR » neon » INFOBAR2 » PRISMOID と来ており、4連続深澤のターン継続中。深厨。
]]>
2日程前にMovable Type 5の正式版がリリースされたので、ちょいと入れてみました。
4まではあくまでブログ主体でしたが、5ではウェブサイトを基準にブログを作成するという概念になったみたいですね。うちの場合はサイト＝ブログなので今までどおりなんですが。
サイトのデザインがMTスタイルなかんじなので、これを機に新しいデザインにしてみるつもりです。まあしばらくはこのままで...。
]]>クオリティ高すぎとかいうレベルじゃない...。
ええっと、4ヶ月ぶりのエントリーが良く分からないかんじの出だしですが、公開初日に観に行って久々に鳥肌が立ったので、ダダダッと書いてます。
序の時はほぼ旧作に沿って作られてましたが、今回の破はかなり新しい流れになってまして、えー...ネタバレはしないつもりなので、これ以上はあまり書けないんですが、もう1、2回観に行ってもいいくらい、DVD or ブルーレイ出たら絶対買うよ！ブルーレイ再生環境まだないけど！ みたいな凄さでしたね。
アニメは結構見る方で、深夜やってるのをひと通りチェックしながら、面白くなかったのは1話だとか3話あたりで切って、それでも週15本くらいは見続けて今期の当たりを探すというような生活を繰り返してきましたが、なんかそういうのがバカバカしくなるくらいのトンデモナイものが現れた、そんな感じになってます。
ちなみに上の写真は破のパンフレットで、全体で見せると多少ネタバレになってしまいます。これから観に行く人は観た後で買うのがいいかと。『観る前に開けるな！』という注意書きのシール（これをはがさないと中が見れない）はいい仕事してます。
]]>まあそれはさておき、最近会社のPCにCS4を入れたんです。で、一番使用頻度の高いPhotoshopを立ち上げたところ、CS3から結構変わったところがあって、それが使い易くなったんならいいんですが、どうにもやりにくかったので、最初にやった設定をメモしておきます。
Photoshop CS4になって一番に気づいたことは、拡大・縮小する時にススゥーっとアニメーションすることでした。これいらない＞＜ パパッと拡大・縮小したいです。すいませんAdobeさん。
→ [環境設定]の[一般]から[アニメーションズーム]のチェックを外す。
これまたスムーズ系なんですが、初期では手のひらツールでフリックした時にもススゥーっとスクロールし続けます。最初は案外使えるかも？と思ったのですが、やっぱり慣れてないこともあってやめることにしました。
→ [環境設定]の[一般]から[フリックパンを有効にする]のチェックを外す。
CS4はタブで開きやがります。↓ こんなかんじに。
ブラウザにはタブがないともはやネット巡回できないくらい定番ですが、Photoshopのファイルがタブで開くのはどうなのかね？う～んやっぱり使いにくいです。バラけさせてください。
→ [環境設定]の[インターフェイス]から[タブでドキュメントを開く]のチェックを外す。ついでにその下の[フローティングドキュメントウィンドウの結合を有効にする]もチェック外した方がよいかな。他のウィンドウに近づけてタブで結合させる機能だから。
500%以上拡大させると1ピクセルごとにグリッドが表示されるようになりました。↓
この機能は場合によっては使えるかもしれません。1600%くらい拡大してピクセルで作業するとかそんな場合は。でも普段はいらないかもね。
→ [ビュー]の[表示]から[ピクセルグリッド]のチェックを外す。
カンバスの縁にドロップシャドウを付けてくれました。↓
うん...。
→ [環境設定]の[インターフェイス]から[標準スクリーンモード]の境界線をドロップシャドウ→なしに。
まずどこを探しても「抽出」がない＞＜ CS3だとフィルタにあったはずなのに...。どうも「抽出」は自分で入れないとダメになったみたいです。髪の毛あたりの切り抜きでかなり使えるのになぜ！
公式ではこのページにインストールのやり方が書いてあるんですが、長いページなので「抽出」にかぎってまとめると、まずは以下のファイルをダウンロード。
以下このあたりからの引用で説明。
抽出フィルタをインストールするには、以下の操作を行います。
- Photoshop を終了し、以下のフォルダを開きます。
Windows ： Program Files¥Adobe¥Adobe Photoshop CS4¥Plug-ins¥Filters
Macintosh ： Macintosh HD/アプリケーション/Adobe Photoshop CS4/Plug-ins/Filters- アプリケーション DVD-ROM またはダウンロード後に解凍した「Adobe CS4¥Photoshop Content」フォルダ（Windows）／「Adobe Photoshop CS4 Content」ディスクイメージ（Macintosh）を開きます。
- 以下のフォルダを開きます。
32 ビット版 Windows ： 日本語¥その他¥プラグイン (オプション)¥プラグイン (32 ビット)¥Filters
64 ビット版 Windows ： 日本語¥その他¥プラグイン (オプション)¥プラグイン (64 ビット)¥Filters
Macintosh ： 日本語/その他/プラグイン (オプション)/Filters- 手順 1. で開いた「Filters」フォルダに、「ExtractPlus.8BF」（Windows）／「ExtractPlus.plugin」（Macintosh）ファイルをドラッグ＆ドロップします。
- Photoshop を起動します。
これでフィルタに「抽出」が追加されました。うんうん。
とまぁとりあえずはこのくらいで。他にも気づいて随時追加していくかもしれませんが。
]]>& 2周年！！
ちょいと出遅れぎみですが、今年もよろしくお願いします。
]]>来年は丑年ですよー。うし。
はい、こんなかんじ。今年もシンプルにまとめてみました。
去年は干支要素がなかったけど、今年は入れてみる。牛の柄はデザイン要素として取り入れやすく、見た目にも分かりやすかったからという理由で。この辺りはその年々で変えてますね。
そういえば日本郵便のサイト内に年賀状コンシェルジュなるコンテンツができてました。7つの質問に答えるとオススメの年賀状デザインを5つ出してくれて、素材もダウンロードできるという優れものです。というかFlashコンテンツとして良くできているなと。
ちなみに自分はこんな年賀状をオススメされました。
おーなかなか。（←えらそう）
自分はデザインしたものがあるので、ここでオススメされた素材を使うことはないけど、デザインしない人や時間ない人はこういうのも悪くないかもしれませんね。
それとこれが今年最後のエントリーになりそうなので、少し早いけど良いお年を！
]]>
何だか忙しくて頭の中がグルグルしてる今日この頃ですが、気づけば京都から東京へ出てきて1年が過ぎていました。
上のエントリーを書いたのが去年の11月18日なので、次の日の11月19日にこっちに出てきたことになるんですよねー。わー早いっ！1年前にWeb関係の職を探しに東京に来て、今年の2月から今の会社でWebデザイナーとして働き出して、もう11月...いやあと数時間で12月かー。
このブログの更新頻度も月1回くらいになってしまってるので、もうちょっと仕事で覚えたことなんかをアウトプットしていきたいところなんですが.........ね。（上の東京タワーのイラストも去年の使いまわしとかだし）
東京もまだ言ってない所たくさんあるし。もんじゃ焼きはいまだに食べてないし。会社のある渋谷近辺のラーメン屋はたまに巡ってるけど。あとゴーゴーカレーうまいね！東京関係ないけど！でもこっち来て存在知った。
そんなわけで、東京生活2年目突入します！（してます）
]]>コイツ買ってしまいました！32GBのヤツ。
軽く今さら感があるし、iPhoneじゃないのかよとか色々あるけど、まぁこれもちょっと前に第2世代型になったしね。単に今月の収入がいつもよりか少しばかり多かったのが大きな理由だけど。
で、さっそくWi-Fiのスポットを探しに街へくり出す。ネット環境ないと半分は使えてないようなものだしね。ちなみにずっとWi-Fiをウィーフィーって間違って呼んでたのに気づいた...（正しくはワイファイ）
最初はマクド内でいじってたけど、電波弱すぎて使い物にならず...その後も色々回ったけど、一番きれいに繋がったのがアップルストアの前とかひどい＞＜ もうちょっと探索しないと。フリースポットしか目当てにないのが悪いのかもしれんけど。
アプリはちょい前に登場したUNIQLOCKのを入れてみた。重い重いとうわさの。立ち上げは確かに遅いね。動き出したらわりとスムーズだったけど。買ったばかりだからとか関係あるのかな？でも使う機会は少ないかもね。
あとはTwitterクライアントのNatsuLiphone。ライオンのアイコンかわいい。Twitterのアカウントもあるもよう。
写真・動画もたくさん入れられるし、今までスルーしてたYouTube・ニコニコ動画をMP4に変換する的なエントリーを探してこー。YouTubeは今コレ使ってる。
NatsuLiphoneは「NatsuLion for iPhone」に改称したようです。
投票結果 "NatsuLiphone" の名称は "NatsuLion for iPhone" へと変更になりました - takumalog
]]>4.2で良くなったなぁと思うのは、テンプレート管理画面が1つのページで閲覧できるようになったことですね。4.1の時は各テンプレートが別々のページだったため、どこにどのテンプレートを使っていて...というのがちょっと分かりにくかったので、この改良はいいですね。以下のようなかんじになります。
MTとは全然関係ないけど、ページ一番下の [▲Page Top] 押した時のJSを変更。今までこのページの先頭へ、をちょこっとおしゃれに | SiMPLE*SiMPLEで紹介されてたものを利用してましたが、これを[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリスのものに変更。
jqueryをうちでもついに使ってしまいましたね。動きが以前より滑らかになるという理由で変更したんですが、それ以外にもこのPage Scrollerはidを付けた場所はどこでもスムーズにスクロールしてくれるところが良いですね。
例えばページの先頭には"header"というidを付けているので、
<a href="#header">ページ先頭</a>
と書いてやれば ページ先頭 へ ススゥー と。
<a href="#footer">footer</a>
と書けばもちろん footer へ ススゥー と。
これはいいかんじ！
]]>