どっこと開発備忘録群

2023年4月5日水曜日

CSS CSSでのコメントの書き方を紹介

CSSにコメントを書く場合は/** こんな感じ */ でコメントを書く。

参考

CSSのコメントアウト！見やすい書き方から使い方まで徹底解説

2023年4月3日月曜日

CSS 親要素を基準に位置を決めたい

親の領域を基準に特定の要素の位置を決める、AndroidでいうところのRelativeLayoutな位置調整をしたかったので実装方法を調べた。

親のスタイルに対して以下を設定する

position:relative

位置を決めたい要素のスタイルに対して以下を設定する

position:absolute

上記を設定したら、あとは特定の要素に対してleft,top,right,bottomを指定すればOK。特にやりたかった右下を指定する場合は以下。

right:0
bottom:0

参考

ボックス要素の右下端にボタンを配置する

2022年12月19日月曜日

2022年の振り返りと2023年への抱負

どうも。どっことです。

気がつけば2022年ももうすぐ終わりということで、開発者としての2022年の振り返りと来たる2023年への抱負なんて書かせてもらえればと思います。

2022年の振り返り

SimpleBookmarkについて

夏頃まではちょいちょい更新しました。しかし、これ以上の機能追加は利用者に対しての労力に見合わないなと思ったので、2022年の目標としていた大型アップデートはお蔵入りとなりました。また、今後もアップデートが入るか微妙です。

新規アプリ開発について

2022年の目標としてSimpleBookmarkに続いてさらに新しいアプリを公開することが目標となっていましたが、実現することができませんでした。アイディアはじゃんじゃか出てくるのですが、それを実現するための時間とエネルギーが全くもって足りませんでした。

技術ブログの更新

定期的に、とはいきませんでしたがAndroidやFlutterを中心に備忘録として技術ブログを更新しました。同じことを調べることが多いので、できる限り自分のブログにノウハウを集約させたいですね。

あとはDroidKaigiの登壇を視聴したときのメモ書きもブログページに載せました。DroidKaigiは毎年開催されるので、次回も気になるものは視聴＋投稿しようと思います。本当はオフラインで参加してみたいんですけどね。

その他

GitHubPage上で、Flutter for web によるウェブページを構築しました。

Flutter for web によるUIは非常にネイティブ感の強いUIで、普通のウェブページとは一味違った印象を持てる反面「なんとなくコレジャナイ感...」を感じることになりました。もともとはFlutterで良さげなものを作ってみようというところから始めたので当初の目的は達成できたものの、ウェブサイトを作るならやっぱりReactのほうが良いのかなと思いました。

2023年への抱負

ReactによるGitHubPageの更新

GitHubPageをさらにリニューアルしようと思います。Flutterとは毛色が全然違いますが、アーキテクチャを意識した設計がしやすそうですし、また別の面白さを得られればと思います。

新規アプリ開発

...2023年こそね。まずは自分が一番の利用者として使いたいアプリを作れればと思います。

2022年8月28日日曜日

ShellScript 引数を参照する実装について解説

どうも。どっことです。今回はシェルスクリプトの引数を参照する実装について解説します。

手作業が面倒なものをスクリプトで自動化して、ゆくゆくは「自分はボタンを押すだけ」なんて野望は誰しもが持つかと思いますが、まずはその第一歩（笑）として、シェルスクリプトの引数を参照してみましょう。

引数を参照する方法について解説

さっそくサンプルを載せます。 $(数字) の形でアクセスすることで、スクリプト名から各引数の値や文字列にアクセスすることができます。また、$#とすることで、引数の個数を取得することもできます。

#! /bin/bash

#スクリプト名を表示
echo "script=" $0 

#引数の個数を表示
echo "args=" $# 

#1つ目の引数を表示
echo "argv[0]=" $1 

#2つ目の引数を表示
echo "argv[1]=" $2

#渡された引数すべてを表示
echo "argv[]=" $@

わかってしまえば、簡単ですね。

2022年8月23日火曜日

Android seletorにcolorを設定するときの注意点

android:textColorに設定する場合は以下。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" android:color="#aaa" />
  <item android:state_selected="false" android:color="@android:color/transparent" />
</selector>

一方で android:background に設定する場合は以下。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" >
    <color android:color="#aaa" />
  </item>
  <item android:state_selected="false">
    <color android:color="@android:color/transparent" />
  </item>
</selector>

参考

Y.A.M の雑記帳: Android　selector の item タグの color の注意点

2022年8月3日水曜日

Android ディレクトリを作成する

どうも。どっことです。今回はアプリ固有のファイル領域にディレクトリを生成する実装方法を解説します。

さっそくですが、実装サンプルです。階層構造のあるディレクトリを生成するケースとして、階層ごとに生成するケースとまとめて生成するケースを紹介します。

