為さねば成らぬ

retia.verno@gmail.com

Jetpack Composeを触る時は

結論

リリースノート開いておけ!

解説

Jetpack Composeは開発中のライブラリであり、新たな機能ができては名前を変えていきます。

あなたが見たJetpack Composeのドキュメントは書かれたときそのバージョンでは正しいものですが、今やろうとしてあなたが入れたバージョンでは正しくない恐れがあります。これは公式ドキュメントでも同様です。

ドキュメント通りに書いてもビルド通らないな?という場合にはまずcomposeのリリースノートを開く癖をつけるのがよいです。 ページ内検索をすればだいたい removed とか deleted とか書いてあります。(表記揃えてないんですね)

以下開いておくリリースノート貼っておきます。このとき言語を英語にしましょう。日本語だと翻訳されておらず最新ライブラリの情報が載っていない場合が多いです。

Compose Foundation  |  Android Developers

Compose Material  |  Android Developers

Compose UI  |  Android Developers

Compose Animation  |  Android Developers

useIRとは一体何か

課題

Jetpack Composeを利用する際に、kotlinOptionsに useIR を設定する必要がある。

    kotlinOptions {
        useIR = true
    }

これは何を表すのか。

調査

https://kotlinlang.org/docs/whatsnew14.html#unified-backends-and-extensibility

intermediate representation、つまり中間表現のこと。

Kotlinには最近では Kotlin/JVM Kotlin/JS Kotlin/Native があって、歴史的に前2つは別々に開発されてきたのでコードの多くは別になっていた。 対して Kotlin/Native はKotlinの中間表現でビルドされたインフラものに基づいており、前者2つもこのIRにmigrateしていく\。 3つを同じIRのバックエンドで統一できれば多くの機能追加や最適化、バグフィクスが同時に出来るようになる。

Jetpack ComposeはコンパイラプラグインにこのIRを既に使っている。

最近行っている、悪い習慣を無くすための試み

習慣化は私の最近のテーマだ。怠惰な人間なので、放っておくと無限に時間を使って遊んでいる。最近はウマ娘だ。idは 939647895

いくつか習慣化に関する本を読んでいるがその中で取り入れて実行に移していったものを書いていく。

まだ始めたばかりのものがあるが、時間を置いた後どのくらい継続されているか楽しみだ。

悪癖をなくす

トイレに行く時にkindleを読む端末を持っていく

こういうのも何だが他人よりトイレが近く、日中行くことが多い。そのたびにスマホを持ち出すのだがついtwitterやらなんやらを開い無駄な時間を使ってしまっていた。

時間が空いているのが惜しくて、そこをtwitterで埋めようとしていた。

よく考えれば時間が空くのが惜しいならtwitterにする必要はない。読書タイムに当て、1Pでも読むようにしたほうが良い。

Androidエンジニアらしく端末はたくさんあるので、そのうちの一つはkindle専用機にし、トイレに行くときにはいつもの端末の代わりにその専用機を持つようにした。

この方法の良い点としては、今までの習慣である トイレに立つときにスマホを持っていく というのを変えなかった点である。後述するが普段使いの端末はリビングに置いているので、逆に手元にあるのはkindle専用機である。トイレに向かう時はこの手元の端末を持っていく。

慣れてきたのか、リビングで手元にいつもの端末があるときでも、トイレに立つときには専用機を持ってはいるようになってきている。

スマホをリビングに置く

少し集中力が途切れる・ビルドで待ちが発生するなど、スマホを触るチャンスは至るところに存在している。そして触ったが最後、集中力が復活したりビルドが終わるのより長い時間スマホを触ってしまうことになる。

触るチャンスがあるときにスマホを触れなくする、つまりリビングに置いておく、という単純な方法は思ったより効果的っぽい。

この戦略、環境が変わったことにより有効に働くようになったのかなぁと感じる。

ここでいう環境とは自分の部屋ではない場所に手軽に置けるようになった、ということである。 半年ほど前から2人暮らしを初めていて、自分の家の中にリビングという共同スペースが増えた。

