<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Android on notes</title><link>https://unionsep.dev/tags/android/</link><description>Recent content in Android on notes</description><generator>Hugo -- 0.161.1</generator><language>en</language><lastBuildDate>Wed, 06 Sep 2017 15:29:29 +0900</lastBuildDate><atom:link href="https://unionsep.dev/tags/android/index.xml" rel="self" type="application/rss+xml"/><item><title>Androidアプリ公開しました！</title><link>https://unionsep.dev/posts/2017/09/06/152929/</link><pubDate>Wed, 06 Sep 2017 15:29:29 +0900</pubDate><author>unionsep</author><guid>https://unionsep.dev/posts/2017/09/06/152929/</guid><description>&amp;lt;no value&amp;gt;</description><content type="text/html" mode="escaped"><![CDATA[<p>　かつてより作ってみたいな〜と思っていたAndroidアプリをGooglePlayに製品版を公開しました！</p>
<aside class="cite-card">
    <div class="cite-card__image cite-card__image--fallback" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <circle cx="8.5" cy="8.5" r="1.5"></circle>
      <polyline points="21 15 16 10 5 21"></polyline>
   </svg></div>

  <a href="https://play.google.com/store/apps/details?id=pl_sheeter.heteml.jp.penlightsheeterz" target="_blank" rel="noopener noreferrer">
    <div class="cite-card__title">https://play.google.com/store/apps/details?id=pl_sheeter.heteml.jp.penlightsheeterz</div>

    <div class="cite-card__site">play.google.com</div>
  </a>
</aside>

<p>　WebViewで作られていたソシャゲを担当していた時、ネイティブの機能を使ってあれやりたいこれやりたいと思ったり、このJavascriptはどういう仕組で動いているんだ？と疑問に感じていたので、なんでもいいからスマホアプリを自分で手がけたいと悶々と思っていました。<br>
　まぁ、それまでアプリプラットフォームチームのコードを読んだりもしていたのですが、そもそも今の組織に入ったとき、流行り始めているスマホアプリを開発したかったという思いもあって、6年越しに一通り自分で管理できる機会に恵まれました。</p>
<p>　作ったアプリは、HTML5の <code>canvas</code> で生成した画像をスマホのストレージに保存する機能しか持たない簡単なアプリですが、なかなかはまりました。お遊びでアプリは作っていたのですが、ちょっと込み入ったことをすると途端にはまるのはいつまで経っても変わらないな。。<br>
　普通のWebViewのアンカーリンク（A要素）から画像ファイルをダウンロードするのであれば、特にはまらなかったかもしれませんが、今回はbase64エンコードされた文字列をアプリで受け取って、画像ファイルにデコードして保存という流れです。というのも、WebView上の <code>canvas</code> に文字やスタンプ画像を好きに配置して、 <code>toDataURL()</code> メソッドで <code>data:URI</code> を生成するためです。<br>
　この場合、 <code>DownloadListener</code> で受け取れるのか、 <code>WebViewClient.shouldOverrideUrlLoading(WebView view, String url)</code> で受け取れるのか挙動が分からずに色々悩みました。素人同然のため、API Levelで挙動が違うのか、端末依存なのか、WebViewのバージョンで違うのかが全く分からず、なんだかできたと思ったら他の端末で動かない、それを直したら他で動かないみたいなモグラたたき状態に陥っていました。<br>
　結局、この記事に行き着き、 <code>DownloadListener</code> ではなく <code>shouldOverrideUrlLoading</code> でもないブラウザのセキュリティの更新が原因だったみたいでした。 <code>JavascriptInterface</code> を用意して、 <code>data:URI</code> をWebViewのJSから渡してもらう方法に軌道修正して期待通りの動きにできました。なんとなくアンカーリンク（A要素）だし初アプリ実装だから、王道のメソッドで受け取りたかったんだろうなと自分にかかったバイアスの強さを感じました。</p>
<aside class="cite-card">
    <div class="cite-card__image cite-card__image--fallback" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <circle cx="8.5" cy="8.5" r="1.5"></circle>
      <polyline points="21 15 16 10 5 21"></polyline>
   </svg></div>

  <a href="http://pokkurutime.hatenablog.com/entry/2017/08/04/164551" target="_blank" rel="noopener noreferrer">
    <div class="cite-card__title">http://pokkurutime.hatenablog.com/entry/2017/08/04/164551</div>

    <div class="cite-card__site">pokkurutime.hatenablog.com</div>
  </a>
</aside>

