2012年01月23日

スマートフォン用ページでリンク色の指定をする

最近、スマートフォン用サイトを作成していて、リンク色でいろいろ悩んだので備忘録的に。

一般的にHTMLでリンク色を指定するときはCSSで
a:link
a:visited
a:hover
a:active
で指定します。それぞれの意味とか、某ブラウザでは順番間違えるとうまく効かないとかありますが、それはまた別なハナシ。

スマホの場合、リンクというよりもタップしたときの反応色を指定します。
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
*CSS3
RGBとalpha値を、それぞれ0〜255、0〜100で指定するわけです。
alphaが0ですので、上記の指定方法は色を見せない、タップしても色が変化しない記述です。
このあたりの仕様も他のサイトに任せるとして、現在のスマホの2大勢力、AndroidとiPhoneの挙動が異なります。
iPhoneというかiOSの場合は、上記のCSSの記述で問題ありませんが、Androidではこの指定は効きません。
ただし、Androidでは上記の「表示させない」記述だけは効くようです。意味がわかりません。
そのため、jQueryMobile1.0では、アプリっぽさを出す演出かどうか不明ですが
jquery.mobile-1.0.cssの中の
.ui-mobile-viewport 部分で上記の指定をしています。
#関連記事
http://www.interactivebynature.net/blog/wordpress/2011.07.13.jquery-mobile-enable-tap-highlight-color

では、この指定をはずすとどうなるのか?
デバイスに依存したリンク色が表示されます。
iOSではalphaがかかった薄いグレーの背景がつきます。
Androidでは背景の色はつきませんが、緑やオレンジといった派手な枠の色がつきます。
押した感が出るのでいいと言えばいいんですが、ちっと格好悪いです。


ちなみに上記に載せた一般的なaタグのリンク指定ですが、これは
iOSの場合はa:active
Androidの場合はa:hoverの色がタップしたときに表示されるようです。

どちらにしても一瞬の表示で、すぐに次のページに移りますので重要なのか?と思われるかもしれませんが、どこをタップしたかわかりやすいので、結構重要です。

では、どのデバイスでも同じリンクの表現をできないのか?
という答えは、実際に試していないのでわかりませんが、

iOS・Androidのハイライト表示の指定について。(最下部のjs)
http://www.sprouthead.com/blog/css/highlight.html

iPhoneでa:hoverを実装する(クラスを作成し、個別のリンクに適用)
http://xirasaya.com/?m=detail&hid=232

あたりを参照すると幸せになれるかもしれません。
もっと読む>>>
posted by うみおよ at 14:20 | Comment(0) | TrackBack(0) | スマートフォン | このブログの読者になる | 更新情報をチェックする

2011年11月18日

iOS5で旧バージョンのjQTouchを利用するときの不具合

既存のjQTouchで作ったサイトがうまくリンクが利かなくなる不具合があり調べていたら、以下のページで報告されていました。

https://github.com/senchalabs/jQTouch/issues/297

解決方法は該当ページにもありますが、以下訳
jqtouch-b2 コードでバグを修正しました:

'handleTouch' ファンクションに下記のようなコードがあります:
startX = event.changedTouches[0].clientX,
startY = event.changedTouches[0].clientY,

上記コードを下記のように修正しました:
startX = event.changedTouches[0].pageX,
startY = event.changedTouches[0].pageY,

.clientY は、ページスクロールを位置情報(値)として扱いません。.pageY
は、スクロールも含めた全ページ中の相対的な値です。

iOS5, iOS4.3, と Android で検証済み。

上記のとおりコードを書き換えれば治りました。
posted by うみおよ at 10:04 | Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2010年10月12日

AIR for Android(まとめ)

Adobe AIRを使ってのAndroidアプリ作成方法の解説。
なかなかエラーが出て開発が進まなかったんだけど、ようやく開発を始めることができた。
Flash CS5でAndroidアプリ(Air for Android)まとめ
posted by うみおよ at 11:45 | Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

2010年03月26日

PHPで境界線を描く

PHPで境界線を判別するプログラムを作ろうと思ったのはいつのことだったか・・・
構想から含めたら1年以上かかったような気がしますが、本日ようやくサービスインしました。
画像から境界を判別して線を描く・・・すなわち「ぬりえメーカー」です。
GDでこんなライブラリを提供してくれればなぁと思うのですが、ないものは仕方がないので、いろいろ試行錯誤しました。

