tsukalogo0000


alt

インパクト度が高い“ポップサークル”


結構設置がめんどくさいjQueryのポップサークル。真ん中のビジュアルを押すとメニューが四方に広がり目立ち度は高そうだけどliタグを使っているので、他の指定とバッテングしちゃうしiOSの5用Safari動かない…極めつけはメインビジュアルのjQueryとぶつかってる(汗)$の定義とかじゃなく要素の固定と浮遊の識別相違なんでやっかい。今の所大技のjQuery同士は分離してあげるようにしてる。

 

alt

Webフォントカスタマイズ

本来、日本語フォントは外来語に比較して字数が多いため、PCに入っている書体を使うのが主流。よって、メイリオからヒラギノを中心に各ブラウザやOSに合わせて美しいフォントが使われる様に指定する(その辺の情報は概出ので省略)フォントの順番が使われる優先順序となる。
body, td, th, div, p, label, input { 
font-family:"Century Gothic",Arial,"メイリオ", "Meiryo", 
"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","MS Pゴシック", "MS P Gothic", 
Verdana, Arial, Helvetica, sans-serif!important;
}
ただ、クラウドによりネット上で使用できるWeb Fontsを利用する環境も整ってきたみたいでインストールやサーバーで独自でフォントを用意せずとも好きなWeb Fontsを使えるGoogle Web Fontsが魅力的だ。かなり種類が充実しているが、おのずと好みが決まってくるので以下でチョイスしてます。
http://www.google.com/fonts/#HomePlace:home
にて「Start choosing fonts」をクリックしてお好みのフォントを探していきます。見つかったら下の図の緑部分をクリック。


次のページにhtml部分のヘッダーに入れる要素とCSSに入れる要素が出てきます。(やや下)

< link href='http://fonts.googleapis.com/css?
family=○○○○+○○○○'rel='stylesheet'type='text/css' >
/* ○○○はgoogleフォント名でたいてい+で繋いでいる */
任意のクラス名 {
font-family:'○○○○ ○○○○',sans-serif;
}
/* ○○○はgoogleフォント名でCSSでは+を省く */
以下は、使えそうなgoogleフォントを抜粋して掲載しました。
先ほどの法則からフォント名の半角空き部分に+が挿入されリンクの指定フォントファミリー名となります。
Add this code to your website:のURLだが、SSLで保護されているhttpsなページにコードを追加する場合、https://fonts.googleapis.com/css?family=フォント名にURLを変更しないと、ChromeでWebページを確認したときに、Webフォントが表示されない。それと同じくChromeブラウザではFont Changerたるプラグインをブラウザに追加してやらないとWebフォント自体描画できないというトラブルがあるのだが…現在解明中。まだまだ安易に使うのは注意が必要。


Poiret One Font
Marcellus SC Font
Montserrat Alternates Font
Josefin Sans Font
Covered By Your Grace Font
Nothing You Could Do
Give You Glory
Just Me Again Down Here
Nixie One
Reenie Beanie
Raleway Dots
Alex Brush
さらに下記はgoogle以外のwebフォントですが、色々制約やルールがあります。
基本は同じサーバー内にアップロードして.ttf等のtruetypeを引っ張ってきます。
Bordofixed Tryout-ttf
Bordu-ttf
あんず文字フォント-eot-ttf
ふい文字フォント-woff
まきば文字フォント-woff

 

上記サイトにて「apjapanesefonth.zip」という圧縮ファイルがダウンロードされるので、解凍したファイルを同一のサーバー内に追加する事で、Webフォントとして「font-family: Anzu」の指定が出来るようになります。
解凍したファイルのフォルダ内にある「APJapanesefont.ttf」というファイルをサーバーへアップロードする事になるが、このフォントをInternet Explorerでも表示させるために「eotファイル」を用意する必要がある。
そこでtttファイルをeotファイルに変換(かん)してくれる下記サイトにアクセスして変換(かん)をかける。

