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

Android

  • 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">

    を追加する。

  • Dreamweaver + PhoneGapで作成したアプリの権限を変えたい時

    ·

    master

    Adobe Dreamweaver 5.5から採用されたPhoneGapを使ってのアプリ作成は、特別な知識が無くてもハイブリッドアプリの作成を可能にしたが、

    [サイト]　→　[モバイルアプリケーション]　→　[ビルド]　→　[Android]（Androidアプリの場合）

    から書き出されるアプリには無条件で多くの権限が付いてしまっている。
    実際に様々な情報を端末から得ているのであれば当然だが、特にそんな機能を持たせていないのにインストールの際に余分が権限で利用者を不安にさせるのは好ましくない。

    Dreamweaverからのビルドの変更（設定）できないアプリの権限を変えたい場合は以下の手順で行えば良い。

    必要なのはEclipse
    Eclipseのインストールや設定は既に済ませてあるとして話を進める。

    まずはDreamweaverで

    [サイト]　→　[モバイルアプリケーション]　→　[ビルド]　→　[Android]（Androidアプリの場合）

    の手順でビルドを済ませておく。

    次に、Eclipse

    [ファイル]　→　[新規]　→　[その他…]　と進み

    [Android]　→　[既存コードからの Android プロジェクト]　→　[次へ >]　をクリック

    [ルート・ディレクトリー]　→　[参照…]　をクリック

    Dreamweaverでビルドしたファイルのフォルダを選択して [開く]　をクリック

    プロジェクト：
    [Project to Import] と[新規プロジェクト名]（DefaultActivity）が入っていることを確認
    左にチェックが付いていることを確認
    （※新規プロジェクト名（DefaultActivity）はこの時点で変更することも可能）

    [プロジェクトをワークスペースにコピー]　にチェックを付ける

    [完了]　をクリック

    これでパッケージ・エクスプローラーにDefaultActivityが表示される。
    DefaultActivityをダブルクリック
    直下にあるAndroidManifest.xmlをダブルクリックして開く
    （binの中にもAndroidManifest.xmlがあるが直下のファイルを開く）
    中身を見るとandroid.permissionで様々な権限が設定されているのが確認できる。

    <uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />   
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

    この中で、作成したアプリで必要なものを残し削除する。

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />

    上記の例は、位置情報を取得して情報を表示するアプリ
    位置情報の取得と、データをネットから取得するため、
    ACCESS　LOCATION類やINTERNETが必要

    不要なuses-permissionを削除したら、パッケージ・エクスプローラーのDefaultActivityを選択した状態で

    [実行]　→　[実行]　→　[Androidアプリケーション]　[OK] をクリック

    エラーがなければエミュレータが立ち上がり
    workspaceのDefaultActivity内のbinフォルダ内にDefaultActivity.apkが作られる。

    .apkファイルをサーバにアップロードして、Android端末のブラウザでアクセス

    [ダウンロード]　→　[インストール]（事前に設定　セキュリティで「提供元不明のアプリ」のインストールを許可しておくこと）

    [設定]　→　[アプリ]　該当のアプリの情報を見ると

    権限が減ったことが確認できる。

    あとは実際に必要な権限を削除してしまっていないかアプリの機能を確かめて終了。

  • 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」を入れて階層取得を１階層に制限するだけの話。

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