簡単に説明すると、閾値を使って2極にわけ、その境を描画してあげることで境界線を描いているように見せています。
なので、閾値の設定によっては色が異なっていても境界と判別されなかったりします。
特に写真は弱いですね。ベタな塗りのイラストだと結構きれいにぬりえとして出力してくれます。

http://www.oyogu.com/nurie/index.html
タグ:PHP 境界 gd 閾値
posted by うみおよ at 13:37 | Comment(0) | TrackBack(0) | PHP | このブログの読者になる | 更新情報をチェックする

2010年01月26日

imagettftextの「Warning: Could not find/open font・・・」と表示される問題の解決方法

ココのサービスで、サーバーを変更したら
Warning: Could not find/open font・・・というエラーが出て困ってしまったハナシです。
困ったらGoogle先生に聞くのもいいんですが、マニュアルもよく読みましょう、ということで答えはマニュアルにありました。

引用:phpマニュアル
PHP が使用している GD ライブラリのバージョンに依存しており、 fontfile が / で始まらない場合、ファイル名に .ttf が追加され、 ライブラリはライブラリが定義したフォントパスから ファイル名を検索しようとします。

ということで、このようなエラーが出た場合、フォントまでのフルパス(サーバーの絶対パス)指定を試してみてください。

また、imagettftextで文字化けする場合は、UTF8で値を渡していないために起こるようです。
文字コードをUTFにする、もしくはmb_convert_encodingなどでUTF8に変換してから値を渡してあげてみてください。
posted by うみおよ at 22:47 | Comment(0) | TrackBack(0) | PHP | このブログの読者になる | 更新情報をチェックする

2010年01月08日

MySQL4.x→5.1 at かごや

久々にハマったので備忘録です。
WordPressのDBを4.x系から5.1に移行しようとしてGoogle先生に問い合わせ。結構事例が多く楽勝と思ったのですが、なぜかさくらインターネットの記事ばかり。
ウチはかごやを使っているのですが、まあ大きな差はないだろうとタカをくくり早速作業に。
kagoyaのいいところは、4.xと5.1と併用して使えるところです。
(プランによって一つしか使えないプランがあるらしい。)
もともとアクセスの少ないサイトでしかも一つ前のサイトもディレクトリごと残しておいたので、移行中はそちらを表示させることにしました。
sshなど使えないのでphpmyAdminを使って作業。
DBにアクセスし、「エクスポート」を選択。
このあたりを参考に
・[DROP TABLE を追加]
・[AUTO_INCREMENT 値を追加する]
・[テーブル名やフィールド名を逆クォートで囲む] をチェック
・[データ] 内の全ての項目のチェックを外す
・[完全な INSERT 文を作成する] をチェック
して、エクスポート。
新しい5.1のDBに切り替えてインポート。
インポート時は
SQL互換モードでSQL40を選択

で、やってみたのですが文字化け。というか先頭の数文字しか表示されず、文字化け以前のレベル。
散々悩んだのですが、要するにエクスポートした後にローカルに保存するファイルが文字化けしてたらダメなんですよ。(当たり前)
なので、文字コードを変えられるテキストエディタを用意して切り替えて、文字化けや記事がきちんとエクスポートされているかどうかを確認する必要があります。
ところが何回いろんな文字コードのパターンで試してみても先頭の数文字しかエクスポートされません。
悩んだ挙句、ログイン時のphpmyAdminのホームにある言語設定をeuc-jpに変えたら正常にエクスポートできました。

phpmyAdmin

どうやらWordPressはUTF-8で保存してるーという頭があって気づかなかったのですが、DB自体はeucで、その中にUTF-8で保存しているらしいです。
なので、エクスポートもUTF-8でエクスポートして、テキストエディタでEUCに変換。
インポート時はEUCで読み込んだら正常に表示されるようになりました。
phpmyAdmin自体、使う機会がないととっつきにくいですが、エクスポートに関してはさほど怖くないので、いろんなパターンで試してみると良いかと思います。
基本の
・[DROP TABLE を追加]
・[AUTO_INCREMENT 値を追加する]
・[データ]をチェック
・[完全な INSERT 文を作成する] をチェック
を抑えておけば大丈夫なようです。

