WebはFirebaseを導入する際、モバイルとは違いJavaScriptを読み込んで使う。そのためindex.htmlに\<script>を仕込むのだが、異変が起きた。runをしてもここから一切動かないのだ。ググったらimportを消せとか色々策があったが効果はなかった。main.dart.jsを読み込んだ後にFirebaseの設定をしようとしていませんか?はい。type="application/javascript"></script></body>とするのが正解です。2020よい前提としてこれはnageler.hatenablog.comの応用例です。実装の際はこちらも一読すると良いと思います作ってみる環境はAndroidStudio+Kotlinです。ボタンを用意する画面外下から出したいのでConstraintLayoutを使って下に配置します。Top_ToBottomOfで画面外配置できるのかなり便利ボタンを出すこれが本題かな?(そうでもない)アニメーションには前回も使ったSpringAnimationを使います。developer.android.com説明は前の分を見てください。遅延を付けて出す画面を出してから少し遅延を付けて出したいので、Kotlinの非同期処理としてCoroutineを利用します。"org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.3"}GlobalScopeでCoroutineを立て、1秒delayしてからアニメーションを実行するよう設定します。animation.start()はバックグラウンドスレッドで呼び出すと怒られるのでwithContextでスレッドを変えましょう。出す長さの計算としてviewHeightとmarginを使っています。resources.displayMetrics)この一文ですが、SpringAnimationはPixel単位で動かすのでこう書くとDPから変換してくれるらしいです(やらないと端末ごとに移動距離が歪になる)。引っ込める利便性のため引っ込める関数も作っておきます。こちらは呼び出されたらすぐ実行するだけなのでCoroutineなしで書きます。動かす前の記事のとおりです。今回は上方向に動いてほしくないので上に指が動いたときのみ制限をかけるようにします。originAnimationは外部からアクセスしたいのでActivity内に宣言しました。下へのフリックで引っ込むようにするフリックの検知にはGestureDetector.SimpleOnGestureListenerを使います。}}ボタンのフリックした速度が出力されると思います。適当な速度を超えたら引っ込むようにします。Viewが移動していてもよしなにアニメーションを作ってくれるのがSpringAnimationの素晴らしいところ。パラメータがいくつかあるのでそれらを調整すれば、それなりの動きになると思います(最初の動画は動きすぎ...)。最後にAnimationたのしい出来上がったコードはGitHubにあげてあります(Branch切ってるだけなので見にくい)。Designなどではあまり見かけませんが、必要性が出てきたので作ってみました。何に使うのか業務にて動きのある/指で動かせるボタンを作る機会があったのですが、動かせる範囲を制限したくこのような動きを考えました。これについては他の記事で話しましょう。作ってみる環境はAndroidStudio+Kotlinです。SpringAnimation今回、指を離した後に戻る部分のアニメーションにはSpringAnimationを使っています。Animation」の一種で、簡単にバネの動きをViewに対して実装できます。developer.android.comapp/build.gradleに以下を追加しましょう。'androidx.dynamicanimation:dynamicanimation:1.0.0'}指に追随させる指の動きに合わせてViewを動かすには、ViewのonTouchListenerを利用します。developer.android.comlimitedButton.yに座標(pixel)を書き込むことでボタンを移動できるのですが、ここではtouchGapYとstartRawYを使って制御しています。ボタンのY座標には"親の"Viewの左上からの座標を指定しなければならないのに対しe.rawYで取得できるのは"画面の"左上からの座標です。この分のズレを吸収するためにViewが押された瞬間に2つの差分を取ってtouchGapYに保持します。動いたときにはtouchGapYを引いてあげればちょうど良くなるということです。touchGapY}動きの限界を設定する本題です。限界を設定するにしても動きがスムーズでなければ不自然になってしまいます。そこで私はarctanを使って滑らかさを作りました。なにかの値に収束する関数であればなんでもいいと思います。2/πに収束するのだと不便なので正規化してこのような関数を用意しましょう。適当に動かした分(startY-rawY)に応じた量(α)でボタンが動くようにします。これでlimitを超えない範囲でいい感じに動いてくれるようになります。実際に動かしながらvariationの値などを変えるとよいです。離したら戻るようにするここまでだとただ単に動きの悪いDraggableButtonです。先のSpringAnimationを付けてみましょう。次の関数を用意します。SpringAnimationの引数で対象と終点を設定します。終点の種類には以下のようなものがあります。次にAnimationの物理的な特性である剛性(spring.sfiffness)と減衰率(spring.dampingRatio)を指定します。終点に達するまでの揺れが多くなる公式が詳しいので目を通すのがよいです。touchGapY)}ついでにX座標にも動かせるようにしたのが以下のコードです。冒頭のGIFもこれですね。参考android.jlelse.eu出来上がったコードはGitHubにあげています。iOSと同列でWebアプリにも同一コードで対応できるようになったわけです。1.9以上が必要なのでアップデートしましょう。新しいプロジェクトを作ります。projectBMIを計算するアプリを作りますProjectが作成されると、ディレクトリにWebが追加されているのが分かると思います。適当にコードを変更して、Chromeからデバッグしてみましょう。chromeでできます。ここまでWeb向けのコードは一切書く/書き換えていません。HotReloadも使えます。WebはコードをJSにトランスパイルしてWebページの作成を実現しています。Pagesで無料で公開できる!というわけです。webでトランスパイルします。ファイルが生成されます。したらGitHubで適当にRepositoryを作り、Webの階層からpushしましょう(rebuildしたら消えるので別に移動した方が良い)。masterブランチを選びます。1分も待てば公開されます。独自ドメインも使えますよ。https://organic-nailer.github.io/calc_bmi_web_app/今回作ったのがこれです。記事書きながらでも1時間かかりませんでした。...わかりますかこの速度感!!これはやばいですよ(アプリ開発者の感想)まとめいかがでしたか?まだテクニカルプレビューですが触る限り大きなバグは見られず、試用程度なら十分に使えると思いました。Stableになるのが非常に楽しみです。https://clatan.fastriver.dev/#/今回作ったアプリのコードはGitHubに転がしておきます。App公開Tweet広告を非表示にするもっと読むコメントを書く2019-08-18Huaweiのスマホのテーマを自作するHuaweiこそ至高EMUIの魅力の一つとして、テーマ(見た目)を自由に変えられるということがあります。Huaweiのテーマストアなり、Playストアなりでテーマを手に入れて適用することで、通知バーやロック画面、ランチャーなどを変更することができます。悩み割と有料のテーマが多い。自分にピッタリ合う物が見つからない。適用すると文字が読めなくなりがち。?ストアで提供されてるものであればSDKが配布されてるはずなので、自分で作れるだろ、と。zipをダウンロード、インストール。Defenderに文句を言われました。hwtToolがそれです。.hwtファイルをimportして編集することもできます。ロック画面は結構自由度高めに編集できるよう(触ってない)で、他は色を指定したり画像を指定することでテーマを作れます。手元にHuawei端末があればPCにつないでその場で動かすこともできます。GUIで簡単に作れて素晴らしいですね。...と思いきや実際には一部分しか作れないこのテーマ、全部一括で変更できそうに思えますが、実はアプリ単位でテーマを設定してます。messaging)+システムUI(通知バーなど)しか変更できません。私としては設定アプリのテーマを弄りたかったのですができませんでした。(x86)\hwtTool\res)。そこに色を指定したxmlや画像が入っているので、直接弄ることでもテーマを作ることができるのです。Suiteなんぞ無くともテーマは作れるんですね。問題ただ製作するにあたって一つだけ問題があります。ドキュメントが見つからない。日本語はおろか英語にも多分存在しません(中国語ならある?)。DeveloperもhwtToolの使い方しか載せていませんでした。fqdeboer.netwww.xda-developers.com頑張っている人たちはいるようですが私は解読する気力がないです...私は諦めました通知バーのデザイン変えたい!くらいなら好きな色にできるので有用だと思います。Terminal(Preview)でコピー&ペースト注意これは2019年8月14日時点の記事です。Preview版なのですぐ仕様が変更される可能性があります。Terminalは標準でコピペがブロックされています。ctrl+cはWindowsではコピーのコマンドですが、Linux(他でも?)ではSIGINTシグナルを送信してプロセスを終了するという役割を持っています。コマンドが被らないため無効にされていたんですね。解決法しかしコピペできないのは不便(面倒)です。思ったらissueで色々議論されていました。設定できるようになったみたいです。github.comということで設定していきます。Ctrl+,でprofiles.jsonが開かれます。keybindingsに以下を追加します。//略}keysの部分は好きなショートカットでOKです。これを保存すればコピペができるようになります(再起動必要なし)。問題コンテンツを全て表示させる目的でScrollViewを使うことは多いと思います。ように書くと下までスクロールできずCardViewが切れてしまいます。なんなのかいろいろ試してみたところ、事象としてはCardViewの上のmarginの分下が切れているように思われます。ScrollViewのスクロール長さの決定にChildのmarginは含まれていない...?marginを0にすると問題は起こりません解決策LinearLayoutで中身をラップするしっかり下のmarginまで表示されました。LinearLayout.developer.android.comとあるので、childが一つならラップしなくてもいいはずなんですが...SampleはGitHubに上げています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。