<p>　だから端末によってイベントをキャッチできたりできなかったりしたんだろうなぁと振り返って思いました。他にもはまったポイントや知り得たことを忘れないように書いておこう。</p>
<ul>
<li>端末の権限の取り方
<ul>
<li>Android 7.0以降は <code>onRequestPermissionsResult</code> をOverrideしてユーザの操作をハンドリングする</li>
<li>これをOverrideしていないと権限無い状態で先の処理が走ってしまってアプリが落ちる</li>
</ul>
</li>
<li><code>ProgressDialog</code> の実装方法
<ul>
<li><code>Thread</code> で非同期にしておかないと <code>Activity</code> で管理？していないダイアログになってアプリが落ちる</li>
</ul>
</li>
<li>JSのAlertみたいなダイアログの実装方法
<ul>
<li><code>AlertDialog.Builder</code> でボタンの挙動だったり表示文字をセットできる</li>
</ul>
</li>
<li>画面回転した場合、WebView
の更新処理が走る
<ul>
<li><code>restoreState()</code> で <code>savedInstanceState</code> を保存しておくメソッドをOverrideしておく</li>
</ul>
</li>
<li>Webアプリじゃないので、戻るボタンを押されたときの挙動を実装しておく
<ul>
<li><code>onKeyDown()</code> をOverrideして実装しておかないと、トップページに戻った時に再度戻るボタンを押したら別のページに遷移したりする</li>
<li>この挙動がネイティブアプリっぽくないから、適切に押下を無視するとか <code>finish()</code> とかを実装しておく</li>
</ul>
</li>
<li>アプリからWebViewのHTMLを変えたい
<ul>
<li><code>onPageFinished()</code> とかをOverrideして <code>loadUrl()</code> でJSを即時実行させると動く</li>
</ul>
</li>
<li>リファレンス機は必要
<ul>
<li>エミュレータで確認していたのですが、どうやらWebViewの更新が追いついていなかったのかな？動かなかった。。</li>
<li>Nexux5xも息が長いけど、公式リファレンス実機の確認は絶対やったほうがいい</li>
</ul>
</li>
</ul>
<hr>
<p>　実装はとても楽しかったので、最後にアプリの紹介をば。
これは所属する会社のお産合宿に誘われたのがきっかけで始まったことでした。</p>
<aside class="cite-card">
    <div class="cite-card__image cite-card__image--fallback" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <circle cx="8.5" cy="8.5" r="1.5"></circle>
      <polyline points="21 15 16 10 5 21"></polyline>
   </svg></div>

  <a href="http://osan.pepabo.com/" target="_blank" rel="noopener noreferrer">
    <div class="cite-card__title">http://osan.pepabo.com/</div>

    <div class="cite-card__site">osan.pepabo.com</div>
  </a>
</aside>

<p>　さらっと <code>canvas</code> で画像ファイルを・・・と話しましたが、それはアイドルのコンサートなんかで光らせるキングブレードというペンライトに装飾をするための画像ファイルです。キングブレードの内紙にバッチリ合う画像ファイルをコンビニで印刷できる（コンサートへ向かう最中でも推しメン用にカスタマイズできる）ことが売りです。<br>
　そちら方面はまったく詳しくないのですが、  <a href="https://twitter.com/souseiji">@souseiji</a> さんや <a href="https://twitter.com/_mmmix">@_mmmix</a> さんの話を聞く内にチャンスなのではないかと感じて参戦させていただいた次第です。</p>
<aside class="cite-card">
    <div class="cite-card__image cite-card__image--fallback" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
      <circle cx="8.5" cy="8.5" r="1.5"></circle>
      <polyline points="21 15 16 10 5 21"></polyline>
   </svg></div>

  <a href="https://www.amazon.co.jp/%E3%83%AB%E3%82%A4%E3%83%95%E3%82%A1%E3%83%B3-%E3%82%B8%E3%83%A3%E3%83%91%E3%83%B3-%E3%82%AD%E3%83%B3%E3%82%B0%E3%83%96%E3%83%AC%E3%83%BC%E3%83%89X10III-Neo-%E3%82%B7%E3%83%A3%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0/dp/B015E0NEAI/ref=pd_cp_21_1?_encoding=UTF8&amp;psc=1&amp;refRID=KHYT9AJXZ6CQVYW0XGC0" target="_blank" rel="noopener noreferrer">
    <div class="cite-card__title">Amazon.co.jp</div>

    <div class="cite-card__site">www.amazon.co.jp</div>
  </a>
</aside>

<p>　途中、まったくわからないキーワードに出会ったり、自分用のキングブレード買ったり、帰りにスターマリーのコンサートに連れて行ってもらったりと、開発以外にも色々初体験が多い期間で楽しかったです。</p>
<aside class="cite-card">
    <img
      class="cite-card__image"
      src="https://static.wixstatic.com/media/971c66_05755d35c75d4020bbcbf0eb6b347f8d~mv2.jpg/v1/fill/w_2500,h_1667,al_c/971c66_05755d35c75d4020bbcbf0eb6b347f8d~mv2.jpg"
      alt=""
      loading="lazy"
    >

  <a href="http://starmarie.com/" target="_blank" rel="noopener noreferrer">
    <div class="cite-card__title">ホーム | STARMARIE</div>

    <div class="cite-card__site">STARMARIE official</div>
  </a>
</aside>

<p>　今回は、金銭的にも期間的にもAndroidアプリに絞って作りましたが、会社の人たちはiPhone率が高いので、空いた時間にちょびちょび作ってしれっとiOSアプリも公開しとこうかな〜</p>
]]></content></item></channel></rss>