以上、備忘録でした^^;
posted by うみおよ at 11:31 | Comment(0) | TrackBack(0) | WordPress | このブログの読者になる | 更新情報をチェックする

2009年07月20日

Firefoxでスタイルシートが利かない

お客さんと打ち合わせ中、実績ということでいろいろと今まで作ったサイトを見せていたら、すごいガタガタに崩れたサイトが!

Noooooooooooooooooooooooooo!!

その場は取り繕ったものの、後から直そうと思っても、何が原因かよくわからない。どうもスタイルシートがきちんと適用されていないようなので、Google先生に聞いてみたところ、
<meta http-equiv="Content-Style-Type" content="text/css">
で、contentがきちんとtext/cssに宣言されていないと適用されないと書いてあるブログを教えてくれましたが、きちんとなってるしなぁ・・・

ヘッダ部分を見直したり、大文字小文字がおかしくなると書かれていたサイトもあったので試してみたけど一向によくならない。
作ったときはきちんと表示されていたんだから、最近直したのは・・・
と考えていたら、そういやプログラムの文字コードを直したんだっけ、と思って、CSSの一番上に書いてあった

@charset "euc";

@charset "euc-jp";

に直したらあっさり直りましたとさ。
どこかのサイトに@charset "euc";
って書いてあったから信用したのになぁ。。。きちんと検証しなかった自分に反省。
しかし、IEのあいまいでもきちんと表示してしまういいかげんさとFirefoxの厳格さ、なんとかなんないのかなぁ。。。
ブラウザは動作を統一して欲しいもんだっ!
posted by うみおよ at 17:43 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする

2009年05月15日

初心者のためのVMWare+Ubuntu+MovableTypeの構築 その2

今日、同じ手順で会社のPCにて設定してみたらApache2のユーザーディレクトリが指定できなくて困りました。

UserDir public_html

を例によってhttpd.confに足していたのですが、

Invalid command 'UserDir', perhaps misspelled or defined by a module not included in the server configuration

というエラーがでて、設定が読み込めない模様。

いろいろググって調べてみましたが、モジュールが読み込めていないようなので、

LoadModule userdir_module /usr/lib/apache2/modules/mod_userdir.so

を追加して解決しました。
posted by うみおよ at 12:02 | Comment(0) | TrackBack(0) | Webサーバ | このブログの読者になる | 更新情報をチェックする

2009年05月12日

初心者のためのVMWare+Ubuntu+MovableTypeの構築 その1

MovableTypeは前から扱っていたのですが、レンサバから提供されていたものだったので、もう少し自由にいじれるMovableTypeの環境がないかなぁと思って自分でサーバー構築から始めることにしました。
しかし、過去の経験から別なPCに構築するとあまり触らなくて、そのうち忙しさにかまけていじらなくなることは目に見えていたので、なんとかいつも使うPCに構築したい!・・・もちろん安く。
ということで、VMWareを使ってLinuxServerを構築し、そこにMovableType環境を入れてしまおう!と目論見ました。
まぁネタ的には決して新しいものに挑戦するものではないですが、備忘録といいますか、作業記録的に。。。

まずはVMWareですが、こちらはVMWareのダウンロードページからVMware Playerを無料でダウンロードできます。
現在の最新版は2.5.1。こちらはインストールも問題ないでしょう。

次にUbuntuですが、UbuntuではVMWare用のイメージファイルが用意されています。最新版は8.04LTSになっています。

私は一昔前のLinuxを触ったことがあって、しばらくLinuxから離れていたのですが、Ubuntuをはじめて触ったときにはあまりの簡単さに驚きました。
VMWareを使わないで、別のPCなどにUbuntuを入れたい場合は、CDイメージが用意されていますが、こちらもCDさえ作れてしまえば異様に簡単にインストールできます。
これからLinuxを勉強したい人は是非お試しアレ。

イメージをダウンロードしたら、VMWareを起動して「ファイルを開く」でダウンロードしたUbuntuイメージを読み込みます。
Ubuntuが起動し、セットアップ。
2,3の質問に答えれば構築完了。すぐにログインできます。

ログインしたら、パッケージマネージャから必要なパッケージをインストールします。
メニューバーから「システム」-「システム管理」-「Synapticパッケージマネージャ」をクリック。
「再読込」をクリックしてパッケージのリストを最新にします。
そこから、MovableTypeに必要なApache2、MySQLServer、Imagemagickを選択(ダブルクリックで選択)し、「適用」します。
PostgresやSQLliteが良い人はそちらを選択。