ディレクトリ階層ごとにディレクトリを生成する

階層ごとに生成するケースを紹介します。最初にディレクトリを生成したあと、そのディレクトリを親ディレクトリとして指定する形で子ディレクトリを生成します。

val parent1 = File(requireContext().filesDir, "parent1")
// ディレクトリ(parent1)を作成する
parent1.mkdir()
val parent2 = File(parent1, "parent2")
// 作成したparent1ディレクトリを親にして、子ディレクトリ(parent2)を作成する
parent2.mkdir()

複数のディレクトリ階層があってもまとめて生成する

こちらはまとめて生成するケースです。ディレクトリ名の指定に親ディレクトリを含めることで、その親ディレクトリもまとめて生成してくれる。というわけです。唯一注意が必要なのは、ディレクトリを生成する関数が前のサンプルではmkdir()をつかっていましたが、今回はmkdirs()を使っている点でしょうか。

val parents = File(requireContext().filesDir, "parent1/parent2")
parents.mkdirs()

2022年6月18日土曜日

HTML/CSS 画面上の文字や画像を選択状態にできないようにするCSS設定を紹介

どうも。どっことです。今回はWebページ上の文字や画像を選択できないようにするCSSについて解説します。

テキストや画像が選択状態にできないようにする

テキストにクリックリスナーを設定した際、そのテキストが選択状態になってしまい、シンプルにダサいです。今回はそんな経緯から、テキストや画像が選択状態にできない設定を紹介します。

設定方法

設定はシンプルで、該当のテキスト・画像のタグに以下を設定します。

user-select: none;

例えば画像に設定する場合はimgタグなので以下となります。

img { 
    user-select: none;
}

簡単ですが、以上です。

参考

画面上の文字や画像を選択できないようにする at softelメモ

2022年6月17日金曜日

Dart コンストラクタについて整理

サンプル1 finalなメンバ変数無し

class Sample {
  Sample();
}

サンプル2 finalなメンバ変数あり

class Sample {
  final String value;
  Sample(this.value);
}

Sampleクラスを使う側が value の値を設定しなければならない。

サンプル3 finalなメンバ変数あり + 初期値あり

class Sample {
  final String value;
  Sample({this.value = "initial string"});
}

Sampleクラスを使う側は value の値を設定する必要はない。
設定しなければ初期値の値が設定される。

サンプル4 finalなメンバ変数あり + Nullable

class Sample {
  final String? value;
  Sample({this.value});
}

Sampleクラスを使う側は value の値を設定する必要はない。
設定しなければnullが設定される。

2022年3月22日火曜日

Flutter ダイアログを表示する実装方法を解説

何も考えないなら以下をコピペして呼び出す。　

static void showDialog(BuildContext context, String title, String content, String positiveButton, String negative,
      {VoidCallback? onPositiveButtonPressed, VoidCallback? onNegativeButtonPressed}) {
      showDialog<int>(
        context: context,
        barrierDismissible: true, // キャンセル
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text(title),
              content: Text(content),
              actions: [
                TextButton(child: Text(positiveButton), onPressed: onPositiveButtonPressed),
                TextButton(child: Text(negative), onPressed: onNegativeButtonPressed)
              ]);
        });
}

2021年5月10日月曜日

Android AdMob、FirebaseとEUユーザからの同意の取得について

経緯

AdMobとFirebase あたりから読み進めたので整理。

AdMobについて

さまざまなフォーマットオプションで広告を表示することができる。

バナー
インタースティシャル
ネイティブ
リワード

広告を表示するためには、Google Mobile Ads SDK を統合するための AdMob 登録アプリが必要。要はアプリをAdMobに登録してねってことかな。

実装の流れ

Firebaseにアプリを登録
AdMobアカウントを作成

アプリを登録
ユーザに関する指標を有効にする
AdMobアプリをFirebaseにリンクする

プロジェクト依存関係の更新

Google Mobile Ads SDK を追加

広告の実装

まあ、これといって難しそうなところはなさそう。

Androidスタートガイド

AdMobアカウントでアプリを設定する

アカウントを作成
アプリを登録

アプリをFirebaseにリンクする

強く推奨らしい。AdMobアカウントのダッシュボードページで以下を設定する。

ユーザに関する指標を有効化
アプリをFirebaseにリンク

ここからは具体的な実装の話

アプリIDをAndroidManifest.xmlに追加
Mobile Ads SDK をbuild.gradle追加

MobileAds.initialize()をコールし初期化 (★気になる一文あり)

ユーザに関する指標とアナリティクスデータ

Mobile Ads SDK で初期化するとロギングが開始されるので、ちゃんと初期化できているか確認してね。と読み取れる。

(省略可)GoogleAnalyticsやFirebaseの機能を使用

