ヨコハマハンドメイドマルシェ2013

【iPhone・iPad】サイト制作のまとめ

iPhone/iPad独自タグや、便利なタグなどまとめました。それぞれの注意点とか発見した不具合とか掘り下げると色々とありますが、ひとまず以下まとめて列挙してみました。

■metaタグ:基本のviewport
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
widthとheight:最初に読み込まれる表示サイズ。widthを指定しないと横幅980px。
initial-scale:最初に読み込まれた際の拡大率
user-scalable:ユーザーが拡大できるか否かを、yesかnoで設定
maximum-scale:ユーザーが操作可能な拡大率の上限
minimum-scale:ユーザーが操作可能な拡大率の下限

■metaタグ:電話番号自動判別
電話番号を自動で判別するかどうかのyesかnoで設定できます
<meta name="format-detection" content="telephone=no" />

■metaタグ:ページの全画面表示
Safariのユーザーインターフェイスコンポーネントを非表示にしてアプリのように起動
<meta name="apple-mobile-web-app-capable" content="yes"/>

■metaタグ:ステータスバーの外観を変更
<meta name="apple-mobile-web-app-status-bar-style" content="ここに指定">

black/black-translucent/defaultいずれかをいれる

■アイコン指定
お気に入りをホームに指定したときにアイコンの指定
<link rel="apple-touch-icon" href="/custom_icon.png"/>

■起動イメージを指定
WEBサイトというよりオフラインのWEBアプリを作るときに便利。
<link rel="apple-touch-startup-image" href="/startup.png">

■アプリケーションキャッシュ
HTML5のアプリケーションキャッシュの仕組みを用いてデータをローカルにキャッシュさせて高速起動ができます。
1.php.iniファイルに
AddType text/cache-manifest .manifest
と記述
または、.htaccessファイルに
AddType text/cache-manifest .manifest
と記述
2.以下をヘッダー最初のところに挿入
<html manifest="cache-manifest">
3.cache.manifestファイル作成
CACHE MANIFEST
# musiclist manifest ver 1.0
index.html
common.js
.
.
.
などキャッシュ残したいファイルを列挙

■フォームの自動校正
<input type ="text" autocorrect="on">

■フォームの自動大文字化(英文の1文字目)
<input type ="text" autocapitalize="on">

■iPhone用CSS
・自動フォントサイズ調整を設定する
-webkit-text-size-adjust: (100% | none | auto);
・タップ時の色を変更する
-webkit-tap-highlight-color: #000;

■CSSをiPhone用に切り分ける
<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="pc.css" type="text/css" rel="stylesheet" />
<![endif]-->
IE向けに条件分岐を書いているのはIEがmedia queryに対応していないからだそうだ。

※既存のCSSに追記するときは
@media screen and (max-device-width: 480px) {
この中に指定
}
■その他の便利グッズ
・iPhoneテンプレート for MovableType
既にPC用のコンテンツを公開しているMovable Typeに追加するだけで、別途iPhone用のコンテンツを自動生成するテンプレート!
オープンソースです。
http://cremadesign.jp/blog/iphone/iphone_template_for_mt.html

・iPhone用デザインパーツ素材 PSDデータ
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

以下参考にさせて頂いたサイトです。もっと掘り下げて説明しているのでとても分かりやすいです。
Safari Web Content Guide: Configuring Web Applications
iPhone向けSafari、HTML拡張属性を使いこなす
iPadでHTML5でWebアプリを作ってみました。
iPhone / iPod touch 向けのmeta要素 viewport
iPhone用CSS

【Flash AS2】重なったムービークリップの下のボタンを押せなくする


FlashのAS2用。
重なったムービークリップの下のボタンが押せてしまうのを防ぐ裏技です。
上にあるムービークリップに下記のスクリプトを仕掛けると、押せなくできます。

//マウスカーソルを矢印にする
onClipEvent (enterFrame) {
this.useHandCursor = false;
}
//擬似的に上のレイヤーに無効のボタン機能追加
on (release) {
}


