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

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

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

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


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


    Androidプログラミングに挑戦2!(23)単位変換アプリを作る-色の調整

    0
      JUGEMテーマ:プログラミング

      今回はアプリを公開する前の微調整として、画面の色を調整します。
      具体的にはアクションバーの色と、入力欄の下線およびカーソル類の色です。

      アクションバーの色は簡単です。
      res>values>colors.xmlに指定してある、colorPrimary, colorPrimaryDark, colorAccentの色指定を変えればOKです。
      アクションバーの背景がcolorPrimary、アクションバーの上部の通知領域がcolorPrimaryDarkになっています。colorAccentはこの画面では出てこないいようですが、念のためcolorPrimaryと同じ色に変えておきます。
       
      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <color name="colorPrimary">#77543a</color>
          <color name="colorPrimaryDark">#362111</color>
          <color name="colorAccent">#77543a</color>
      </resources>
      

      因みにこの色は、私のペーパークラフトのサイトで使っているテーマカラーの茶色とこげ茶色です。

      もう1点の入力欄の下線、カーソル、文字選択用のハンドル類の色を変えるのは、もうひと手間かかります。
      色をcolors.xmlに指定し、これを使ったthemeをstyles.xmlに記述し、レイアウトファイルでこのthemeを呼び出します。
      まず色は、先ほどの3色指定の後ろにつなげて2色程度指定しておきます。
       
      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <color name="colorPrimary">#77543a</color>
          <color name="colorPrimaryDark">#362111</color>
          <color name="colorAccent">#77543a</color>
          <color name="app_primary">#77543a</color>
          <color name="app_secondary">#77543a</color>
      </resources>
      

      次にstyles.xmlに新たなスタイルを記述します。
       
      <resources>
          (中略)
          
          <style name="EditTextColorControl">
              <item name="colorControlNormal">@color/app_primary</item>
              <item name="colorControlActivated">@color/app_secondary</item>
              <item name="colorControlHighlight">@color/app_secondary</item>
          </style>
      </resources>
      

      colorControlNormal、colorControlActivated、colorContorolHighlightの3つの名前だけは変えないでください。色の名前は先ほど作った色を呼び出します。そしてこのスタイルをテーマとしてレイアウトファイルで呼び出すわけです。
       
      (前略)
      
              <EditText
                  android:layout_width="@dimen/inputWidth"
                  android:layout_height="match_parent"
                  android:inputType="numberDecimal"
                  android:ems="10"
                  android:id="@+id/editText"
                  android:theme="@style/EditTextColorControl"
                  android:textSize="@dimen/inputSize" />
      
      (後略) 
      

      こんな感じです。
      以上で、出来上がりはこんな風になります。



      ちょっといい感じになってきました。

      次はいよいよGoogle Playに登録?か??
      お楽しみに。

       


      Androidプログラミングに挑戦2!(22)単位変換アプリを作る-AdMobの登録

      0
        JUGEMテーマ:プログラミング

        今回は、アプリをいじるのはちょっとお休みして、Googleのアプリ広告サービスAdMobへの登録の様子を見ていきたいと思います。

        まずはこちらのURLからAdMobにアクセスします。
        https://apps.admob.com/

        するとこちらのサインアップページにジャンプします。
        (Googleアカウントの確認/ログインを求められる場合があります)



        ここで、ログインしているアカウントに紐づいているAdSenseとAdWordsのアカウントがチェックされます。AdSenseはホームページなどに広告を表示して、広告がクリックされると報酬がもらえるシステム、AdWordsはそのAdSenseで表示される広告を出す(有料で)システムです。AdMobもアプリに広告を表示してクリック報酬をもらったり、逆にアプリに広告を出すことができるシステムなので、お金のやり取りが発生します。このお金のやり取りの窓口をAdSenseとAdWordsにまとめているという訳なのです。

        私の場合はAdSenseの方だけアカウントを持っていましたので、持っているアカウントのサイト運営者IDが表示され、AdWordsアカウントは「有効なアカウントはありません」という表示になっています。無いものはこの先のステップで作ることができます。
        ということなので残念ながらAdSenseのアカウントの作り方はここでお伝えすることができません。以前AdSenseのアカウントを単独で作った時は結構面倒くさかった覚えがあるので、ここでの手続きがどれだけ簡単になっているのか興味のあるところではありますが。

        ここは、表示されたアカウントを使用する、の方をクリックして先に進みます。
        次はAdSenseアカウントの確認です。持っていない場合はここで新しく作ることができる、のだと思います。



        問題ありませんので、「このAdSenseアカウントを使用する」で、次に進みます。
        次はAdWordsアカウントの作成です。



        なんと、これだけでAdWordsのアカウント作成完了です。
        まあ、Googleにとってはお金を受け取るアカウントなので、敷居が低いにこしたことはないわけです。
        次はAdMobのプログラムポリシーの確認です。



        プログラムポリシーと利用規約に十分目を通したら、「AdMobアカウントを作成」をクリックします。
        これでAdMobアカウントの開設は完了です。



        ここで「ご利用開始」をクリックすると、AdMobのウェルカムページにジャンプします。



        早速「ご利用を開始」をクリックしてみましょう。
        ここからはアプリを登録し、広告IDを取得するプロセスになります。



        まず最初にアプリを選択する画面になります。
        「アプリを検索」と「アプリを手動で追加」の2つのメニューがあります。アプリを検索とは、すでにGoogle Playに公開されているアプリに広告を追加する場合なので、開発中の場合は「手動で追加」を行います。といってもアプリの名前とプラットフォーム(AndroidかiOSかWindowsか)を選択するだけです。アプリの名前は、自分が判るような名前であればOKだと思います。記入/選択したら「アプリを追加」をクリックします。
        次は広告ユニットの設定です。



        バナー広告かインタースティシャル広告(全画面広告)を選んだら、それぞれ表示される項目を設定していきますが、まずはデフォルトでもいいでしょう。広告ユニット名だけは何かわかりやすい名前を付けてやってください。
        「保存」をクリックすると広告ユニットIDが発行されます。



        おめでとうございます!これで無事広告IDを取得することができました。
        広告IDとアプリへの広告の詳しい設定方法が書かれたサイトへのリンクをメールで送ることができますので、せっかくなので送ってみました。



        メール自体にあまり情報量はありませんが、覚えということで。
        「完了」をクリックすると管理画面が表示されます。



        画面トップには「ホーム」「収益化」「宣伝」「分析」の4つのメニューが表示されています。このページは「収益化」です。せっかくなので他のページも見てみましょう。
        まずは「ホーム」



        収益額等のまとめページになっています。次は「宣伝」です。



        これは自分のアプリを宣伝(有料)するページでした。しばらくは見ないでOKでしょう。ちなみにこのページだけ、ページを移動するときに確認のダイアログが表示されるようになっています、はい。

        最後は「分析」です。これはGoogleアナリティクスと紐づけてアプリのユーザーの動向などを分析するページです。
        私はGoogleアナリティクスのアカウントも持っていますので、ついでに登録してしまいましょう。



        私はここで既存のアカウントを選びました。



        メニューから既存のアカウントを選び、表示された内容に問題なければ「続行」をクリックします。



        ここで続行をクリックするとダイアログが出て、アプリのトラッキングIDの設定が行われます。



        「トラッキングIDを設定」をクリックします。



        新しいトラッキングIDを作成、をチェックして保存します。
        これでトラッキングIDが発行されます。



        完了をクリックすると分析画面が表示されます。
        実際のトラッキングIDの埋め込み方などは、また勉強して、その内ご紹介します。



        さて、以前挙げた残りのプロセスをもう一回見てみましょう。

        (済)・カテゴリー、単位を充実させる。
        (済)・単位の説明を表示する。
        (済)・アイコンを作る。
        (済)・多言語対応にする。
        (済)・広告を入れる(広告なしの有料版も公開する)
        (未)・Google Playデベロッパーに登録する。
        (未)・アプリを公開する。

        そうです、残るはGoogle Playデベロッパーに登録してアプリを公開するだけになりました。

        それでは次回をお楽しみに。

         


        Androidプログラミングに挑戦2!(21)単位変換アプリを作る-広告の追加(その2)

        0
          JUGEMテーマ:プログラミング

          さてさて、前回のバナーはみ出し事件、落ち着いて考えてみると思い当たるフシがあります。
          パッと見は下から出てきたテンキーにバナーだけ押し上げられているように見えるのですが、実際は、テンキーが出現することによってメインの画面を収めているRelative Layoutが縮んでいるのではないかと思うのです。
          このAdViewだけParentの底辺にくっつけてレイアウトしたため、レイアウトが縮むのに合わせて上に移動してきてしまったと考えると理屈が通ります。

          では試しに、AdViewを上の変換ボタンにくっつけてレイアウトしてみましょう。
          こんな感じです。



          これをエミュレータで走らせてみましょう。これでどうでしょう?



          どうです?大成功!・・・と言いたいところなのですが。新たな問題発生です。
          スクリーンショットではわからないのですが、バナーが点滅しているのです。
          それに同期して変換ボタンが数dp高さ方向に伸び縮み振動しています。
          意味不明です。
          とりあえず、バナーをもう少し下げて完全に見えなくしたら振動は収まりました。
          が、このままでは別のもっと画面の長い機種などが現れた時に、テンキーの領域が狭まってまたバナーが少し出現してしまうかもしれません。これではイタチごっこです。

          それならいっそ、レイアウトをちょっといじってバナーが常に全部見えるようにしてやったらいいのではないでしょうか?
          現状の、バナーと変換ボタンが近接しているレイアウトは、間違ってバナーをタップしてしまう可能性もあり、ユーザにとって非常にストレスになるとも思うので、思い切って変換ボタンをカテゴリースピナーの横あたりにもっていってはどうでしょうか?
          こんな感じです。



          どうでしょう?
          少しレイアウトが混雑してきたので、タップできる部分がわかりやすいように、スピナーの三角マークを右下に着けて、右と下にボーダーを入れてみました。
          元画像は、Android SDKの、sdk/platforms/android-23/data/res/drawableにある、spinner_default_holo_light_am.9.pngというファイルです。とあるテーマを適用したときのスピナー用背景です。
          元ファイルは右下の三角が2倍くらい大きいのと、下線しかないので、画像処理ソフトを使って三角を小さくし、右の縦線を追加し、ついでにコンテンツ部分もぎりぎりまで拡大して適用しました。
          その他、バナーの点滅が起きないように、スピナーの高さを1dp刻みで調節しました。また、日本語と英語で文字サイズも変えて調節しました。結果、こんな風にうまく表示されるようになりました。




          えー、広告の話だったはずが、レイアウト変更だけで話が終わってしまいました・・・

          次回は、AdMobの本登録をやっていきたいと思います。


          Androidプログラミングに挑戦2!(20)単位変換アプリを作る-広告の追加(その1)

          0
            JUGEMテーマ:プログラミング

            それでは今回は広告の追加を進めていきたいと思います。
            第1回目は、仮のIDで仮広告を表示するところまで行きます。

            まず、アプリに広告を表示するサービスは色々あります。本来ならそれぞれの特徴を比較して最適なものを選ぶところですが、今回は導入が簡単なAdMobを使っていきたいと思います。
            どう簡単かというと、このAdMobはGoogleがやっている広告サービスなんです。そしてGoogle Play serviceの一部としてAndroid Studioに簡単に組み込むことができるんです。うだうだ考えているよりやった方が早いということで、早速始めてみたいと思います。

            まず、Android Studioに組み込む必要のあるツール類を確認していきましょう。Android Developerサイトを参考に作業を進めていきます。Android Studioのメニューから「SDK Manager」を開きます。



            ■最新のSDKツール
            「Tools」から
            ・Android SDK Tools
            ・Android SDK Platform-tools
            ・Android SDK Build-tools(最新バージョンのもの)
            「Android X.X」フォルダから
            ・SDK Platform
            ・「ARM EABI v7a System Image」などのエミュレータ用のシステム イメージ

            ■追加API用のサポートライブラリー
            「Tools」から
            ・Android Support Repository
            ・Android Support Library

            ■その他の API 用の Google Play サービス
            「Tools」から
            ・Google Repository
            ・Google Play サービス

            このうち、未インストールだったのは最後の「Google Play サービス」だけでしたので、これをインストールしました。

            ここからはAdMobのスタートガイドに従い、各種設定を行っていきます。

            まずGradleを設定します。
            Android Studioの左のProject画面で「Gradle Scripts」を開くとbuild.gradleというファイルが2つあると思います。その内、(Module:app)とついている方のbuild.gradleを開くと一番最後にdependencyというブロックがあると思います。そこに1行書き足します。
             
            dependencies {
                compile fileTree(dir: 'libs', include: ['*.jar'])
                testCompile 'junit:junit:4.12'
                compile 'com.android.support:appcompat-v7:23.1.1'
                compile 'com.google.android.gms:play-services-ads:8.4.0'
            }
            

            5行目が書き足した1行です。ここでGoogle Play Serviceの中のGoogle Mobile Ads APIを指定しています。2016年1月13日現在で最新バージョンは8.4.0です。最新バージョンはリリースノート等で確認してください。
            無事終了したら確認のため一旦ビルドしてみてください。問題があれば早く見つけてつぶしましょう。

            次にマニフェストファイルを変更していきます。
             
            <?xml version="1.0" encoding="utf-8"?>
            <manifest xmlns:android="http://schemas.android.com/apk/res/android"
                package="com.example.tetsuya.unitconverter6">
                <!-- Include required permissions for Google Mobile Ads to run-->
                <uses-permission android:name="android.permission.INTERNET"/>
                <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
                <application
                    android:allowBackup="true"
                    android:icon="@mipmap/ic_launcher"
                    android:label="@string/app_name"
                    android:supportsRtl="true"
                    android:theme="@style/AppTheme">
                    <!--This meta-data tag is required to use Google Play Services.-->
                    <meta-data android:name="com.google.android.gms.version"
                        android:value="@integer/google_play_services_version" />
                    <activity android:name=".UnitConverter6">
                        <intent-filter>
                            <action android:name="android.intent.action.MAIN" />
                            <category android:name="android.intent.category.LAUNCHER" />
                        </intent-filter>
                    </activity>
                    <!--Include the AdActivity configChanges and theme. -->
                    <activity android:name="com.google.android.gms.ads.AdActivity"
                        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"
                        android:theme="@android:style/Theme.Translucent" />
                </application>
            </manifest>
            

            まず4〜6行目、広告を取得するためにインターネットにアクセスする権限と、インターネットにアクセスできるかどうかをチェックする権限を付与します。
            次に13〜15行目、Google開発者サービスのバージョンを参照する<meta-data>タグを追加します。
            そして22〜25行目、バナー広告がタップされたときに使用されるActivityを宣言しておきます。
            無事済んだらまた確認のためビルドしてみてください。


            次いで、アプリに広告IDを文字リソースとして追加しておきます。
             
            <resources>
                <string name="app_name">UnitConverter</string>
                <string name="banner_ad_unit_id">ca-app-pub-3940256099942544/6300978111</string>
                <string name="categoryText">Category: </string>
            

            これはvalues¥strings.xmlの一部です。
            3行目に追加したのが、テスト用の広告ユニットIDです。本番前はこれで動作をチェックします。
            なお、strings.xmlが多言語化により2つありますので、両方に設定しておきます。


            次に、レイアウトに広告を表示するAdViewを追加します。activity_unit_converter6.xmlを開きます。
             
            <?xml version="1.0" encoding="utf-8"?>
            <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:ads="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context="com.example.tetsuya.unitconverter6.UnitConverter6">
                (中略)
                <com.google.android.gms.ads.AdView
                    android:id="@+id/adView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    ads:adSize="BANNER"
                    ads:adUnitId="@string/banner_ad_unit_id"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true">
                </com.google.android.gms.ads.AdView>
            </RelativeLayout>
            

            まず4行目、広告で使用する新しい名前空間を定義します。
            そして中略後のモジュールがAdViewです。まるっと追加してください。
            出来たらレイアウトを確認してみてください。こんな感じに一番下にバナーエリアが表示されているはずです。


            そうしたら最後にメインのjavaに広告を読み込む処理を追加します。
             
            package com.example.tetsuya.unitconverter6;
            import android.support.v7.app.AppCompatActivity;
            import android.os.Bundle;
            import android.widget.ArrayAdapter;
            import android.widget.EditText;
            import android.widget.TextView;
            import android.view.View;
            import android.widget.Spinner;
            import android.widget.AdapterView.OnItemSelectedListener;
            import android.widget.AdapterView;
            import java.util.ArrayList;
            import android.text.Html;
            import com.google.android.gms.ads.AdRequest;
            import com.google.android.gms.ads.AdView;
            
            public class UnitConverter6 extends AppCompatActivity {
            (中略)
                @Override
                protected void onCreate(Bundle savedInstanceState) {
                    super.onCreate(savedInstanceState);
                    setContentView(R.layout.activity_unit_converter6);
                    
                (中略)
                
                    AdView mAdView = (AdView) findViewById(R.id.adView);
                    AdRequest adRequest = new AdRequest.Builder().build();
                    mAdView.loadAd(adRequest);
                }
            }
            

            まずimportの最後の2つを追加します。そして、一番最後の3行、これが広告を表示するブロックです。

            以上で、処理は全部終了しました。
            上手くいったかどうか、ビルドしてみましょう。



            上手くいくとこんな風にテストバナーが表示されます。
            大成功!!!
            と思って、なんとなくアプリに数字を打ち込もうとしたところ・・・・・



            何と、下からスライドして出てきたテンキーに押し上げられて広告が上にずり上がり、変換ボタンの裏側に入り込んでしまいました。変換後の単位名称も覆い隠してしまっています・・・

            うーん、これはちょっと色々考えて修正してやらなくてはいけません。


            今回はここまで、続きは次回をお楽しみに。















             


            Androidプログラミングに挑戦2!(19)単位変換アプリを作る−アプリのアイコンを作る

            0
              JUGEMテーマ:プログラミング

              それでは今回はアプリのアイコンを作っていきましょう。
              といってもデザインの講義ができるわけではないので、お話は主にそのサイズ、寸法的な話になります。

              スマートフォンのホーム画面やドロワー内に表示される、タップするとそのアプリが立ち上がるあのアイコンを「プロダクトアイコン」とか「ランチャーアイコン」等と呼びます。ランチャー=起動する、という意味ですね。このアイコン、アプリの起動に必要なアイコンですから、今まで作っていたUnitConverterにも当然ありました。これです。

              このドロイド君は、Android Studioのデフォルトのランチャーアイコンなんですね。ですから何も設定しないとこのアイコンでアプリが作られるわけです。でもGooglePlayに打って出ようというわけです、いつまでもデフォルトのアイコンではいけません。新しくオリジナルのアイコンを作ってみよう、というのが今回のテーマなわけです。

              ということで早速始めたいわけですが、いきなり問題にぶち当たりました。
              いったいどんな大きさでアイコンを作ってやればいいのでしょう?
              形から入る理系の私としてはそこら辺がはっきりしないとなかなか始めるに始められません。
              ちょっと調べてみました。
              まず今まで作ったアプリのデフォルトのアイコンのサイズを確認してみました。するとびっくり、アイコンは1つではありませんでした。
              app>res>mipmap、の下にmipmap-mdpi,-hdpi,-xhdpi,-xxhdpi,-xxxhdpiの5つのフォルダがあり、それぞれの中にic_launcher.pngというファイルがあるのです。どれも開くと同じ画像に見えます。いや、少し違いました。大きさが違うのです。
              小さい方から順に、48×48ピクセル、72×72ピクセル、96×96ピクセル、144×144ピクセル、192×192ピクセルとなっています。これはスマートフォンの端末の解像度に応じて一番きれいなアイコンを表示できるように、あらかじめ準備してあるということなのです。

              ではそれぞれの大きさで一つ一つアイコン画像を描いてやらなくてはいけないのでしょうか?いえそんなことはありません。これより大きめの画像を1つ作って、それを元に縮小して切り出してやればいいのです。
              以前のアンドロイドアプリのデザインガイドには864×864ピクセルで画像を準備して、これを縮小・切り出してゆくことが推奨されていました。今回はこの864×864ピクセルの枠で画像を準備してみようと思います。

              まずはこれで枠が決まりました。でも枠のなかいっぱいにみちみちでアイコンを作るのは無粋というものです。適度にマージンを取って描いてやるとスマートなアイコンになります。ではどのくらいのマージンがいいでしょう?
              これは現在のアンドロイドアプリのデザインガイド(英文)に推奨サイズが載っていました。
              曰く、
              基本を48×48ピクセルとし、4倍スケール(192×192)でデザインする場合、正方形であれば152×152ピクセル
              これを目安とすると良いとあります。
              私の場合18倍スケールの864×864ピクセルでやっていますので、684×684ということになります。

              線の幅は、48×48ピクセルに縮小したときに1ピクセル幅となるように、18倍スケールなので18ピクセル幅の線で描画します。
              アイコンの四隅の角は丸くすることにします。曲げ半径は3D、つまり線の直径の3倍くらいがすっきりするので、18×3で半径54ピクセルで描かせました。
              更に、アイコンの右と下に1ピクセル(18倍スケールなら18ピクセル)の影を付けます。これで背景からアイコンが浮き上がって見えて、識別しやすくなります。
              枠だけでこんな感じになりました。



              図の白い部分が864×864ピクセルのエリアになります。
              この上に単位変換アプリをイメージする絵を描いていくことになります。

              と、ここで、私は絵心が無いから、というあなた、安心してください、私もありません。
              こんな時は文字で行きましょう。
              kgとか、lbとか、mとかの単位が踊っている感じです。
              ちょっと斜めにして文字を貼り付けてやって、ちょっと影なんか付けてやって、
              ちょいちょい、というかんじで、できました。こんなんです。



              どうでしょう?テーマカラーも何もない、原色バリバリでガチャガチャなアイコンですが、これ以上は本当に絵心がないんで、勘弁してください。

              さてこの864×864ピクセルの画像を、縮小しつつ切り出してゆくわけです。Illustratorであれば、ファイル>Web用に保存、というメニューからサイズと出力フォーマットを指定して出力することができます。
              その他のアイコン作成ツール6選こちらのサイトにまとめられていますので、これもご参照ください。

              こうして出来上がったアイコンは、所定のフォルダに収めておけば自動的に適用されます。
              所定のフォルダとは、先ほどのmipmapフォルダと、古い機種でアイコンが保管されていたdrawableフォルダです。
              具体的には、Android Studioのプロジェクトフォルダを開き、
              app>src>main>res
              のフォルダの下にmipmap-mdpi,-hdpi,-xhdpi,-xxhdpi,-xxxhdpi、それから、drawable-mdpi,-hdpi,-xhdpi,-xxhdpiの合計9つのフォルダを作って、それぞれ前に挙げた対応するサイズの画像を保存してやればOKです。drawableフォルダは古いバージョンとの互換性を保つために残しているだけなので、最新の-xxxhdpiまでは不要、と私は解釈しています。

              さあ、これでエミュレータを起動し、アプリが起動したらおもむろにホームボタンを押し、ドロワーをクリックすると、見事、自作のアイコンがその他のアイコンに並んで表示されました。



              余談ですが、このエミュレータ(Nexus 5)で見る限り、アプリ名称は日本語で6文字以内にした方が良いようです。先ほど試しに「シンプル単位変換」というアプリ名にしてみたところ、ドロワーでの表示が「シンプル単…」になってしまいましたので。

              以上でアイコンづくりの回は終了です。
              次回は、もう少し見た目をいじるか、広告を入れてみるか、ちょっと考えます。
              ではでは。


              Androidプログラミングに挑戦2!(18)単位変換アプリを作る−多言語化する

              0
                JUGEMテーマ:プログラミング

                今回はアプリの多言語化です。
                この多言語化、実はやることは単純です。
                ・多言語化したいリソースをstrings.xml等に定義する。
                ・strings.xml等の入ったフォルダ「values」をコピーし「values-ja」とする。
                ・valuesの中の表記を英語に、values-ja内の表記を日本語にする。

                といった流れになります。私の場合、単位スピナーの表示アイテムをjavaの中に書き込んでいたので、これをxmlから読み出してセットするようにします。読み出し方は前回の単位コメント文を読みだしたときと一緒です。

                準備ができましたら、valuesフォルダをコピーしてvalues-jaフォルダを作ります。するとこんな感じにvaluesフォルダ内に日本語用と英語用の2つのxmlファイルができます。


                私はこれまで日本語ベースで作ってきましたから、ここで、(ja)ではない方のstrings.xmlを英語仕様にしてやることで英語対応ができる、ということになります。

                ここからはひたすら頑張って英訳作業です。

                ・・
                ・・・・
                ・・・・・・・・
                英訳作業完了です!

                エミュレータの言語設定を変えて確かめてみましょう。
                現在はデフォルトのEnglishになっているので、表示はこんな感じになります。


                ここで、画面下の○印、ホームボタンをクリックすると、スマホのホーム画面が表示されます。



                今度は○印の上、白○に点が6つついているドロワーアイコンをクリックしてください。インストールされているアプリ一覧がひょじされます。



                その中に、歯車マークの「Setting」というアイコンがあるはずなので、探してくクリックします。
                この画面では一番左上にあるやつです。
                クリックすると設定メニューが表示されますので、PersonalカテゴリーのLanguage & inputを探し出してクリックしてください。



                表示されたメニューの一番上に「Language」というのがありますこれをクリックして下さい。



                一覧の中から「日本語」を選んでクリックします。多分一番最後にあります。



                すると、メニューが全て日本語に変わりました。改めてホームボタン(○印)をクリックしてください。



                同様にドロワーを開いて、ドロイドアイコンのUnitConverterの中で最新のものを見つけてクリックしてください。



                すると、どうでしょう、見事日本語表示に切り替わりました☆




                今回はここまで。次回はちょっと趣向を変えて、アプリのアイコンを作っていきたいと思います。


                Androidプログラミングに挑戦2!(17)単位変換アプリを作る(その8)

                0
                  JUGEMテーマ:プログラミング

                  今回のテーマは、単位の説明を表示する、です。
                  まずは単位の名称を表示するようにしてみましょう。

                  作ったレイアウトはこちらです。



                  単位スピナーの下あたりに少し小さい文字で「メートル」とあります、ここに単位の名称を表示します。小さめの文字なので少し暗い名前が長くてもOK。何ならちょっとした解説も書ける、と言う訳です。ここは画面幅いっぱいに、幅指定はmatch_parentにしてやります。
                  この単位名称・説明を追加したことで、入力/出力エリアが各2行になりましたので、少しでも見やすいようにとおもい仕切り線を入れました。この仕切り線が結構面倒でした。

                  先にこの仕切り線を説明しておきたいと思います。
                  androidにはHTML/CSSのようにパラメータ1つで簡単に下線を引く方法がありません。4辺全部を囲った枠線を引く機能ならあります。そこでこの機能を使って領域の一番下に線のある図形を作ってこれを背景に指定してやる方法がとられます。
                  背景となる図形は、次のようにxmlで指示します。

                  drawable/underline.xml
                  <?xml version="1.0" encoding="utf-8"?>
                  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
                      <!-- 枠線付き長方形 -->
                      <item>
                          <shape android:shape="rectangle">
                              <solid android:color="#FAFAFA"/>
                              <stroke android:width="1dp" android:color="#AAAAAA" />
                          </shape>
                      </item>
                      <!-- 1dp分の padding を設定した枠線なし長方形 -->
                      <item android:bottom="1dp">
                          <shape android:shape="rectangle">
                              <solid android:color="#FAFAFA"/>
                          </shape>
                      </item>
                  </layer-list>
                  
                  リスト中にコメントで書いてありますが、前半で枠付きの長方形を作ります。次に後半で枠無しの長方形を、下側に1dpのpaddingを持たせて重ねてやります。これで、隙間から1dpの下線が除いているイメージになります。
                  これを、カテゴリーを選択するLinerLayout(Horizontal)と、今回追加したコメント用のTextViewに対してbackgroundに設定してやります。上記xmlファイルをdrawableフォルダに置いたうえで、backgroundに「@drawable/underline」と指定してやればOKです。


                  次に、コメント文です。
                  これは、カテゴリー毎にコメント文をまとめてString-ArrayとしてString.xmlに保存しておき、単位スピナーを切り替えた時に、選ばれた単位に対応するコメント文を取り出して表示することにしました。
                  変更する場所は、入出力それぞれのスピナーのOnItemSelectedListnerです。

                  冒頭部分を書き出します。
                  unitSpinnerInput.setOnItemSelectedListener(new OnItemSelectedListener() {
                      // アイテムが選択された時
                      public void onItemSelected(AdapterView<?> parent, View viw, int arg2, long arg3) {
                          idxi = unitSpinnerInput.getSelectedItemPosition();
                          commentArrayInput = new String[30];
                          if (categoryNumber==0) {    // 長さ
                              commentArrayInput = getResources().getStringArray(R.array.unitCommentLength);
                              textView3.setText(commentArrayInput[idxi]);
                              switch(idxi){
                                  case 0: // m
                                      convRatioInput = 1.0;
                                      break;
                                  case 1: // km
                  (以下省略)
                  

                  まず5行目、コメント一覧を読み込む配列を宣言しています。
                  次に7行目、コメント一覧を読み込みます。unitCommentLengthというのが「長さ」カテゴリーのコメントをまとめたString-Arrayの名前です。
                  そして8行目、入力側のコメントテキストを表示するTextViewに4行目で取得したポジションのコメント文を表示します。
                  これを入出力すべてのカテゴリーに対して追記してやればOKです。

                  出来上がりはこんな画面になります。


                  いい感じです。


                  ということで今回はここまで。次回は多言語対応についてです。

                   


                  Androidプログラミングに挑戦2!(16)単位変換アプリを作る(その7)

                  0
                    JUGEMテーマ:プログラミング

                    新年あけましておめでとうございます。
                    今年もつたない文章ではありますが、ぼちぼちアップしていきたいと思いますので、緩い感じでお付き合いください。

                    今回は、最終形態に向けての展望を整理しつつ、データ入力作業を進めていきましょう。

                    まずその最終形態を何と見据えるかです。
                    1年の始まりでもありますのでここは大きく出て、Google Playでの公開を目指したいと思います!
                    それに向けてはあと何をすればいいのでしょう?
                    思いつくままに挙げてみましょう。
                    ・カテゴリー、単位を充実させる。
                    ・単位の説明を表示する。
                    ・アイコンを作る。
                    ・多言語対応にする。
                    ・広告を入れる(広告なしの有料版も公開する)
                    ・Google Playデベロッパーに登録する。
                    ・アプリを公開する。

                    なにやら壮大な計画になってきました。いい感じです。
                    今日のところは以前からの予告通り、カテゴリー、単位の充実を行いたいと思います。

                    まず、カテゴリーですが、前回は長さ、面積、体積、重さの4つだけ4でしたが、そこに密度、時間、速度、加速度、体積流量、質量流量、角度、角速度、角加速度、力、圧力、仕事、仕事率、温度の14カテゴリーを加えて、全部で18カテゴリーにしました。変換できる単位はそれぞれ次の通りです。
                    長さ:m, km, cm, mm, μm, nm, Å, pm, in, ft, yd, mile, nmile, 毛, 厘、寸、尺、間、尋、町、里、AU、ly、pc(24個)
                    面積:m2, a, ha, km2, cm2, mm2, in2, ft2, yd2, ac, mile2, 坪、畝、反、町(15個)
                    体積:m3, cm3, mm3, L, dL, mL, cc, 小さじ、大さじ、カップ、in3, ft3, USfl.oz, USfl.pt, USfl.qt, USG, Imp.gal, USbu, Oil bbl, US bbl, Imp.bbl, 勺、合、升、斗、石、俵(27個)
                    重さ:kg, g, mg, μg, ng, pg, fg, t, gr, dr, oz, lb, s/qr, s/t, l/t, 匁、両、斤、貫、kt(20個)
                    密度:kg/m3, g/cm3, lb/ft3, lb/in3(4個)
                    時間:s, ms, μs, ns, ps, fs, min, h, d, wk, mo, y, c(13個)
                    速度:m/s, m/min, m/h, km/s, km/min, km/h, fps, fpm, fph, mps, mpm, mph, kt, M(14個)
                    加速度:m/s2, ips2, fps2, mps2, g, Gal(6個)
                    体積流量:m3/s, scch, sccm, sccs, sLm, sLs, in3/s, ft3/s, m3/h, galUS/s, galUK/s(11個)
                    質量流量:kg/s, lb/s(2個)
                    角度:rad, °, ′, ″, grad, mil, %(7個)
                    角速度:rad/s, °/s, rps, rpm, Hz(5個)
                    角加速度:rad/s2, °/s2, rps2(3個)
                    力:N, dyn, kgf, lbf, pdl(5個)
                    圧力:Pa, hPa, kPa, MPa, mbar, bar, kg/cm2, atm, Torr, mmHg, mmAq, inHg, psi(13個)
                    仕事:J, kJ, MJ, erg, kgf・m, eV, cal, kcal, BTU, kWh, tTNT, HPh, PSh(13個)
                    仕事率:W, kW, HP, PS, kgfm/s, ftlb/s, kcal/s, kcal/h, BTU/s(9個)
                    温度:K, ℃、℉、°R(4個)

                    一応一般的なものは一通り集めたつもりですが、このほかにもカテゴリーの追加や単位の追加のリクエストがありましたら、いつでも対応いたしますので、コメントよろしくお願いします。

                    さてこれらの単位の中で、実際に換算してみようとすると今までの方式では換算できない単位がいくつか出てきました。今までの方式は、変換元の単位から基準単位に、その後基準単位から変換先の単位にそれぞれ変換係数を掛けて変換していました。ですが上記の単位の中に、変換係数を掛けるだけでは換算できない単位が出てきたんです。

                    一つ目は、角度の「%」。よく道路標識にある、100m進む間に1m高くなったら勾配1%、というあれです。この勾配x%を角度に直すにはatan(x/100)(アークタンジェント)という逆三角関数を使って計算してやる必要があります。

                    それから4つの温度。Kは℃+273.15となり、比例ではなくシフトです。またx℃とy℉の関係も、y=1.8x+32という数式で表されており、単純な比例になっていません。つまり0の点がずれているんですね。

                    ただ、これらに対応する必要はあるのですが、その他大勢の単位たちは今までの基準単位を経由した比例方式で簡単に換算することができるので、全部を変えてしまうのはデメリットが大きいでしょう。ということで、基本は今まで通りの変換係数方式で、そして上に挙げた5つの単位の時だけif文で見分けて個別の変換を行ってやる、ということにしたいと思います。

                    実際の変換はjavaで行っていますので、その部分を拡張しました。抜き出して以下に示します
                    変換ボタンのOnClickListener部分です。
                            findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    // 入力欄に記入されたテキストを取得
                                    input = editText.getText().toString();
                                    // 取得したテキストを数値に変換
                                    if (!input.equals("")) {
                                        inputValue = Double.parseDouble(input);
                                    } else {
                                        inputValue = 0;
                                    }
                                    if (categoryNumber==10) { // 角度の場合
                                        if (idxi==6) {
                                            intermediateValue = Math.atan(inputValue/100);
                                        } else {
                                            intermediateValue = inputValue*convRatioInput;
                                        }
                                        if (idxo==6) {
                                            outputValue = 100*Math.tan(intermediateValue);
                                        } else {
                                            outputValue = intermediateValue/convRatioOutput;
                                        }
                                    } else if (categoryNumber==17) { // 温度の場合
                                        switch (idxi){
                                            case 0:
                                                intermediateValue = inputValue;
                                                break;
                                            case 1:
                                                intermediateValue = inputValue + 273.15;
                                                break;
                                            case 2:
                                                intermediateValue = (inputValue+459.67)/1.8;
                                                break;
                                            case 3:
                                                intermediateValue = inputValue/1.8;
                                        }
                                        switch (idxo) {
                                            case 0:
                                                outputValue = intermediateValue;
                                                break;
                                            case 1:
                                                outputValue = intermediateValue - 273.15;
                                                break;
                                            case 2:
                                                outputValue = intermediateValue*1.8 - 459.67;
                                                break;
                                            case 3:
                                                outputValue = intermediateValue*1.8;
                                                break;
                                        }
                                    } else { // その他のカテゴリーの場合
                                        // 入力単位→出力単位に変換
                                        outputValue = inputValue * convRatioInput / convRatioOutput;
                                    }
                                    // 変換した数値を文字列として出力エリアにセット
                                    textView2.setText(String.format("%.10g", outputValue));
                                }
                            });
                    

                    カテゴリーNo=10の「角度」の場合、インデックスidx*=6の場合のみatanを使った換算を行い、それ以外は換算係数を使って、一旦中間の基準単位に変換します。その後落ち着いて同じように基準単位から目的の単位に変換してやることにしました。
                    カテゴリーNo=17の「温度」の場合も考え方は同じです。こちらは4つの温度それぞれで異なる換算をしてやる必要がありますので、if文ではなくswitch文で対応する換算式に飛ばすようにしています。

                    これで機能的には完成しました。あとはまぁ飾りのようなものです。次回から一つ一つ、楽しみながらやっていくことにしましょう。
                     


                    Androidプログラミングに挑戦2!(15)単位変換アプリを作る(その6)

                    0
                      JUGEMテーマ:プログラミング

                      前回お約束しました通り、スピナーのアイテムで上付き文字を使用する方法について調べてきました。
                      まず、レイアウトで設定したままのスピナーであれば、strings.xmlに定義してあるstring-arrayで次のように書けば上付き文字を表示させることができます。
                          <string-array name="category">
                              <item>長さ<sup><small>2</small></sup></item>
                              <item>面積</item>
                              <item>体積</item>
                              <item>重さ</item>
                          </string-array>
                      

                      出力結果はこうなります。


                      割とあっさりできました。
                      参考にさせて頂いたのはこちらのサイトです。

                      - Google Android - 雑記帳:Tips TextView を使いこなそう 〜 表示編 〜 その2

                      その他の使用可能なタグ一覧も載っていますので、参考になると思います。


                      しかし、この方法、途中で中身を切り替えられるようにした単位用スピナーではうまくいかないようです。
                      コードはこうなっていました。
                      String[] unitList;
                      (中略)
                      categoryNumber = categorySpinner.getSelectedItemPosition();
                      switch (categoryNumber) {
                          case 0: // 長さ
                              unitList = getResources().getStringArray(R.array.unitListLength);
                              break;
                          case 1: // 面積
                              unitList = getResources().getStringArray(R.array.unitListArea);
                              break;
                          case 2: // 体積
                              unitList = getResources().getStringArray(R.array.unitListVolume);
                              break;
                          case 3: // 重さ
                              unitList = getResources().getStringArray(R.array.unitListWeight);
                              break;
                      }
                      adapter = new ArrayAdapter(getApplicationContext(),android.R.layout.simple_spinner_item, unitList);
                      unitSpinnerInput.setAdapter(adapter);
                      unitSpinnerOutput.setAdapter(adapter);
                      
                      単位リストを入れる配列「unitList」を冒頭で「String[]」で宣言していますが、これは6,9,12,15行目のgetResources().getStringArrayがstring[]しか受け付けてくれないためです。htmlタグ付きのStringはただのStringではなく「CharSequence」と呼ばれるものになるので、このやり方では通らなかったということでした。

                      対応策はいくつかあるようですが、私がやってみてうまくいったのは、unitListをCharSequenceのArrayListとして宣言してやり、そこにその場で一行ずつ足していってやる方法です。
                      実際にコードを見てもらった方が早いでしょう。
                      @Override
                      public void onItemSelected(AdapterView parent, View view, int position, long id) {
                      categoryNumber = categorySpinner.getSelectedItemPosition();
                      unitList  = new ArrayList<>();
                      switch (categoryNumber) {
                      case 0: // 長さ
                      unitList.add("m");
                      unitList.add("km");
                      unitList.add("mile");
                      break;
                      case 1: // 面積
                      unitList.add(Html.fromHtml("m<sup><small>2</small></sup>"));
                      unitList.add("a");
                      unitList.add("ha");
                      break;
                      case 2: // 体積
                      unitList.add(Html.fromHtml("m<sup><small>3</small></sup>"));
                      unitList.add("cc");
                      unitList.add("L");
                      break;
                      case 3: // 重さ
                      unitList.add("kg");
                      unitList.add("lb");
                      unitList.add("貫");
                      break;
                      }
                      adapter = new ArrayAdapter(getApplicationContext(),R.layout.spinner_item, unitList);
                      unitSpinnerInput.setAdapter(adapter);
                      unitSpinnerOutput.setAdapter(adapter);
                      convRatioInput = 1.0;
                      convRatioOutput = 1.0;
                      }
                      
                      ポイントは4行目でunitListを確保し、12行目と17行目でHtml.fromHtml()メソッドでタグを記入しているところです。こうしてやることで、切り替えたスピナーでも上付き文字を表示することができました。


                      めでたしめでたし・・・・と思っていたら、何やら緊急事態が発生しました。

                      単位スピナーの文字が表示されなくなってしまったのです!
                      いや、よくよく見ると文字は書かれてはいるのですが色が真っ白になってしまって、全く見えない状態でした。
                      そんな設定は何一ついじっていないので、今回ばかりは原因がわかりません。(もしかしたらSDKをアップデートしたせい・・・?)

                      判らないと言っていては始まらないので、ここは強制的にスピナーの文字の色を指定しやることにしましょう。

                      最初に試したのは、style.xmlのなかで、新しくandroid:spinnerItemStyleとandroid:spinnerDropDownItemStyleを定義しなおしてやることです。こんな感じに書いてやります。
                       
                      <resources>
                          <!-- Base application theme. -->
                          <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
                              <!-- Customize your theme here. -->
                              <item name="colorPrimary">@color/colorPrimary</item>
                              <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
                              <item name="colorAccent">@color/colorAccent</item>
                              <item name="android:spinnerItemStyle">@style/SpinnerItemStyle</item>
                              <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItemStyle</item>
                          </style>
                          <style name="SpinnerItemStyle" parent="android:Widget.Holo.Light.TextView.SpinnerItem">
                              <item name="android:textSize">24sp</item>
                              <item name="android:textColor">#000000</item>
                          </style>
                          <style name="SpinnerDropDownItemStyle" parent="android:Widget.Holo.Light.DropDownItem">
                              <item name="android:textSize">24sp</item>
                              <item name="android:textColor">#000000</item>
                          </style>
                      </resources>
                      

                      8,9行目で新たなスタイルを呼び出しています。11行目からがその新しいスタイルになっています。
                      これはこちらのサイトを参考にさせていただきました。
                      Y.A.M の 雑記帳:Android Spinnerの選択肢をXMLで指定する

                      でもこれ実際にやってみたら、カテゴリースピナーには効くのですが、単位スピナーに効いてくれません・・・
                      仕方がないので次の手を。

                      先ほどのコードでArrayAdapterをセットする部分、こうなっていました。
                      adapter = new ArrayAdapter(getApplicationContext(),R.layout.spinner_item, unitList);
                      

                      これ、前回のコードでは、
                      adapter = new ArrayAdapter(getApplicationContext(),android.R.layout.simple_spinner_item, unitList);
                      

                      こうなっていたのです。前回のコードではデフォルトのレイアウトである「android.R.layout.simple_spinner_item」が呼ばれている部分が「R.Layout.spinner_item」に書き換わっています。これは自作のレイアウトファイルを呼び出すようにしているのです。

                      自作のレイアウトファイルの中身はこうなっています。
                      <?xml version="1.0" encoding="utf-8"?>
                      <TextView
                          xmlns:android="http://schemas.android.com/apk/res/android"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:textSize="24sp"
                          android:gravity="left"
                          android:textColor="#000000"
                          android:padding="5dp"
                          />
                      
                      こんな形に、文字サイズと文字色、パディング等を指定しています。
                      これで無事全部丸くおさまりました。

                      できあがりはこんな感じです。


                      いいんじゃないでしょうか☆?
                      特に触れませんでしたが、今回実機でもデバッグしてやったところ、スピナーの縦の幅が狭くてタップしにくいということが判りましたので、今回はwrap_contentではなく高さを直接指定して、少し幅を広げてやっています。

                      あとは変換できる単位とカテゴリーを充実させてやるだけです。

                      次回は最終結果をお見せするつもりです。お楽しみに。



                      calendar

                      S M T W T F S
                        12345
                      6789101112
                      13141516171819
                      20212223242526
                      2728293031  
                      << October 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

                      楽天ブックス

                      楽天