infoalive labs » tanaka

iPhoneでWebサイトの表示が小さい場合の対処法

tanaka — Thu, 22 Jul 2010 06:50:36 +0000

先日のiPhone自動文字縮小について記述しましたが、今回iPhone向けサイトを構築していて、シミュレータなどと比較すると非常に画像サイズが小さく、縮小されて表示されてしまうという現象となりました。

どうも、iPhoneはデフォルト横幅960pixとしてレンダリングし、それをiPhoneの解像度にあわせて縮小表示するようです。

これを実際のpixelにあわせて表示させるためにはmetaタグにて viewportの指定を行う必要があります。

iPhone3 iPhone3GSの解像度ぴったりにあわせる場合には

と指定することによって、サイトを横幅320pixとしてレンダリングして表示されます。

これでも文字が小さいと感じる場合は前回のエントリの-webkit-text-size-adjust とあわせると良いでしょう。

iPhoneでWebサイトを表示した場合の文字サイズの調整

tanaka — Thu, 08 Jul 2010 10:10:57 +0000

iPhoneのsafariではWebサイトを最適に表示するために文字サイズを自動調整する機能を持っています。

しかし、携帯向けのサイトと共通のHTMLで表示した場合に予想外にサイズが小さくなり文字が読みづらくなってしまう場合があります。

この場合、-webkit-text-size-adjust という属性を設定し文字サイズの自動調整をOFFまたは倍率固定することで回避できます。

例：

↑自動調整をOFFにする

↑文字サイズを1.5倍にする

はやぶさまとめプレゼンをしました

tanaka — Fri, 18 Jun 2010 03:34:29 +0000

社内のプレゼン大会で小惑星探査機「はやぶさ」がどれだけすごくて感動するのかをまとめて発表しました。

Flashのプレゼンテーション形式になっていますのでこちらでも公開します。

はやぶさまとめプレゼン640pix

はやぶさまとめプレゼン1280pix（原寸）

原寸バージョンは幅1280pix、高さ1024pix以上のディスプレイ推奨です。

システム開発のうえで、はやぶさの冗長性は見習いたいですね。

infoalive labsとtwitterの連動始めました

tanaka — Tue, 15 Dec 2009 05:46:13 +0000

infoalive labsに投稿されるとtwitter （infoalive_corp）にも反映されるようになりました。

ムービークリップを特定フレームまで再生してから停止させる

tanaka — Tue, 31 Mar 2009 07:25:24 +0000

Flashでゲームを作成した場合に、ヒットポイントを表示するゲージを扱うことがあるかと思います。

例えばダメージをうけた場合に特定の位置まで

gotoAndStop([フレーム番号]);

でも良いのですが、これだといきなり減ってしまい味気ない感じになってしまいます。

モーショントゥイーンしつつ指定の位置で停止出来ないものかと考えたのですが、_rootに停止位置フラグを置いて各フレームに、

if(_root.[停止位置の変数] == [フレーム番号]){

this.stop();

}

とするのも芸がありません。（100フレームあったとして全てに書くのもバカバカしいですしね）

こういった場合は次のようにするのが良いのではないでしょうか？（AS2.0です）

ステージ上に再生したいサンプルのムービークリップ（インスタンス名：test_mc ）とテスト用の再生開始ボタン（インスタンス名：test_button）を配置します。test_mcの1フレーム目にはstop();を記述して再生はストップした状態です。

（ボタンをクリックした場合に25フレーム目まで再生して停止するサンプルスクリプト）

var test_mc_stop = 1;

test_button.onRelease = function(){

test_mc_stop = 25;

test_mc.play();

}