【MT】自動挿入されるリンクをフルパス→絶対パスに自動変換

※絶対パスがhttpで始まるものか、/から始まるのか、人によって違って紛らわしいので、とりあえず以下の定義で話します。
絶対パス:/index.html
相対パス:../index.html
フルパス:http://blog.yuu.noor.jp/index.html

MovableTypeって、自動的に挿入される URL は http から始まるフルパス指定になります。
公開設定のウェブサイトURLで挿入したURLが自動的に挿入されるのですが、テスト環境と本番環境でドメインを分けていたりする場合など、/から始まる絶対パスに指定したほうが都合が良かったりします。今回、フルパスを自動的に絶対パスに変えてくれる方法を探していました。

記事へのリンクや画像のリンクを全て絶対パスにしたいときは、以下のプラグインがおすすめ。

MTTruncateURLプラグイン

使いかたは、書き換えたいテンプレート内で
<mttruncateurl>・・・</mttruncateurl>で囲うとその中のタグが全て自動的に絶対パスに変わってくれるのです。簡単!

ただし!!!

・・・今回つまずいたのが、実はこのタグ、href, src, action属性に付随したURLしか変えてくれません。。

なので、たとえばプルダウンメニューでカテゴリ記事や新着記事を選ばせたりする場合、自動変換されません。
Javascriptを使ってonmouseでサムネイル画像を出したり・・とか凝ったことをした場合も自動変換されないのです。

そんなときは、こちらのプラグインが便利です。

MT Extensions: MTRelativeURL 1.0

こちらは変換したいMTタグを<mtrelativeurl></mtrelativeurl>で囲って使います。
この場合、全てのリンクを変えたいときには面倒なのでオススメできないのですが、上記のMTTruncateURLプラグインでまかないきれなかった箇所を個別で対応できたのでよかったです!

例:絶対パス指定で、新着記事をプルダウンで選択させる場合
<option value="<MTRelativeURL><$MTEntryPermalink$></MTRelativeURL>"><MTEntryTitle></option>

【MT】アーカイブマッピングに指定できるタグ

ニーズがとてもマイナーかもしれませんが…悩んで四苦八苦した挙句にできて、ちょっと嬉しかったので載せておきます!

Movable Typeで、ブログ記事のURLを規則性正しいURLに変えたいとか、記事のファイルがどんな名前でどんなディレクトリで出力されるかを事前に設定できる、アーカイブマッピング。各アーカイブテンプレートの編集ページ、テンプレートの内容の下に設定するところがあります。

この設定方法は、色々なところで紹介されているのでここでは割愛します。↓ここを観てください。
アーカイブマッピングの設定

それで、このアーカイブマッピング。
よく使われるだろうパスがデフォルトで選べるのですが、カスタムで自分なりに登録も出来ます。

アーカイブマッピングで利用するタグの定義

まぁココまではネットにたくさん情報が載っているのでいいのですが、今回やりたかったのは、出力ファイル名を規則性のないファイル名にしたかったのです。
普通はアーカイブマッピングで設定したファイル名にしておいて、特別な場合に自分で手動の名前に設定できないものかと・・・。

そして、試行錯誤した末にたどり着きました。

アーカイブマッピングには、各ブログ記事のキーワードやタグを指定することができるんですねぇ。知らなかったし、あまり紹介されてないので、マイナーなのかもしれません。
これで、特別な場合に、キーワードとかタグの欄に、独自の名前を記述するだけで出力ファイル名が任意のものになるのです。
記述の方法はこんなかんじ。

▼キーワードを指定する場合
<$MTEntryKeywords$>
例:%y/%m/<$MTEntryKeywords$>.html
※キーワードに例えば「yuki」と入れた場合、2010/3/yuki.html

▼タグを指定する場合
<$mt:TagName$>

