Androidプログラミングに挑戦2!(24)単位変換アプリを作る-サポートサイトを作る

0
    JUGEMテーマ:ホームページ作成


    次はいよいよGoogle Playに登録か?と思わせておいて、この1週間やっていたことと言えば、サポート用ホームページの作成でした。

    だって、これがアプリのパッケージ名になるわけなので、いつまでも「com.example.・・・」ではないだろう、と言う訳で。

    とは言え、そもそものやりたいことからは外れますので、できるだけ簡単に、つるっと作りたいと思います。
    そこで今回お手伝い頂いたのはこちらの本です。

    またまたブックオフで買ってきました。
    この本のサンプルのいいところは、スマートフォンサイトに対応していることです。それも、小難しいレスポンシブサイトではなく、PCサイト用とスマートフォンサイト用の2つのテンプレートを準備しておいて、ユーザエージェントに応じて切り替える方式なので、私のような頭の固いおじさんでもついていけます。
    この本の中から適当なサンプルを1ついただいて、それをカスタマイズしてサイトを作ることにしました。

    使わせていただいたのはこちらのサンプルです。


    歯医者さんです。これを元に、いくつか変更を加えていきたいと思います。
    ・3カラム→2カラム構成に変更
    ・テーマカラーの変更
    ・ロゴの変更
    ・トップ画像の変更
    ・お問い合わせフォームの追加

    最初の4項目に書いたような見た目の修正結果はこちらになります。


    いい感じです。
    スマートフォンサイトとPC用サイトを見分ける部分はこうなっています。
     

    <script type="text/javascript">
    if (document.referrer.indexOf('smart.html') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
    location.href = 'smart.html';
    }
    </script>
    


    スマートフォンサイトのインデックスページであるsmart.htmlから来た場合を除き、ユーザーエージェントがスマートフォン関係だった場合にはスマートフォン専用のインデックスページに飛ばす、という意味です。スマートフォンサイト側には「PCサイトを表示する」というボタンを付けていますので、このボタンから来た場合を除き、検索などから直接飛んできたような場合にはまずスマートフォンサイトを表示させるようにする、ということになります。

    スマートフォンサイトからPCサイトを表示させた場合のみ、スマートフォンサイトに戻るボタンも表示させます。その仕組みはこちらです。
     

    <div id="gotosmart">
      <p><a href="smart.html">スマートフォンサイトへ</a></p>
    </div>
    <script type="text/javascript">
    if (((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
    document.getElementById("gotosmart").style.display = 'block';
    }
    </script>
    


    このid、gotosmartはcss側でdisplay="none"を指定してありますので、通常は見えません。これに対し上記のスクリプトで、スマートフォンで見た時のみdisplay="block"として表示させるようにしているわけです。


    さて、先ほど挙げた変更点の最後、お問い合わせフォームを追加する、につきましては、こちらのスクリプトを使用させていただきました。

    メールフォームプロ



    非常に高機能なメールフォームで、正直このサイトに使うだけだったらこんなにたくさんの機能はいりません。今後その他のサイトで使うこともあるかも、と思って練習の意味も込めて今回このCGIを選びました。
    というのは建前で、本当は機能がたくさんあって嬉しくなって入れちゃってから、使いきれてないかもと少し反省したという次第です。

    メールフォームプロの設置方法は概略こんな感じです。
    ・コードをダウンロードして、解凍する。
    ・コードをサーバにアップロードする。(CGIが動作するフォルダが決まっているとちょっと面倒)
    ・指令書に従ってパーミッションを設定する。
    ・example.htmlにアクセスして、スクリプトの動作を確認する。
    ・config.cgiを修正して、各種設定を行う。
    ・example.htmlを修正して、お問い合わせフォームを作成する。
    ・thanks.htmlを修正して、お問い合わせいただきありがとうございましたページを作成する。

    config.cgiの設定は、高機能なだけあって色々複雑ですが、楽しみながらいじっているうちに設定できてしまうくらいなものです。心配するほどの事ではありません。

    以上で出来上がったサイトがこちらになります。

    てちくんのかんたんアプリ工場

    コンテンツはこれから充実させていきますが、とりあえずこれで受け皿が出来上がりました。


    次回は・・・・内容未定です。お楽しみに。


    コメント
    コメントする








       

    calendar

    S M T W T F S
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << January 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

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

    Google Adsense

    楽天ブックス

    楽天