test_mc.onEnterFrame = function(){

if(this._currentframe == test_mc_stop){

this.stop();

}

onEnterFrameイベントで、毎フレーム呼び出されて currentframe で現在のフレーム位置をチェック。

予めボタンクリック時にセットされたtest_mc_stopと同じフレーム位置であれば再生を停止します。

AS3.0ではもう少しスマートな方法があるのかもしれませんが・・・・・

文字コードUTF-8のページに設置したmailtoの文字化け

tanaka — Fri, 27 Mar 2009 10:39:36 +0000

弊社のサービス「のみテレ」に幹事サポート機能を追加したので、社内のお花見告知に早速使用してみたのですが・・・

特定のメーラーで文字化けが発生するという報告がありました。

基本はモバイル向けですので、モバイル端末では問題ないのを確認していたのですが、PCではOutlook系のメーラーにてサブジェクト、本文ともに文字化けしていました。

調べてみるとどうやらUTF-8のページにUTF-8向けにURLエンコードしたmailtoリンクを設置すると文字化けする模様。

サンプル
shift_jis

utf-8

shift_jis向けにURLエンコードした場合では正常に表示されたのでこちらで問題ないと思いきや・・・

今度はThunberbirdで文字化け発生です。

shift_jisで正常に表示される
- Outlook
- OutlookExpress（Windows Mail）
- Becky!2
shift_jisでは文字化けする
- Thunderbird
utf-8で正常に表示される
- Becky!2
- Thunderbird
utf-8で文字化けする
- Outlook
- OutlookExpress（Windows Mail）

どうやら「文字化けする場合はこちら」という形でリンクを併記するしかなさそうです。

ちなみにMacの場合は逆にURLエンコードしない方が文字化けしないという情報もありましたので、JavaScriptからOSを判定する必要があるかもしれません。

静的なリンクにはなりませんが、mailtoはSEOも関係ないので問題ないでしょう。

血液型PV合戦：ブログパーツ

tanaka — Mon, 16 Mar 2009 03:59:08 +0000

新しいブログパーツとして「血液型PV合戦」を公開しました。

パーツを貼ってくれたブログのPV数を集計し、勢力分布図が変化していきます。

血液型の種類によって人口が異なり、不公平になりますので、登録されたブログの平均PVから計算するように調整しています。

Flashへのフォント埋め込みとライセンス

tanaka — Tue, 03 Mar 2009 08:18:15 +0000

先日「新聞一面ジェネレータ」を作成した際に、固定で作成している大見出しとは別に自由にテキストを入力できる見出し部分のフォントを予め取りこんでおいて新聞風に見せるようにしていました。

しかし、色々と調べてみたところほとんどのフォントベンダーはFlashへのフォンと埋込を認めておらず、ライセンス違反になるとのことで、急遽修正しました。

基本的には第3者へのフォントの再配布と見なされるそうです・・・

確かに空きに選択した文字がアウトラインを伴って表示されるのですが、そのままフォント情報を抜き取って利用できる形にはなっていないんですよね。

（PDFへのフォンと埋込と配布についても同様に扱われる場合もあるそうです）

AdobeにとってみるとPDFやFlashで持っている機能が一部制限されるわけで、そこをなんとかしようとフォントベンダーとの交渉を重ねているようですが、はやく自由度が上がると良いですね。

ちなみにAdobeによると

小塚明朝・ゴシックについては編集可能な状態での埋め込みを許可しているようです。

http://www.adobe.com/jp/type/browser/legal/embeddingeula.html

※新聞一面ジェネレータでも小塚ゴシックを使用しました。

別件でポストカードの裏面を編集できるサイトを構築しましたが、その際はフォントベンダーさんが仲介されていた案件ということもあり、ベンダーさんのご厚意でフォントを埋込可能でしたが、普段はなかなかそうはいかないでしょうし、ましてや今回のような実験的サイトではほとんど収益が発生しないため無理ですね。

どこか思い切ったメーカーさんで、Flashへの埋め込みOK！という形でリリースしていただけるとかえって売上が上がるように思うのは素人考えなんでしょうか？

TextField へのスクロールバーの追加

tanaka — Fri, 13 Feb 2009 08:49:51 +0000

通知表ジェネレータにて縮小表示時に文字が読みづらいためサイズ変更したところ1画面に収まらなくなってしまいました。

そこで、スクロールバーを表示させるためにUIScrollBarというコンポーネントを使用してみました。

コンポーネントを使用するためには、[ウィンドウ]→[コンポーネント]で、コンポーネントウィンドウを開き、UIScrollBarをドラッグして、TextFieldの端へ配置します。

（この際にオブジェクトへ吸着にチェックが入っていることを確認しておいてください）

右端側へ吸着させれば垂直の、下部に吸着させれば水平のスクロールバーとなります。

あとは、TextFieldに収まりきらないテキストがセットされると自動的にスクロールバーが表示されます。

ただ、方法によってはUIScrollBarがうまく表示されない場合があります。

Varsからテキストをセットした場合
TextFieldの変数名とインスタンス名が同じであった場合

１は、TextFieldに変数名を設定し、変数にテキストを代入することによって内容を切り替えていた場合にスクロールバーがうまく表示されません。

TextFieldにインスタンス名を設定し

[TextFieldのインスタンス名].text = “代入するテキスト”;

というようにtextプロパティからテキストをセットする必要があります。

２はインスタンス名と変数名が同じ場合に変数への代入が優先されてスクロールバーが出ないおそれがあるためです。

TextFieldにインスタンス名をつけ、 ‘TextField.text’プロパティを使ってテキストを設定してください。TextFieldにはインスタンス名に加えて変数名も使用できますが、スクリプトに混乱を生じるおそれがありますので、変数名は削除することをお勧めします。

ちなみに、縦横50%のサイズに縮小した場合にスクロールバーが細すぎるため、幅を増やせないかとあれこれ挑戦してみましたが、配置時にサイズ変更をしても、実行してみると元のサイズ（幅16pix）で表示されてしまいます。

Flash CS3 ドキュメンテーションを確認すると

UIScrollBar コンポーネントは、オーサリング時にも実行時にも縦横に変形させることができます。ただし、垂直方向の UIScrollBar の幅、水平方向の UIScrollBar の高さを変更することはできません。

とのことでした。好きな幅に設定できるといいんですけどね。

好みの形にするには自作するしかないようです。

ダイナミックテキスト（デバイスフォント）へのマスク指定

tanaka — Fri, 06 Feb 2009 09:42:47 +0000

通知表ジェネレータの表紙には、本人の名前がセットされるようにTextFieldが配置されています。

ページめくりのエフェクトの為、表紙にはマスクがかかっており、裏ページにあわせてマスクが移動することで表紙がだんだん隠れていくのですが・・・・

いざパブリッシュしてみると名前欄が表示されていません。

調べてみたところ、デバイスフォントへのマスク指定はスクリプト側から

MovieClip.setMask()メソッド

にて指定する必要があるようです。

ただ単に動かないマスクであれば良かったのですが、今回は動作の絡んだもののため、仕方なくめくり始めると字が消える形でごまかしてしまいました。

そういえばデバイスフォントの場合、文字の回転をした場合も文字が非表示になってしまうんですよね。

（フォントを埋め込むと正常に回転出来ます）