Category ‘制作日記’
まず、iPod touch（iPhoneも同じ）のSafariの問題点
・Flashが使えない。
・オンマウスで情報を表示する事が出来ない。
・専用に作られていないとクリックミスが多い。
・大きいページはよく落ちる（ホームに戻ってしまう）
・大きいページは動作が読み込みに時間がかかり、動作がもっさりする。
・フォームからファイルがアップできない。
・jQueryを使ったドラッグ＆ドロップをしようとするとスクロールしてしまう。（専用にスクリプトを書けば回避できる）
cssやjavascriptが効いてるのでそこそこ見れるが普通の PCサイトをパソコンの様に見れるという訳では無く、Flashが使える分PSPなどのゲーム機の方がマシに思える。
結局、画面が小さいので専用ページは携帯サイト用のものを元に一回り大きく作る感じが効率的で、色々と複雑な事をしたいならアプリを作る方がいい。
■フォント
iPod touch、iPhone 3Gは日本語フォントが「ヒラギノ角ゴシック ProN」 のみだったがiPadには「ヒラギノ明朝 ProN 」が追加されたらしい
。等幅フォントを使いたいときは「font-family:monospace;」
font-family : ‘HiraMinProN-W3’ ;
font-family : ‘HiraMinProN-W6’ ;
■横幅
iPod touch・iPhone 3G
ポートレート（縦向き）：320px
ランドスケープ（横向き）：480px
iPhone4
ポートレート（縦向き）：640px
ランドスケープ（横向き）：960px
iPad
ポートレート（縦向き）：768px
ランドスケープ（横向き）：1024px
■電話番号を勝手にリンクにしてしまう
「-」（ハイフン）を含む数値をSarfariが勝手に電話番号としてリンクしてしまうので下記を記述して、その機能を抑制する。
<meta name="format-detection" content="telephone=no">
■回転させると文字が大きくなる
画面方向の切り替え時にSarfariが勝手に文字サイズを調整してしまうので、CSSを使ってその機能を抑制する。
body {-webkit-text-size-adjust: none;}
■スクロール
「overflow:scroll」が効かない。
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3
これは、拡大して二本指でなぞるとなんとかスクロール出来ない事はない。
■アイコン
iPod touch、iPhone 3G、iPhone4、iPadのWebClipアイコンは
以前（iOS1時代）は60x60pxで作成し、iPhoneで自動に57x57pxに変換されるのがキレイとされてましたがiOS2以降は57x57pxで作成する方がキレイに表示できる様になりました。
それがiPhone4、iPadの出現で今までのサイズだとボケボケになってしまうようになりました。
各端末のアイコンサイズは
iPod touch・iPhone 3G：57x57px
iPhone4：114x114px
iPad：72x72px
とまちまちです。
ただ大きい場合は縮小され、角を丸めたり、ライティングしたりしてくれるので大きい方が良くなりました。
実際、どんなサイズがいいのかというと、当のAppleは129ｘ129pxなのでこれに合わせて作成した方が無難かと思われます。
2010/07/23 | Tags: ipad, iPhone, iPod touch | 制作日記 | コメントください »
今まで機種依存文字として敬遠されていた♥（ハート）なんかの文字もUTF-8でコーディングすると普通に使えたりするので、使いそうな記号を調べ直してみた。
使える特殊文字と機種依存文字
ついでに文字実体参照や文字コードも記載したので特殊文字の決定版と言ってしまう。（まあ誤記があるかもしれないけど・・・）
パソコン（MacとWindows）やiPod touchではあまり気にせず使え、文字色を変えるだけでも結構いい感じになる気がする。
ただ、ケータイを絡めると複雑になってくる。搭載してるフォントに該当する記号が無いと話にならないし、あったとしても記述方法がまちまちな為、ケータイでは素直に絵文字を使った方がよさそう。
あと今回試した機種のせいかもしれないがauのケータイでは天気の記号や星座のマークなどは絵文字に変換された。素敵な配慮だ。他のケータイも変換されるようになると絵文字の変換に気を配らなくてもいい時代が来るかもしれない。
2010/07/17 | Tags: 機種依存文字 | 制作日記 | コメントください »
2chビューアーは作成してから色々と弄ったので久々にブラウザチェックをするとIE6（internet explorer6）で表示が微妙に崩れるのは知っていたが（面倒なので直すつもりは無い）、もっと酷いことになっていた。
サーバー代を稼ぐ為に付けたGoogle Adsenseがスクロールされていない。更に調べるとIE7以前のブラウザはアウトらしい。アナライザーを見ると約20％の人に影響がある。
色々と探してみるとobject経由だとスクロールしてくれるらしい。詳しい方法は広告スクリプトを object タグで読み込む方法 : 亜細亜ノ蛾 – Weblogに書いてある。
要約すると空のhtmlを作りそこにGoogle Adsenseのバナーだけを置いて、それをobjectとして読み込ませるというものだ。
記事が古いのでもしかしたら規約違反になってしまうかもしれないし、広告内容がページと関係ないモノが現れてるが、付けないよりまし程度でIE7以前はobject経由で表示する様にした。
2010/06/24 | Tags: "Google AdSense" | 制作日記 | コメントください »
機能と価格で選ぶドコモ携帯にdocomoの2010年夏モデルを掲載した。
昨日、iPadが発売され結構なお祭り騒ぎだったようだがdocomoの新機種は至って普通な感じ、メーカーも様子見で抑えたラインナップなのかただ飽和状態なのか分からないが、もうちょっと攻めた製品が見たかった。
サービス面は殆ど追加が無かったが個人的には「i Bodymo」が欲しいけどその為に買い替えるほどの機能では無い。
iPadも毎日パソコンの前にいる仕事をしてるオレには今のところ魅力的に感じない、iPhoneの様にパソコン版と解像度が極端に違えば専用のページを作るのに検証用として欲しい所だけど、iPadの場合、Flashを無くすとかボタンを押しやすくするぐらいの配慮は必要かと思うが専用のページを作る程ではない。
ただ、今回はiPhoneの成功の後なので、iPhoneの時の様に「当たるかどうか怪しい端末」ではなく「当たるのがある程度確約された端末」なので開発者も多く参入するだろうし、WEBもiPad向けに最適化されたページを作るサイトが結構出てきそう。
2010/05/29 | Tags: docomo, ipad, iPhone, 携帯 | 制作日記 | コメントください »
以前は「コミック発売日」でGoogle検索すると上位に来ていたMyreleseだったが1・2ヶ月前から圏外になった。
比較的パソコンに詳しい人が使うコンテンツはGoogleユーザーが多く、詳しく無い人が使うコンテンツはYahoo!を使う傾向にあり、Myreleseは後者でYahoo!ユーザーが多く。Yahoo!やBingは依然として上位になっているので影響は少ないが気になる。
Googleダンスかと思ってしばらく放置していたが一向に改善される様子は無い。
大手検索サイトのエンジンは淘汰されていて、ロボット型は下記の4つのエンジンを押さえれば大体押さえられる。
Googleページ検索 サイト登録ページ
infoseek BIGLOBE All About J DION JP.AOL @nifty Netscape Japan So-net goo A9.com livedoor
Yahoo!ページ検索 サイト登録ページ
Fresheye Mooter AlltheWeb AltaVista
Bing サイト登録ページ
Excite Ask.jp Empas Japan （登録申請不可）
影響はPCサイトだけでなく携帯サイトにも影響している。
docomoはgoo
auはgoogle
softbankはYahoo!
と各キャリア事に標準の検索エンジンが分かれてる様に見えるが
gooの中身はgoogleなので実質googleがかなりの影響力がある。
携帯版のgooは独自な様で、my-releaseは単にクロールされてないだけの様です。
ドコモのiモード検索サービスがリニューアルされgooのサービスを使うようになり、検索結果に載らないサイトが激増しているとのことです | ke-tai.org
どうにかならないかと検索キーワードを増やしてみたり、逆に減らしてみたり、微妙に言い回しを変えてみたりと半月ほど対応してみたが変化なし、ペナルティを喰らったのかと申請しても変化無し、ウェブマスターズツールの（サイト全体の）キーワードを見てると「除外」「済み」の言葉が入ってる。2月20日に追加した発売日情報から削除したり済みにしたりする機能の残骸が公開ユーザーのページに残っているのを発見。ボタン自体表示されないし動作しないので影響は無いが検索ノイズになってしまっていた様だ。とりあえずノイズを削除したので何らかの変動があることを期待する。
2010/05/13 | Tags: google | 制作日記 | コメントください »
個人的にはFireWorks使いなのでPhotoShopやillustratorは使う頻度が少ない。
FireWorksはMacromedia時代はWEBのパーツを作るのにいい機能があったがAdobeになってから劣化する事はあっても良くなる事は無い。Adobeからすると「黙ってPhotoShop使えよ」って所だろう。
PhotoShopはスライスなど劣る部分もあるが概ねPhotoShopの方が優れているので出来るだけPhotoShopを使う様にしようかと思ってる。
illustratorはイラストを描くときと印刷物を作る時ぐらいしか使わないがWEBデザインも出来なくは無い。ただ元々印刷用のソフトなので設定をちゃんとしないとぼけぼけのWEBサイトになってしまう。
そこでイラストレーターでもWEBデザイン出来る様な設定の方法を書いてみます。
まずは「編集」→「環境設定」の全ての単位をピクセル（px）にする。
「表示」→「ピクセルビュー」で表示方法を切り替える。
「表示」→「ピクセルにスナップ」に切り替える。
これで大体WEBページを作れる環境になる。
実際に制作する際の流れで言うと
まず、「ファイル」→「新規」でプロファイルをWEBにしてから、アートボードを制作するWEBデザインの大きさをピクセルで指定する。（高さは適当に大きめに作っとく）
「オブジェクト」→「スライス」の「アートボードでクリップ」を選択しておく。
きちっとした、ぼけない1ピクセル線の四角を描きたい場合は四角を描いてから（この時、情報パネルの数値が整数になってなければ設定がおかしい）
線パネルの線幅を0.99pxにして（1pxだと上の線が若干ぼける）、線の位置を内側にするとピシッとした線の四角が出来る。
2ピクセルの線にしたい場合は1.99pxにするとOK
クライアントに確認出しするときにアンチエイリアスオフの文字でテキスト部分と画像部分を明示したい場合はMSPゴシックなどで書いたテキストを選択し、「効果」→「ラスタライズ」でアンチエイリアスを「なし」にするとビットマップフォントみたいになる。
後はスライスするなりして「WEBおよびデバイス用に書き出し」すればOKです。
2010/03/12 | Tags: Illustrator | 制作日記 | コメントください »
半年以上前からちょっとずつ進めてたamazon画像編集ツールamacco（あまっこ）がようやく大体の形になったので公開します。
amazonの画像には裏技があって、そのアドレスをちょこっと書き換えるだけでトリミングやリサイズが出来ます。この機能を使ってあたかも編集したかの様な画像を生成するWEBツールです。
「自由な切り抜き」の方は上で書いた半年前に思いついた方で画像を回転し、トリミングし、リサイズするツールになります。
回転させる画面はFlashを使っています。元々は青銅製の古びた道具のデザインを考えていたんだけど結局、思うような画にならなかったので、シンプルなのにしました。
Flashは勉強も兼ねてActionScript3.0で作ったんだけど、ActionScript2.0とは全く別物になってるC言語よりになった感じだ。手続きが増えたのでソースは増えるがクラスをガンガン作っていくスタイルなので、長い目で見ると流用しやすく作業分担しやすくなり大規模なコンテンツを作りやすくなったが、初心者にはとっつきにくく私の様な小規模なFlashを作る人間からすると面倒だ。
クリッピング（トリミング）の画面ではjQueryのプラグイン「Jcrop」を使った。リサイズは縮小はamazonがやってくれるけど拡大はやってくれない様なのでhtml上で引き延ばす事にした。
「顔認識切り抜き」は顔ラボというサイトを最近見つけたので制作する事にした。
顔ラボのAPIは画像の顔を認識して顔とおぼしき位置を返してくれる。その情報を使ってクリッピングしてリサイズしている。
マンガの表紙でも顔と認識する事もあれば写真なのに認識しない場合もある。
これらのツールの制作が遅々として進まなかったのは使う人が少なそうだったからだ。がんばって作っても使う人が居なければ意味が無いのでテンションが上がらない。
もし、顔ラボを見つけて無かったらお蔵入りしてたかもしれない。
もう少し、実用的なのも1年以上前から考えていたがamazonの裏技を使う訳では無いので別立てにしようかと思う。
2010/01/16 | Tags: amazon, 画像編集 | 制作日記 | コメントください »
OSやブラウザを変更すると文字がアンチエイリアスになったりするが多くはアンチエイリアスが効いていないいわゆるビットマップフォントで表示される。
少ないスペースに詰め込む事の多いWEBサイトは小さい文字の場合が多くアンチエイリアスが効いてしまうと読みにくいのでビットパップフォントが使われるのはいい事だけど、タイトルを画像では無く文字にしたかったり、長文を読ませるので出来るだけアンチエイリアスの効いたテキストで表現したい場合がある。
ビットマップで表示されているフォントでもサイズを大きくしていくと、アンチエイリアスが効く。そのサイズはフォントによりまちまちだ。
そこで、割とインストールされてる割合の高そうなフォント一覧を作成し、サイズをJavascriptで変更出来る様にした。
よく使われるフォント一覧表 for アンチエイリアス
調べてみるとフォントサイズを上げてもアンチエイリアスにならなかったり、フォントサイズを上げると消えてしまうフォントもある。
欧文フォントはMacとWindowsで共通化されてるフォントがいくつかあり結構使えそうだ。
日本語フォントはHG系のフォントが小さめのフォントでもアンチエイリアスが効く、MacはSafariなのでアンチエイリアスが効いてるのでスルーするとOfficeが入ってるパソコンが結構多いと思われるのでそこそこ使えるかと思う。
2009/12/26 | Tags: フォント | 制作日記 | コメントください »
WordPressのバージョンアップをしようと思ったらmySQLのバージョンが古くてバージョンアップ出来ないとの事。
2月にXREAの契約が切れるので別のサーバーに引っ越そうかとまたサーバー探しをする事にした。
少し前から気になってたギガレンタルサーバー、超激安のクイッカや最近勢いのある（低価格サービスを実現する、さくらインターネットの「自前」戦略）さくらインターネットも捨てがたい。
レンタルサーバの再考でも書いたがやっぱり収容ユーザー数が気になる。
専有サーバーなら問題無いが共用サーバーだと1サーバーあたりの人数が多いと同居するユーザーが高負荷なサービスや超人気のサイトだったりすると悲惨な事になるので、収容ユーザー数が少ない方が外れを引く可能性が減る。
あとは、開発や仮アップに使ったりするので色々な事ができる方がいいPHPだとPHP4とPHP5がhtaccessで切り替えられる方がいいし、画像もGDだけでなくImageMagickも使いたい。
cronも細かく設定したいし、MySQLは4と5の両方使えて、SQLiteも使えて、マルチドメイン、マルチサブドメイン、マルチFTPは欲しいし、後々の事を考えてRubyやPythonも使いたい。
もろもろ考慮してサクラのビジネスプラン以上とCORESERVERのCORE-A以上が候補となった。
MySQLが5しか使えないけどサーバー間コピーで引っ越しが楽なCORESERVER.JP
になりそう。
2009/12/20 | Tags: レンタルサーバー, 乗り換え | 制作日記 | 2件のコメント »
数ヶ月前からMyReleaseにもサイトリンクが付くようになった。
サイトリンクとは上の画の様に検索結果にサイト内のコンテンツへのリンクが付くやつで、ある程度Googleに認められないと付かないらしい。付いたのはうれしいけど、メニュー内容が載って欲しいのに公開ユーザー名が載っててなんか微妙だ。
そこで、サイトマップの優先順位をもうちょっと弄って変えてみた。
サイトマップの書式は公式サイトにsitemaps.orgに書かれている。半年ほど前にsitemap.xmlを半自動生成するプログラムを作ったけど今はユーザー数もコミュニティ数も増えてるのでかなりの容量になりそう。
gz圧縮するか分割する方法が記載されていたので、ひとまず分割する方法で対応する事にした。
そして、Googleウェブマスターツールで今掲載されてるリンクをサイトリンクに載せないようにブロックしてsite.xmlを再読込させる。しばらく待ってみたが変わる様子は無い。
年明けまでには直るかな？
2009/12/19 | Tags: Googleウェブマスターツール, sitemap.xml | 制作日記 | コメントください »