http://ttf2eot.sebastiankippe.com/
ふい字置き場。 その他フォントも使用方法は同じです。原理的にはPCに入ってるものをサーバーに埋め込みます。くれぐれも著作権には注意です。
武蔵システムさん 武蔵システムさんでWOFFコンバータたるものが…
●WOFFはWeb Open Font Formatの略で、Webフォントの1形式です。
●WOFFの作成と同時にEOT(Embedded OpenType)ファイルを作成することもできます。
形式 拡張子 format()の値 概要
TrueType .ttf truetype WindowsやMacで使われる一般的なフォント形式
OpenType .ttf, .otf opentype PostScriptとTrueTypeを統合したフォント形式。TrueType形式で作成されたものは「.TTF」、PostScript形式のものは「.OTF」となる
WebOpenFontFormat(WOFF) .woff woff Web用の新しいフォント形式。データが軽いのが特徴。
EmbeddedOpenType(EOT) .eot embedded-opentype 米マイクロソフトが開発したWebページ用のフォント形式。IEのみ対応
SVG Font .svg, .svgz svg SVGを利用したフォント形式
表3:format()の値
/* Webフォントを指定する@ルール書式内容 */
@font-face {
/* この仮想的なフォントのフォント集合名を定義 */
font-family:追加フォント; 
/* この仮想的なフォントの本体となるフォントへの参照URL */
src: url(http://example.com/serverfont.woff); 
}
 
/* あんずフォントの場合 */
/* IE対策 */
@font-face {
font-family: Anzu;
src: url(APjapanesefont.eot);
}
/* Firefox, Opera, Safari 対策*/
@font-face {
font-family: Anzu;
src: url(APjapanesefont.ttf) format("truetype");
}
尚、http://css3.sophia-it.com/reference/Webフォントを指定するには? に詳しく記述がされている。さらにwebフォントが全くプレビューされない問題でちょっと調べてみた結果、googlechromeの右の3本線>設定>詳細の設定を表示…>ウェブコンテンツのフォントサイズを中から小に変えたら文字が出た〜なんだこりゃ?????
最新版Google Chromeにてフォント一覧が正常に表示されない現象について
Google Chromeダウングレードサイト
てっく煮ブログ〜意外と多い!? Web フォントに対応していない環境 ~2012 年の Web フォント事情
chromeの最新バージョン 33.0.1750.117みたいなんで、ダウングレードするしかない…ただしこのバグが解ってる人ならwebフォントの文字抜けブランクも気づくかもしれないがそのまま見落としの方が多くて危険…かも。

 

alt

iPhone用サイトMobile Joomla!

前回サイズ指定のスマートフォン対応CSSの 記述を記事にし、その続きJoomla! モバイル対応Mobile Joomla! インストール、iPhone用サイトからの続編。
Mobile Joomla! は、Joomla! のエクステンション。ここでは、未だに愛用中のJoomla! 1.5 へのインストールについて説明します。このエクステションの中身だけVer.がアップしているので追記です。


【手順1】

下記のThe Joomla! Extensions Directoryサイトの「Mobile」メニューから「Mobile Joomla!」をダウンロードします。
「Mobile Joomla!」
「DOWNLOAD」ボタンを押すとMobile Joomla!のダウンロードページが表示されます。3種類のダウンロードがあり、それぞれで利用できる機能が一覧で比較できるが、まず無償で使用するので「Free」タイプをダウンロード。その場合展開した自分のモバイルサイトには下に広告が出現するようだ。
「DOWNLOAD」ボタンを押すとログイン画面が現れるが、これはダウンロードするにはユーザー登録が必要とされているため。先ず「Register」をクリックしてユーザー登録を済ませる。。
ログインに成功すると、ダウンロードページが現れライセンスなどに目を通してた上で、同意できる場合にのみチェックボックスにチェックの上「Download」ボタンを押してファイルをダウンロード開始。(2014年3月現在「Mobile-Joomla.1.2.8.tar.gz」というファイル名)
ファイルは圧縮されてますが、joomlaは他のエクテション同様にそのままアップロードするので解凍の必要は無い。


【手順2】

「アップロード&インストール」ボタンをクリックする。「コンポーネントを正常にインストールしました。」「Mobile Joomla 1.2.8 is successfully installed!」となればインストール成功。
ダウンロードした「Mobile Joomla!」ファイルを、Joomla! に組み込んでいきます。
管理画面の「エクステンション」+「エクステンション管理」をクリックし、「インストール」画面を表示させます。「パッケージファイルのアップロード」の「参照」ボタンをクリックし、手順1でダウンロードしたファイルを選択します。すると管理画面のプラグインと設定するコンポーネントに入っています。


【手順3】

最後に「Mobile Joomla!」を日本語化します。
Joomla!の道しるべさんが、MobileJoomla 日本語言語パックを公開されています。このファイルを利用させていただきましょう。MobileJoomla 日本語言語パックファイルをダウンロードいただき、「エクステンション」+「エクステンション管理」の「インストール」からインストールしてください。
Joomla!の道しるべMobileJoomla 日本語言語パック
(注)自分は前述した通り、joomla 1.5なんで、ja-jp.mobilejoomla_1.0.zipがインストール不可でした、以前落としておいた、旧ヴァージョンのja-JP.MobileJoomla_0.9.12.zipで日本語化します。
日本語化されても。翻訳時期の関係で「Mobile Joomla!」本体よりも日本語パックのバージョンが古く、一部日本語表示されない箇所が出ることがあるかもしれない、そのような場合、必要であれば、以下の日本語ファイル(ja-JP)と英語ファイル(en-GB)を比較しながら編集すれば修正可能です。(新しいバージョンの英語ファイルに、日本語ファイルを合わせるようにしていく)


●MobileJoomla基本構造
管理画面のコンポーネントで各種スマホの対応が出来ます。カスタマイズとしては入ってる画像素材の縮小率と文字サイズのチェンジからです。CSSは他の通常スタイルを使う事も可能で、カスタマイズはfirefoxの携帯端末用シュミレーターを使いつつiphone用に根気よく修正していきましょう。このサイトは実験サイトでもあるのでjQueryや各種ギミックが詰まってるがゆえ、かなりスタイルの変更が余儀なくされます。



…哀しいかなまだこのサイトはレスポンシブデザインの考え方に沿っておらず、ユーザビリティが優れた状態のスマホ対応はなされておりません。また、タブレットについてはipadレティーナ以上でぎりぎり見れる感じなので現状のまま。iphone以下端末のみサイドナビが不要であったり、メニュー部分のカスタマイズが必要になってくる。
ちなみに<meta name="viewport" content="width=620px" >をhtml内に打てば強制的にサイズ固定出来ます。



 

alt

iPhone用サイト

前回サイズ指定のスマートフォン対応CSSの 記述を記事にしたが今回は、その続き…
携帯電話の主役がスマートフォンに移り変わりサイト構築ではiphone(アンドロイド)やipadの対応が今後の課題になりそうな今日この頃…
ipadは画面サイズがbook並みなのでflashの閲覧不可以外、特に気にしないのだが、iphoneサイズになると見せ方に工夫がいる。メインであるtsuka-time.comサイトのトップページがPCでは左右のサイズがフリーでセンタリング表示されるのだが、相対的に小さくなってしまう。よってスマホのみ効果がある以下のメタタグを追加しサイズを固定する。

●仮想のディスプレイサイズを設定する


tsukapiko-blog

iPhoneではviewportのmetaタグを追加することで、
デバイズの仮想ディスプレイサイズを指定する。
例えば<meta name="viewport" content="width=700"> を追加するとデバイスのディスプレイサイズを700pxということで
ページが表示できます。iPhoneでサイトにアクセスした時にやたら小さく表示さ れたり、大きく表示されることが回避できる。
◀ジャストフィットさせたトップページ

 

 

又、以下の指定をすることで、デバイズサイズ(iPhone縦だと480px)にフィットさせ、倍率も100%に固定して拡大されないようにもできます。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

●Mobile Joomla!

joomla!の場合、Mobile Joomla!というプラグインがありこれを使うと一瞬で本格的なスマホ画面に変わります。ただし画像部分をバランス見ながらテコ入れしないと見栄えが非 常に悪く、もう少し調整に時間がかかりそう。それ以前にテキストに比重を置いているサイトでもではないのでここまでやる必要性に疑問はある。


一応このtsuka-time.comサイトは2カラムで記事部分もすっきりさせている分そのままでもスマートフォンで見れるといえば見れない事もないし~

今後は完全フルオリジナルデザイン&ページ立てでスマホページを用意した方がいいかもしれないがmobilejoomla!は、日本語対応にしているにもかかわらず、いまいち使い方解らず現在放置中~

tsukapiko-blog

●.htaccessファイルの使用

端末への自動誘導は.htaccessファイルをつくってHTTPリダイレクトを行う。moblejoomla!はプラグインをonのみでその辺の作業も勝手にやってくれるが手動でやる場合.htアクセスをさわって
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android)
RewriteRule ^$ /iphone/ [R]