例:%c/index<$mt:TagName$>.html
※カテゴリ名が「love」でタグに「_eita」と入れた場合、love/index_eita.html


何気なく便利だったりするかも!

【WordPress】予約投稿が機能しないとき・・

初のWordPressネタ。
以前、MovableTypeで予約投稿に関する記事を書きました。
これ↓
【MT】日時指定処理が機能しないとき・・

今回、WordPressの予約投稿ができないと、クライアントさんからの連絡。
MTではcronを使っているので、てっきり同じような原因かと思いきや、WPではのcronではなくHTTP-CRONを使っているそうだ。
だから、サーバーがcronに対応してるかどうかは関係なくて。

で、検索してみたら、WordPressで予約投稿ができなくて困ってる人が沢山いた!

まず、WPではBasic認証をかけていると予約投稿ができないそうです。
参考:Basic認証下で、予約投稿が効かない
なぜならば、そもそもHTTP-CRONはパスワードでプロテクトされたディレクトリへアクセスさせる事は出来ないそうです。
参考:HTTP-CRONでのセキュリティー

どうやらBasic認証がかかっていたらこれをまず疑ったほうがよさそうです。
まぁ今回もおそらくこれが原因だったのかと思います。

サーバー関連とか、わたくしぜんぜん詳しくないので…この場合の解決策は不明。(今回はあきらめました)

あとは、今回自分で試す時間がなかったので実証してませんが、上記以外の場合の解決策がきちんとまとまっていたリンクを貼っておきます。

WordPressで予約投稿の失敗が続く時にチェックする3つのリスト
WordPressの予約投稿が失敗する件の解決方法
[WordPress] 予約投稿が失敗するときの対処法

かなり前にWordPressを自分のサーバーに入れて、このブログから乗り換えようとしたけども、ここの記事がうまくエクスポートできず放置。
で、WP案件が少なかったのでWordPressに関して詳しくないです。ちょっと勉強しなきゃな。

MTもいま、MT5にグレードアップしていて、会社のみんながグレードアップしてるようです。

自分はまだ使ってませんが、インターフェイスがWPに似ててあの独特の「使いにくさ」が改善されてたように思われます。
CMSツールとして意識したバージョンアップのようですね。機能はどうなのかな?
ゆうきもつかってみたいなー

あと、新年明けてからECサイト案件の相談がどどっときて、EC-cubeも色々調べてるし、Zen Cartも気になるし、他のオープンソースやAPIについてもいじいじしてみたいし。

なんか、、ドラゴンボールの天の上にあって集中して修行するところ(うろおぼえ)に行きたい。

【jsライブラリ】複数のブロック高さを簡単に揃える!

すごい便利なjsライブラリを見つけたので思わず紹介。
Webデザイナーをしてたら、コーディング時に一度はぶち当たる(気がする)この問題。
いやはや、今までコレを知ってたらどれだけ苦労せずにコーディングできただろうか…もっと早く知ってれば良かった。
floatで横並びにしているブロックの高さを、最大値に揃えるライブラリ。しかも超簡単に・・・

CSSでは縦幅100%が基本的にきかないし、複数ブロック要素の高さが揃えれないという。
でもこれがあれば、cssのブロックでheightを無理やり指定してブラウザによって文字サイズが違うから変な余白が空いたりとかもなくなるし、文字がはみ出たりもしなくなるし。これは夢のようだ!!!

まず、「ブロックレベル要素の高さを揃えるheightLine.js」を配布している「to-R」さんのサイトからheightLine.jsをダウンロード。

<script type="text/javascript" src="./heightLine.js"></script>
をヘッダーに記述して指定する。

あとは、こんなかんじで、親ブロックにheightLineParentクラスを指定。
すると・・親ブロックに入っているの子ブロックの中で、最大になっている縦幅にあわせて自動的に伸びてくれるんです!

なんて簡単なんでしょう…!