インストール後、Apacheの設定。
前提としては、ユーザー領域にMovableTypeを設置する、ということでユーザー領域でもCGIが動作するようにします。

Apacheの設定等は/etc/apache2/にあり、そこのhttpd.confを書きかえます。
えーホントは、httpd.confは下位のバージョンとの互換のためにありこ一つ一つの設定を書いてはいけないはずで、本当はたぶん、ですがconf.dディレクトリの中にファイルを作って読み込ませなければいけないんだと思います。
何かに書いてました。はい。
しかしまぁhttpd.confに書いても読み込まれるわけで、古いApacheを知っているとなんとなく親近感があり、えー・・・面倒だからです。ハイ。

権限云々でhttpd.confをそのまま書き換えるのは難しいので、自分のディレクトリ/home/(user_name)内にhttpd.confを作成します。

Ubuntuの「場所」メニューから「コンピュータ」を選び「ファイルシステム」を選びます。
ここがいわゆるCドライブの中身ですが、「home」ディレクトリの中の自分のアカウント名(以下user_nameで示します)の中に入ります。
Windowsと動作的に同じなのでファイルの作り方まで解説しなくてもいいと思いますが念のため、右クリックで「ドキュメントの生成」-「空のファイル」で作れます。
右クリックで「"テキストエディタで開く"」を選択。
そこに次の文を記述して保存します。

<Directory /home/*/public_html>
Options +ExecCGI
AddHandler cgi-script .cgi
</Directory>

要するに、ユーザー領域においてCGIファイルをCGIとして動かしなさいよ、という設定です。

Ubuntuのメニュー画面から「アプリケーション」-「アクセサリ」-「端末」を開き、

sudo cp ~/httpd.conf /etc/apache2/

と入力。
ユーザーのホームディレクトリにあるhttpd.confを/etc/apache2に管理者権限でコピーせよ!というコマンドです。

/etc/apache2以下は自分の管理権限にないので、管理者権限でコピーするわけです。
なので、パスワードを聞かれたらパスワードをいれてください。

その後、

sudo /etc/init.d/apache2 force-reload

で設定を読み込み

sudo /etc/init.d/apache2 restart

でApacheを再起動させます。

自分のホームディレクトリ/home/(user_name)に「public_html」という名前のディレクトリを作成します。
そこにファイルを置くと、
http://localhost/~(user_name)/
で参照することができます。

/home/(user_name)/public_html/の中にcgi-binというフォルダをつくり、その中にtest.cgiという空のファイルを作成。
右クリックで「"テキストエディタで開く"」を選択。
以下の内容を記述して保存します。

#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "Hello, World.";

perl/CGIがちゃんと動くかテスト用のスクリプトです。
保存し、ファイルを右クリック。
「プロパティ」を選択し、「アクセス権」タブで「プログラムとして実行できる」にチェックを入れます。

再確認。
/home/(user_name)/public_html/cgi-bin/test.cgi
がありますか?

ブラウザを起動してみて
http://localhost/
と入れてみてください。

It Works!

と表示されたらApacheの動作はOKです。
さらに
http://localhost/~(user_name)/cgi-bin/test.cgi
を開いてみて、「Hello, World.」と表示されればCGIの動作もOKです。

もし表示されない場合は、Apacheのサイトを読んで解決してね黒ハート

後はデータベースの構築と、imagemagickの初期設定、Movabletypeの設置ですが、その2へ続きます。。。
posted by うみおよ at 23:16 | Comment(0) | TrackBack(0) | Webサーバ | このブログの読者になる | 更新情報をチェックする

2009年05月08日

バナーを作ろう!

いろいろ無料のバナーサイトを見て回ると、あまりいいデザインのないなー(関係者のかたスイマセンがく〜(落胆した顔))かわいいのならあるんだけど。と思って毎度のごとくPHPの勉強もかねて作ってみました。

バナーを作ろう!というなんのひねりもないタイトルですが、直感的に使えるようにしてみました。
まだベース画像の数が少ないですが、今後ちょこちょこと更新していくつもりです。
posted by うみおよ at 10:22 | Comment(0) | TrackBack(0) | PHP | このブログの読者になる | 更新情報をチェックする
gooリサーチモニターに登録!