と記述を追加した.htaccessファイルをルートディレクトリに設置することで、http://www.tsuka-time.comにアクセスしてきたiPhoneユーザとアンドロイドユーザをhttp://www.tsuka-time.com/iphoneのCSS3オンリーで作成した別ページに飛ばす事になる。


●firefoxの携帯端末用シュミレーター
スマートフォンのプレビューについてfirefoxで User Agent Switcher ”や“FireMobileSimulator”などiPhone/iPadエミュレータのアドオンがあるのでそれをダウンロードしてPC上でも確認が取れる。実際は本物の端末で見る事にこした事はないが…tsukapiko-blog firebugにしろ、 ダウンロードヘルパーにしろfirefoxの充実度は本当に頼もしい限りた。

tsukapiko-blog

 

alt

CSS3のMedia Queries(メディアクエリ)

iphoneとipadに新しく搭載されたiOS5は、何故か高容量のgifアニメをプレビューしないみたいでiphoneとかでこのページを見るとblogのメインビジュアルが読み込み不良で途中で補色反転してしまっていた。そのままだと私のweb技量が疑われるのでやむなくCSSハックして静止画に差し替えるという手段に…
まず、基本的には読み込む際、端末やブラウザによって切り替える事になるのだがスマホを判別させる場合ピクセルサイズでCSSを切り替えるやり方が主流。(よって画面が小さいと効果が発動する)480ピクセルがiphoneで1024ピクセルがipadのサイズ
@media only screen and (max-device-width: 480px){
.任意のclass {
iphoneサイズ用CSS指示
}
}maxは480pxより小さい場合にスタイルが適用されるという事
@media only screen and (max-device-width: 1024px){
.任意のclass {
ipadサイズサイズ用CSS指示
}
}maxは1024pxより小さい場合にスタイルが適用されるという事
※オレンジ文字は通常のCSSを入れ込む
色の差し替えはもちろん、画像の入れ替えやdispleynoneで要素を消し去る事も可能だ。もともとスマホではちまちましたギミックや小技は演出しなくていいので、細かいindex用gifアニメも消去しました。これで見事にメインビジュアルは静止画に、その他細かい素材は消去してスッキリバグも無しという感じです(以下に詳細があります)
[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

要は、flashを付けた時にswf読み込めないブラウザではjpg画像に入れ替えるのと同じ要領です。
ついでにadbeflashについてこんな記事が…。


Steveの哄笑が聞こえる–Adobeが
モバイルデバイス用のFlashを断念

by MG Siegler on 2011年11月9日

【抄訳】
それは2008年のことだった。あるモバイル関連のイベントでぼくは討論会に招待され、業界の主立った企業の人たちと席を共にした。その一人が、 Adobeから来た紳士だった。その前年にiPhoneが出たが、Flashのサポートがないことが、大きな話題になった。怒る人のほうが、多かった。そ の討論会にも、怒れる人が何人かいた。Adobeから来た男は、みんなに確言した: モバイルのFlashはもうすぐ出ます。すばらしいできばえになるでしょう。Appleがパフォーマンスを理由にiPhoneに乗せないのは、ばかげてい ます。

Adobeは、2009年にも同じことを言った。
2010年にも言った。
2011年になっても、まだ言っていた。

Adobeが、モバイル用のFlashプレーヤーの開発をやめる、というニュースを今夜(米国時間11/8)読んだとき、ぼくは不謹慎ながら、思わずニ ターッと笑ってしまった。それは、ZDNetに載ったJason Perlowのスクープ記事だった。こんな発表が、Adobeからあるらしい:
モバイルデバイス上のFlashの今後の力点は、Flashデベロッパが、すべての主要なアプリストア向けのネイティブアプリに、Adobe AIRをパッケージできるようにすることに置かれる。モバイルデバイス用のFlash Playerを新しいブラウザや、OSの新バージョン、あるいはデバイスの新しい構成に向けて適応させる作業は、今後行わない。弊社のソースコードをライ センスされている一部の者は、作業を続行し、独自の実装をリリースしてもよい。現在のAndroidとPlayBookの構成に対しては弊社がサポートを 続行し、重要なバグフィクスやセキュリティアップデートを提供していく。
この声明には、HTML5への注力も言及されていて、Perlowによれば発表は明日(米国時間11/9)あたりらしい。Adobeは、モバイルデバイス上にFlashを載せる努力を、終わらせるのだ。
これまで3年あまりも、モバイルFlashはもうすぐ出る、もうじき完成する、と言い続けていたのだから、これはおかしい。やっと2010年6月にAndroid用が出たが、完成にはほど遠かった。もっとあっさり言えば、ひでぇものだった。
【中略】
2010年の4月には、Steve JobsがAppleのWebサイトでFlashに最後通牒を突きつけた。Thoughts on Flashというシンプルなタイトルの記事でJobs は、Flashという技術を、わずか1700語そこらで破壊した。とくに痛烈な2点は、(1)Flashはモバイルデバイス上でまともに動いたことがな い、(2)Adobeは2009年以降、年に何度も、出す出すと言ってて結局出さないオオカミ少年だ。今や、誰も本気にしない。
【中略】
Steveが、天国で大笑いしている声が、聞こえる。
[原文へ][jpTechCrunch最新記事サムネイル集]
[米TechCrunch最新記事サムネイル集](翻訳:iwatani(a.k.a. hiwa))

そうこうしてるうちにiOS5.0.1修正版届けられましたね♪


 
<< 最初 < 1 2 3 4 > 最後 >>
1 / 4 ページ