このライブラリは、同じクラス名を付けたブロックの最大値に揃えてくれたり、グルーピングもしてくれるのですが、一番使いやすそうな方法をご紹介しました。
詳細はこちら「ブロックレベル要素の高さを揃えるheightLine.js

【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない

突然、拡張し.aiでの保存ができなくなりまして。※Windowsです。
上書き保存、別名で保存もできず。新規ファイルを作って空のファイルさえも保存できず。

たまに、PDF互換ファイルを作成にチェックをはずすと保存できなくなったりするのですが、それでもないようで。

仕事がワタワタしていたので、3日くらいイラレ機能を保持したままpdfで保存したりしてごまかしてきました。
が、いい加減仕事に支障をきたしてきたので本気で調べて色々試して…やっと解決しました。


調べてみると、Windowsで新しいユーザーを作成してどうのすれば直るらしいことを見つけたのですが、
なにせ会社のパソコンでユーザー管理などしてるために、簡単にユーザー作れないのだよ…ととほほとなっていました。


更に調べて速攻解決!

マイコンピュータ>ローカル ディスク(C)>Documents and Settings>(ユーザ名のフォルダ)>Application Data>Adobe>Adobe Illustrator CS3 Settings
このフォルダを思い切って削除。あ、小心者なので一応バックアップとっておきました。

【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない

で、イラレを起動しなおしたら、保存ができるようになった!

あぁかみさま ありがとう。助かった!まじたすかった!

自動的にまたAdobe Illustrator CS3 Settingsフォルダが自動生成されました。

Macの場合は、
Macintosh HD/ユーザ/<ユーザ名>/ライブラリ/Preferences/Adobe Illustrator CS3 Settings
ここにいるようです。

【Flash CS3】ビデオコンポーネントスキンのカスタマイズ

おはよう。生きてます。忙しいです。

さて。早朝リリースがあり早く会社に来てしまったので…通常勤務開始までまとめておきます。いつもフォルダを探してしまうので、いい加減自分のためにもまとめておきます。

Flashは、ビデオデータを読み込むとFLVPlaybackコンポーネントを手軽に使えてビデオ再生が一段と楽になりました。ビデオの下に再生・停止ボタンや、タイムライン・音調整などが付けられるアレ。
Flashに既存に入っているインターフェイスのスキン、カラーパターン・レイアウトがなかなか充実していてシンプルで使いやすいのですが…個人的にどうしても許せないのが・・・ロールオーバーしたときになぜ蛍光黄緑なのかと。。

ベースカラーは、ホワイトとかブラックとか、使いまわししやすいのに、あの黄緑があるがために、どうしてもデザインが合わなくて困るわけです。

というわけで、スキンのカスタマイズ、特にあの蛍光黄緑を別の色にする方法をまとめました。根性があればボタンデザインとかも変えられます。
Flash CS3、ActionScript2.0仕様で簡単に説明します。
※写真はクリックで拡大します。

【1】下記フォルダを開きます。
C:¥Program Files¥Adobe¥Adobe Flash CS3¥ja¥Configuration¥FLVPlayback Skins¥ActionScript 2.0
【1】下記フォルダを開きます。
【2】中にスキンFlashが沢山入っているので、自分の使いたいレイアウトのFlashを選び、適当な名前でコピー。

【3】2で保存したFlashを開き、シンボル内で色を変更
【3】2で保存したFlashを開き、シンボル内で色を変更

【4】swfに書き出し、下記フォルダにつっこむ
C:¥Program Files¥Adobe¥Adobe Flash CS3¥ja¥Configuration¥FLVPlayback Skins¥ActionScript 2.0
【4】swfに書き出し、下記フォルダにつっこむ

【5】上記でスキンのカスタマイズは終了。
こんどはビデオをとりこむためのFlashを開く。このとき、いつものようにビデオを読み込み、スキンを選択するプルダウンに、先ほど作った名前でリストに追加されているハズ。それを選択。【5】プルダウンに、先ほど作った名前でリストに追加されています