共同スペースなの言ってしまえば公の場である。その意識だと、自分のパーソナルスペースを出てまで空いた時間を潰しに行くか?という気持ちになる。 ちょっと歩いてドアを開けるだけでは有るが、心理的障壁が大きくなっている。

例えば一人暮らしのときでも、同じような戦略としてドアを挟んだキッチンにスマホを置くということも出来ただろう。だがうまくいく自身が無い。 一人暮らしの時はキッチンでもパーソナルスペースの範囲内なので、そこに取りに行くのに心理的障壁はない。

実はタイムロッキングコンテナを持っているので スマホを触れなくする ことは前からできていた。 ただしタイムロッキングコンテナは少々扱いづらく、何時間ロックするか設定するのが面倒くさい。 またロックすべき時間を決めるのも面倒だ。 使える時間にきっちりロックを外せるように時間を計算するのも手がかかる。 GitHubなどで2段階認証が必要になったときに使えなくなるのも困る。

対して今の方法ならすこし歩いてリビングのテーブルに置くだけだ。スマホをテーブルに置くという僅かなコストの習慣で、辞めたい習慣を困難にしている。割と良い方法だと思っている。

GitlabのMRのStatusを変える

課題

GitlabへのMRをフックしてBitriseでCIを回した時、MRに対してCIの状態を更新したい。 公式のステップだとGitHubGitHub Status が存在するが、Gitlabは無いため。

解決

以下の curl コマンドを Script ステップに設定すると、Gitlabのpipelineに test という名前で running のJobができる。 target_url を指定しているため、このBitriseのビルドへのリンクも行われている。

curl --request POST --header "PRIVATE-TOKEN: <your_access_token>" "https://gitlab.example.com/api/v4/projects/17/statuses/$BITRISE_GIT_COMMIT?name=test&state=running&target_url=$BITRISE_BUILD_URL"

参照

利用可能な環境変数 | Bitrise DevCenter

Commits API | GitLab

jCenterクローズで影響が出るライブラリの一覧を出す

課題

今更ですが。

jfrog.com

jCenterクローズの影響調査として、jCenterにだけ上がっててmavenCentralにないライブラリを一覧で出したい。

解決方法

  1. build.gradleから buildscript.repositories に定義してある jcenter() を削除、定義していない場合は変わりに mavenCentral() を入れる
  2. ビルドを走らせエラーログをパースしライブラリ一覧を出す。
./gradlew --refresh-dependencies assemble test 2>&1 >/dev/null | grep "Could not resolve" | grep -v "all files for configuration" | sed 's/> Could not resolve //' | sed 's/ //g' | sort | uniq

スクロールしたらふわっと出るやつの実装

課題

LPとかによくある、スクロールされて画面に入ったらふわっと表示するアニメーションを実装したい。

実装

CSS+JS

tech-dig.jp

.slideup {
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: all 1s;
}
.slideup.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
function showElementAnimation() {
    element = document.getElementsByClassName('slideup');
    if (!element) return;

    var showTiming = window.innerHeight > 768 ? 200 : 80; // 要素が出てくるタイミングはここで調整
    var scrollY = window.pageYOffset; //スクロール量を取得
    var windowH = window.innerHeight; //ブラウザウィンドウのビューポート(viewport)の高さを取得

    for(var i=0;i<element.length;i++) { 
      var elemClientRect = element[i].getBoundingClientRect(); 
      var elemY = scrollY + elemClientRect.top; 
      if(scrollY + windowH - showTiming > elemY) {
        element[i].classList.add('is-show');
      } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
        element[i].classList.remove('is-show');
      }
    }
}

window.addEventListener('scroll', showElementAnimation)

要素ホバー時にホバーしたことがわかるようなアニメーションを入れたい

課題

よくある、要素ホバー時にホバーしたことがわかるようなアニメーションを入れたい 特に今回は - 色が薄くなる - 若干下に下る アニメーションを実装する。

実装

a:hover{
    opacity: 0.75;
    transition: all 0.25s ease;
    transform: translate(0px, 1px);
}