デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

iPhone

  • iOS 7.1はより洗練される

    ·

    master

    iOS 7.1 beta 3のスクリーンショットを見ると、ボタン形状やサイズでも細かくデザインの統一が進められており、さらに洗練されているようだ。

    画像：iPhone in Canada
    http://www.iphoneincanada.ca/ios/whats-new-in-ios-7-1-beta-3-pics/

  • favicon.icoやapple-touch-icon.pngを作りたい時のベストな方法

    ·

    master

    ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
    そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

    解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
    そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

    Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

    Multi Favicon Generator
    http://favicon.miugle.info/ ピクチャ 3Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

    使い方も簡単。
    512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
    各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
    圧縮ファイルを解凍すると以下のファイルがある。

    apple-touch-icon-57×57.png
    touch-icon-iphone-retina.png
    apple-touch-icon-72×72.png
    apple-touch-icon-114×114.png
    apple-touch-icon-144×144.png
    favicon_sample.txt
    favicon.ico
    touch-icon-ipad-retina.png
    touch-icon-ipad.png

    favicon_sample.txt以外のファイルをサイトのルート（index.htmlやindex.phpがある階層）にアップ。
    faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

    具体的には、スタイルシートを呼び出している場所

    <link rel="stylesheet" href="style.css" />

    やtitleタグの場所

    <title>○○のホームページ</title>

    の前後に

    <link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

    を追加する。

  • WordPress PDA & iPhoneをコメント対応にカスタマイズする方法

    ·

    master

    WordPressをスマートフォンに対応させるプラグイン「Wordpress PDA & iPhone」はスマートフォンからの閲覧時にコメントの表示や書き込みができない。
    本格的なスマートフォンでの運用を考えた場合、コメントも重要。
    一般的な方法としては、テンプレートに

    <?php comments_template(); ?>

    や

    <?php comments_template('comments.php'); ?>

    を追加するのだが、
    上記の場合、呼び出されるcomments.phpは同階層のcomments.phpではなく

    /wp-includes/theme-compat/comments.php

    が呼び出されてしまう。

    comments.phpの中身をカスタマイズしないのであればそれでも構わないが、例えばコメントフォームにある「ウェブサイト」を消したい場合やスタイルに手を入れたい場合、このファイルを修正してしまうと、バージョンアップの度に修正しなくてはならなくなる。

    同階層のcomments.phpを呼び出す場合は、

    <?php comments_template('/comments.php'); ?>

    とファイル名の前に「/」を入れる。

    なお、
    元に入っているcomments.phpの中身は

    <?php if ( have_comments() ) : ?>
<?php endif; ?>

    だけなので、

    /wp-includes/theme-compat/comments.php
    のファイルをコピーして修正して、置き換えればいい。

    具体的な、コメントを呼び出すための修正は以下の通り

    page.php

    ファイルの場所は
    /wp-content/plugins/wp-pda/jqmobile-theme/page.php

    ファイルを開き

    <div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
</div>
<?php endwhile; else: ?>

    の箇所に追加して

    <div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
<?php comments_template('/comments.php'); ?>
</div>
<?php endwhile; else: ?>

</div><!-- /content -->

    となるようにする。

    ————————————————————————————

    single.php

    ファイルの場所は
    /wp-content/plugins/wp-pda/jqmobile-theme/single.php

    ファイルを開き

    <div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>

    の後ろに追加して

    <div><?php the_content(); ?></div>
<p>
<small>
<?php echo sprintf(__('This entry was posted on %1$s at %2$s and is filled under:','pda-theme'), the_date(__('l, F jS, Y','pda-theme'), '', '', FALSE),get_the_time()) . " "; the_category(', ');?>
</small>
</p>
<?php comments_template('/comments.php'); ?>

    となるようにする。

  • WordPressのスマホ用プラグインwp-pdaのカラーカスタマイズはこの方法

    ·

    master

    iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone（wp-pda）はベースにJquery mobileを使用している。
    そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
    デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
    色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。

    修正するのは以下のファイル
    wp-content/plugins/wp-pda/style.css

    ファイルを開き、最後に以下のスタイルシートを追加する

    .ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}

    各項目の解説

    background:
    ヘッダ、タイトル、ナビ選択状態の背景色

    color:
    ヘッダ、タイトル、ナビ選択状態の文字色

    border:
    回りのラインの色（同系色の濃いめにすると良い）

    text-shadow:
    タイトル文字の影（同系色の濃いめにすると良い）

    background-image:
    複数あるが、多くのブラウザに対応させるためのもの（同じ色で指定していく）

  • WordPress PDA & iPhone不具合修正（サブカテゴリ対応版）

    ·

    master

    WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) を新しいjQuery Mobileで使用すると、カテゴリー表示にした場合にレイアウトに不具合が発生する。
    前回のエントリ『Wordpress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法』では、カテゴリを呼び出す階層を制限することで表示不具合に対処したが、サブカテゴリに辿り着けないのは不便なため、別の修正方法をとることにした。

    前回修正してしまっている場合も、

    <?php if($detectedPage=='categories') :?>
〜
<?php endif; ?>

    をそのまま入れ替えればいい。

    修正するのは、前回と同じ以下のファイル
    /plugins/wp-pda/jqmobile-theme/index.php

    オリジナル

    <?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

    を

    <?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r|\t|> </", "", $categoriesHTML);
$categoriesHTML = str_replace("a> (",'a><span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")<ul class='children'>","</span><ul class='children'>",$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span></li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

    に変更する。

    この修正を施すことにより、カテゴリリストをタップすると、サブカテゴリが存在する場合はサブカテゴリ一覧、無い場合は該当カテゴリのファイル一覧が表示される。

  • WordPress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法

    ·

    master

    WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) は便利だが、jquery mobileのバージョンをjQuery Mobile 1.1や、新しいjQuery Mobile 1.2にすると、カテゴリー表示にした場合にレイアウトに不具合が発生する。

    症状としては、エラー等で表示されない訳ではなく、サブカテゴリまであるカテゴリの表示部分に余分なテキスト等が表示されてしまい、表示が崩れてしまう。
    階層が浅いサイトならば問題なく使える場合もあるだろうが、現実的にはこの表示バグを修正した方が良いだろう。

    修正するのは以下のファイル
    plugins/wp-pda/jqmobile-theme/index.php

    <?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0'); $categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

    を

    <?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML; ?>
</ul>
</div>
<?php endif; ?>

    のように修正。具体的には

    $categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');

    の部分に「&depth=1」を入れて階層取得を１階層に制限するだけの話。

    この１行を修正するだけで、表示バグは直る。

  • @i.softbank.jpのアドレスで添付画像が受信できないとき。

    ·

    master

    iPhoneを使っていて、通常のメールは受信できるのに添付画像が受信できない、送られているはずの添付画像が反映されないことがある。

    @softbank.ne.jpの場合はサイズの大きい添付画像を受信することが出来るから問題無いので、画像の添付が必要な場合はを利用すれば良いがの@i.softbank.jpアドレスで受信したい場合に困る。@softbank.ne.jpのアドレスを受信するためには、ネットワークのモバイルデータ通信、つまり3G経由で受信する必要があり、通信費用を最小限に済ませようとしている人には大きな問題だろう。
    @i.softbank.jpのアドレスで添付ファイルが受信できない理由はひとつ。
    Eメール(i)のサービス仕様で送受信可能サイズが1Mバイトという制限があるから。
    対応策としては送信者に添付画像のファイルサイズを小さくしてもらうしかない。

  • iPhoneStyleの登録者数が4200人を越えました。

    ·

    master

    iPhone対応の無料SNS『iPhoneStyle』は、2011年5月27日に登録者数が4200人を越えました。

    これからも、のんびり楽しめるSNSを続けていきます。

    iPhoneオーナーのためのSNS『iPhoneStyle』
    http://iphone-sns.com/

  • iPhoneStyleの登録者数が4100人を越えました。

    ·

    master

    iPhone対応の無料SNS『iPhoneStyle』は、2011年4月20日に登録者数が4100人を越えました。

    これからも、安全して楽しめるSNSを続けていきます。

    iPhoneオーナーのためのSNS『iPhoneStyle』
    http://iphone-sns.com/

  • iPhoneStyleの登録者数が4000人を越えました。

    ·

    master

    iPhone対応の無料SNS『iPhoneStyle』は、2011年3月21日に登録者数が4000人を越えました。

    これからも、安全して楽しめるSNSを続けていきます。

    iPhoneオーナーのためのSNS『iPhoneStyle』
    http://iphone-sns.com/