【6】ほらできた!

参考:コンポーネントリファレンスガイド > 新規スキンの作成

【Flash】Firefoxで縦横100%表示で気をつけること

縦横100%(画面いっぱい)にFlashを貼り付けたときに、FirefoxなどのMozilla系ブラウザで起こる落とし穴を2つ。解決策と共にまとめておきます。
まずは、比較的有名どころですが、未だに大企業のサイトでも見かけるFirefoxでFlashが上部1/5くらいにしか見れてないという症状▼
Firefox 100%表示のバグ
こんなかんじ。どうやらdoctypeが原因らしい。
doctypeを変えたりすれば直るみたいですが、Adobeのサイトでも紹介されている解決策があります。
CSS内に下記を記述
html,body { height:100%;}

または、Flashを囲うdivにheight:100%;を指定。
参考:高さ 100% の Flash のバグ





さてと。もうひとつ・・・うっかりはまってしまったものを紹介しておきます。
Firefox 100%表示のバグ
なぜか、Firefoxで1pxくらいのスクロールが出てしまう!
なぜだなぜだと・・・悩みはてて。
hight="99%"に指定して無理やり感のあることしてみたり、 html {overflow:hidden;} とか書いてしまってスクロールを出さないようにしようかと思っていた矢先…

わかりました。。
<embed src="○○.swf" quality=high align="middle" wmode=transparent width="100%" height="100%" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"> </embed>
align="middle"を入れたら一発で解決。

はまってしまった。もーー。よくわからん。

【IllustratorCS3】グレースケール一発変換

今まで、早くこの機能に気づいていれば、どれだけミスもなく時間短縮ができたか・・・。とほほ。イラレマスターにとっては有名な機能なのかもしれませんが、あまりに悲しいのでブログに書いておきます。

4色で制作したデータを、一発でモノクロ変換・・・イラストレーターCS3ではシンボルやパターン・グラデーションなんかもちゃんとモノクロ変換されるんですよ。
以前のバージョンで、グレースケール変換があったけれど、グラデーションとかあるとダメで、ぜんぜん使えないなぁと思っていたのに・・・CS3ではこんなに一発でできてしまうとは。
知らなかったーショックだなぁ。。時代は進化してるんだなぁ。

配置リンク画像はモノクロに変換されませんが、埋め込まれた画像もグレースケール変換される!!すげー
ただ、やはり画質がかなり汚いので、個人的には画像はPhotoshopでグレースケールに変換したものを配置しなおすのがよいと思います。

1色での印刷ではCMYKのCとかが1%でも入ると印刷会社からのデータチェックでNGがでるので。たった一箇所の変換漏れが残っているだけで納期が延びて、悔しい思いをしていましたよ。とほほ

◆IllustratorCS3 で、4色データを一発でグレースケールに変換
グレースケール一発変換
・変換したいデータを全て選択
※レイヤーにロックかけないでね
・「編集」→「カラーを編集」→「グレースケールに変換」

以上。
変換作業、ものの1秒。

これなら変換漏れもないですね。

| 1/3PAGES | >>

Profile

Yuki Noda
1982年横浜で生まれる。多摩美術大学卒。
プロフィールポートフォリオ
mixitwitterFacebook

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< July 2017 >>

selected entries

categories

archives

recent comment

  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORUさん (12/08)
  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORU (09/20)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    ゆうき (09/04)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    rr (08/31)
  • スーパーカップのチョコミントアイスについて
    ゆうき (06/13)
  • スーパーカップのチョコミントアイスについて
    aaammm (06/13)
  • スーパーカップのチョコミントアイスについて
    ゆあ (04/11)
  • 【CSS】IE6 リストで隙間が出るバグ
    D (11/14)
  • 夢のような結婚式を終えて・・
    ゆうき (10/04)
  • 夢のような結婚式を終えて・・
    ちゃっきー (10/03)

recent trackback

links

profile

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM