どっこと開発備忘録群

2023年7月14日金曜日

iOS UILabel／UITextField／UITextViewの違い

UILabel：AndroidのTextViewと同じ。テキストを表示するだけのView。
UITextField：singleLine限定のEditText。入力は一行のみ。
UITextView：AndroidのEditTextと同じ。入力は複数行。

2023年7月13日木曜日

iOS よくわからないエラー集「failed to get the task for proces」

Xcodeのプロジェクトで設定した証明書ファイル群にデバッグビルドによるビルドができるような設定になっていない。

参考

Xcode: failed to get the task for process

2023年7月12日水曜日

Android OnClickListener はXMLレイアウトファイルからでも設定できる

どうも。どっことです。今回はXML上でクリックリスナーを設定する実装方法について解説します。

XMLでクリックリスナーを設定する

dataBindingでは、XMLでクリックリスナーを設定する処理はよくある実装ですが、実はdataBindingを使わない通常のケースでも似たような実装をすることができます。

解説

XMLでクリックリスナーを設定するには、任意のViewに対して android:onClickを設定してあげます。たとえば、TextViewに設定するときは以下のような形です。

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="テスト"
   android:onClick="testClicked" />

あとはこのXMLを読み込むクラスに、testClicked(View v)関数を実装します。

override fun testClicked(v: View) {
  Log.d("TAG", "TextView テスト is clicked")
}

今回設定したonClickの値はtestClickedなのでそれに合わせていますが、実際に利用する際はTextViewがどんな表示をしているかなどを表現した関数名にしてあげると後々にコードを追いやすくなるかと思います。

まとめ

今回はXMLでクリックリスナーを設定する実装方法について解説しました。dataBindingでも似たような実装方法があると思いますが、そうでなくてもシンプルに利用することができるので、参考にしていただけると幸いです。

参考

Android Developer | View.onClick

2023年7月11日火曜日

Android ダークモードを実装するときの実装手順について解説

どうも。どっことです。今回はダークモード対応に関する実装について解説します。

ダークモードを実装する

アプリをいい感じに見せたいのであれば、ダークモード対応は今や必須の項目の一つではないでしょうか。ユーザへの見せ方をライト／ダークでそれぞれ管理する必要があるのは大変ですが、それ以上にユーザに好印象を与えることができるアプローチになります。今回はそんなダークモード対応をする時のアプローチ方法を解説します。

実装手順

必要最小限でダークモードを対応する場合、以下の手順になります。

ダークモードにした時にどのように見えるか確認
修正が必要な箇所について色指定を修正
ライト／ダークモードの切り替え動線を用意

順番に解説していきます。

ダークモードにした時にどのように見えるか確認

まずは以下をApplication#onCreate()で呼び出してみましょう。

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

これを呼び出すとアプリがダークモードで表示されます。この状態でアプリがどのように見えるか確認しましょう。

修正が必要な箇所について色指定を修正

テキストが背景と同色で見えなくなっているなど、残念な表示となっている箇所は適宜修正しましょう。values-nightフォルダを作ってそこにcolors.xmlを用意し、色指定を追加してください。このときvalues/colors.xmlでの定義とvalues-night/colors.xmlで定義するnameは同じものを指定してください。そうすれば、ライト／ダークの切り替え時にそれぞれの色指定を参照してくれます。逆に異なるものを指定すると、ビルド時に警告表示されるはずです。

ライト／ダークモードの切り替え導線を用意

あとはユーザがライト／ダークモード（＋端末の設定に従う設定）を切り替えられるよう、切り替えスイッチのような動線を用意しておきましょう。アプリ内に設定画面などがあれば、そちらに用意するのが適切かと思います。

切り替え時の処理

ユーザがスイッチなどで設定を変えた場合の処理が必要です。ユーザの切り替え設定に従い、テーマを更新します。また、設定した値はアプリ固有領域（例えばSharedPreferenceなど）に保持しておきましょう。以下はSharedPreferenceに保存した時のサンプルです。

/** 
 * ユーザが設定したテーマ。
 * AppCompatDelegate.MODE_NIGHT_YES, 
 * AppCompatDelegate.MODE_NIGHT_NO　など 
 **/
val value = AppCompatDelegate.MODE_NIGHT_YES
AppCompatDelegate.setDefaultNightMode(value)
getSharedPreferences("sample",  MODE_PRIVATE)
  .edit().putInt("theme_setting", value).apply()

アプリ起動時の処理

アプリを起動した時に、ユーザの設定に合わせてテーマを更新する必要があります。先ほど実装したApplication#onCreate()の実装を以下に変更してください。

val value = getSharedPreferences("sample", MODE_PRIVATE)
            .getInt("theme_setting", AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
AppCompatDelegate.setDefaultNightMode(value)

まとめ

今回は、アプリにダークモードを実装する時の実装手順について解説しました。ダークモードはユーザに良い印象を提供するためには必須の項目となっているので、今回の内容を参考にして是非対応してみてください。

参考

Androidアプリでダークテーマを実装する #Kotlin - Qiita

2023年7月5日水曜日

OutlookでリンクをクリックするとEdgeが開くんだが

以下の設定を更新する。

ファイル > オプション > 詳細設定 > リンク処理

2023年5月23日火曜日

CSS に追加するときのタグ／クラス／IDの指定方法

どうも。どっことです。今回はCSSを追加するときによく忘れるタグ／クラス／IDの指定方法について整理しました。

タグ指定によるカスタマイズ

タグ指定によるCSSはタグ名をそのまま書きます。つまり以下です。

/* bodyタグの指定*/
body {
 ...
}
/* h1クラスの指定 */
h1 {
 ...
}

クラス指定によるカスタマイズ

クラス指定によるCSSはピリオド「.」をつけて書きます。

/* hogeクラスの指定 */
.hoge {
 ...
}
/* fugaクラスの指定 */
.fuga {
 ...
}

また、タグ指定とクラス指定を組み合わせることができます。

/* hogeクラスが設定されているdivタグの指定 */
div.hoge {
 ...
}

/* hugaクラスが設定されているpタグの指定 */
p.fuga {
 ...
}

ID指定によるカスタマイズ

ID指定によるCSSはシャープ「＃」をつけて書きます。

/* ID:header */
#header {
 ...
}

/* ID:footer */
#footer {
 ...
}

また、ID指定も、タグ指定、クラス指定を組み合わせることができます。

/* ID:headerが指定されているdivタグ */
div#header {
 ...
}

/* new-articleクラス、ID:title 指定 */
.new-article#title {
 ...
}

/* divタグ、commentクラス、ID:title 指定 */
div.comment#title {
 ...
}

指定のタグ／クラス／ID内の要素に対してCSSを指定できます。

/* ID:headerが指定されている要素内のaタグ指定 */
#header a {
 ...
}

/* new-articleクラス内の div 指定 */
.new-article div {
 ...
}

参考

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

参考

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

2023年2月17日金曜日

SQL テーブルを内部／外部結合するSQL文を解説

アプリの中でデータベースを実装するとき、いくつかのテーブルを結合させてまとめて情報取得したい機会が多く出てきます。テーブルの結合にはいくつか種類がありますが、使用頻度が多いのは、内部／外部結合でしょうか。

今回は、頑張ってテーブルを設計していい感じに正規化したけど、いざ必要なデータを取ろうとしたときに内部結合／外部結合どう書けばいいんだっけ...という時のために、それぞれの書き方を備忘録として説明します。

内部結合の場合

SELECT * FROM table_a INNER JOIN table_b ON table_a.id = table_b.id

内部結合は、結合する際に結合条件に合致するもののみ一覧として出力される結合方法です。本当に必要なものだけ取得したい、という場合はこちらになると思います。

外部結合の場合

SELECT * FROM table_a LEFT JOIN table_b ON table_a.id = table_b.id

内部結合は合致するもののみ出力してくれる一方で、外部結合は結合する際に結合条件に合致しないものもNULLとして出力してくれる結合方法です。すべての項目を一覧として表示したいなどはこちらになると思います。結合には上記の左外部結合(LEFT OUTER JOIN)だけでなく右外部結合(RIGHT OUTER JOIN)もありますが、今回は省略します。（もしくは追記します。）

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年こそね。まずは自分が一番の利用者として使いたいアプリを作れればと思います。

登録: 投稿 (Atom)