色々機能を使って、ユーザの利用数(エンゲージメント)を増やしてね。と読み取れる。

アプリに実装する広告フォーマットの選択

アプリに合わせて実装する広告のフォーマットを選択する。

(★気になる一文あり)に以下の文言が。

広告を読み込む前になんらかの操作を行う必要がある場合は、必ず Mobile Ads SDKを初期化する前に行ってください。初期化の前に必要なアクションの例を次に示します。

欧州経済領域（EEA）のユーザーから同意を得る

ヨーロッパって広告を出す前にユーザから同意を得ないといけないらしい。マジか。そういえば、どこかのサイトにアクセスするたびに「Cookie使うで？ええか？」という警告が出るようになったけど、あれってこれのせいか。スタートガイドとはいえ、こういうアナウンスをしてくれるのは優しいな。

EU ユーザーからの同意の取得

EUユーザに対しては以下のケースで同意を得る必要がある。

Cookieやローカルストレージの利用
広告配信を目的とした個人データ(AdIDなど)の利用

Googleではこの義務の遂行をサポートするためのConsent SDKを提供している。（実装が楽できる！うれしい！）Googleが配信する広告は「パーソナライズされている・いない」の２種類がある。

デフォルトは「されている」。「されていない」に変更することも可能。
EUユーザに対してはどちらを利用するにしても同意が必要。

詳細

前提としてAdMobアカウント上で、広告技術プロバイダを選択しておく必要がある。

build.gradleにConsent SDKを追加する
Consent SDKを使うときは、必ず事前に同意ステータスを更新しておく。

同意ステータスは、ユーザが同意しているかどうか。
「同意ステータスを更新する」は「同意ステータスを把握する」と読み取れる。

SDKに同意ステータスのアップデートをリクエストするAPIがあって、アプリを起動するときにそれをコールする。

ユーザが同意した後に、広告技術プロバイダが変わると、同意ステータスが取得できていない状態(不明ステータス)になる。

メディエーションを利用しない場合・する場合について

よくわからないメディエーションなるキーワードが出てきた。このへんによると、第三者広告ネットワーク？を使って収益向上を図る仕組みらしい。今度は第三者広告ネットワークが何者か分からないけど、このへんによると「収益性が良さげな広告を選んでくれる広告マネージャー」のことを指しているように見える。

収益性が良さげな広告選んでくれるならええやん！ってなりそう

メディエーションを利用しない場合

Consent SDKで同意を得る実装方針は２つ

Google提供の同意フォームを掲示する

このフォームには開発者が選択した広告技術プロバイダのリストが表示される

すべての広告技術プロバイダのリストをAdMobから動的に取得し、開発者自身がそれらをユーザに掲示するための実装を行う。

こだわりがある人はこちら、という印象。

ユーザが回答したら、その回答情報をSDKに保存するように指示できる

これが完了したらGoogle Mobile Ads SDKに回答(同意)を送信できるようになる。

パーソナライズされていない広告に限って同意した場合は、それをGoogle Mobile Ads SDKで送信する必要がある。

結局どちらの広告であってもSDKに送信が必要と読み取れる。

AdMobメディエーションを利用する場合

すべての広告技術プロバイダのリストをAdMobから動的に取得し、開発者自身がそれらをユーザに掲示するための実装を行う必要がある。Googleではメディエーションネットワークに関する同意の取得も処理もできない。

ただし一部のメディエーションネットワークに対する同意の転送方法についてのドキュメントは公開されているとのこと。
何にせよ、便利なSDKがないならあまりやりたくない。

同意ステータスの更新

アプリ起動時に毎回実施する必要があるとのこと。具体的な同意ステータスの更新処理の実装方法は以下の通り。

同意の取得

Google提供の同意フォームの実装方法。以下のオプションを組み合わせてユーザに掲示できる。

パーソナライズ広告表示に同意
パーソナライズされていない広告表示に同意
広告表示しない有料版を利用

同意テキストを更新する場合はconsentform.htmlの内容を変更する。

ConsentFormオブジェクトを使って同意フォームを表示する。

プライバシーポリシーが必要！！

同意を取得したら、同意の保存し情報を送信する。

同意の変更や取り消し

過去の同意を変更したり、取り消すことができる必要がある。

同意年齢に満たないユーザ

すべての広告リクエストにTFUAを設定する必要がある。

どうやって検知するんだろう。。。

テスト

EU内外の両方でアプリを簡単にテストできるように、Consent SDKにはデバッグオプションが用意されている。

Google Mobile Ads SDK に同意の転送

パーソナライズされていない広告を同意したケースの転送実装

所感

AdMobメディエーションを利用すると色々大変そう。とりあえず利用しない方針で問題なさそう。
プライバシーポリシーのページを用意する必要がある。
同意を変更する導線が必要。