<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SharedPreferences</title>
	<atom:link href="https://techgrowup.net/tag/sharedpreferences/feed/" rel="self" type="application/rss+xml" />
	<link>https://techgrowup.net</link>
	<description>エンジニアを強くする</description>
	<lastBuildDate>Tue, 29 Oct 2024 11:25:36 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://techgrowup.net/wp-content/uploads/2021/05/hp-icon-150x150.png</url>
	<title>SharedPreferences</title>
	<link>https://techgrowup.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Flutter開発入門28 Flutterでshared_preferencesを使ったデータの永続化方法</title>
		<link>https://techgrowup.net/flutter-shared-preferences/</link>
					<comments>https://techgrowup.net/flutter-shared-preferences/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[techgrowup]]></dc:creator>
		<pubDate>Sat, 21 Sep 2024 03:06:08 +0000</pubDate>
				<category><![CDATA[Flutter]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[Dart]]></category>
		<category><![CDATA[DB]]></category>
		<category><![CDATA[SharedPreferences]]></category>
		<category><![CDATA[アプリ開発]]></category>
		<guid isPermaLink="false">https://techgrowup.net/?p=1851</guid>

					<description><![CDATA[はじめに 　Flutterで一時的なデータを保存・管理したいとき、**shared_preferences**は便利なライブラリです。小規模なデータを永続化し、アプリの再起動後でも簡単にアクセスできるため、設定情報やユー [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h1 class="wp-block-heading">はじめに</h1>



<p class="wp-block-paragraph">　Flutterで一時的なデータを保存・管理したいとき、**<code>shared_preferences</code>**は便利なライブラリです。小規模なデータを永続化し、アプリの再起動後でも簡単にアクセスできるため、設定情報やユーザープリファレンスなどを保存するのに最適です。本記事では、<code>shared_preferences</code>を使用してデータの保存・読み取りを行う方法を具体例を交えて説明します。初めての方でもわかりやすく、手順を丁寧に解説しますので、Flutterでのデータ保存の基礎を学んでいきましょう。</p>



<h2 class="wp-block-heading"><code>shared_preferences</code>とは</h2>



<p class="wp-block-paragraph">　<code>shared_preferences</code>は、Flutterでローカルデータを永続化するためのライブラリです。このパッケージを使うことで、プリミティブなデータ（数値、文字列、ブール値、リストなど）をキー・バリュー形式で簡単に保存・読み込みできます。これは、アプリの設定情報やユーザーの好み（テーマ、ログイン状態など）を保存する際に非常に便利です。</p>



<h3 class="wp-block-heading">主な特徴</h3>



<ul class="wp-block-list">
<li>データは<strong>非同期</strong>で読み書きできる。</li>



<li><strong>プリミティブデータ型</strong>の保存が可能（文字列、整数、ブール値など）。</li>



<li>小規模なデータの保存・永続化に最適。</li>
</ul>



<h2 class="wp-block-heading"><code>shared_preferences</code>のセットアップ</h2>



<h3 class="wp-block-heading"><code>pubspec.yaml</code>に依存関係を追加</h3>



<p class="wp-block-paragraph">　まず、<code>shared_preferences</code>パッケージをプロジェクトに追加する必要があります。プロジェクトの<code>pubspec.yaml</code>ファイルに以下を追加してください。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.15" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">dependencies</span><span style="color: #D4D4D4">:</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">flutter</span><span style="color: #D4D4D4">:</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">sdk</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">flutter</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">shared_preferences</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">^2.0.15</span></span></code></pre></div>



<p class="wp-block-paragraph">その後、以下のコマンドでパッケージをインストールします。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="flutter pub get" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">flutter</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">pub</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">get</span></span></code></pre></div>



<h3 class="wp-block-heading">パッケージをインポート</h3>



<p class="wp-block-paragraph">　Dartファイルに<code>shared_preferences</code>をインポートして、すぐに使えるようにします。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="import 'package:shared_preferences/shared_preferences.dart';" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:shared_preferences/shared_preferences.dart&#39;</span><span style="color: #D4D4D4">;</span></span></code></pre></div>



<h2 class="wp-block-heading">データの保存方法</h2>



<p class="wp-block-paragraph">　次に、実際にデータを保存する方法を見ていきましょう。<code>shared_preferences</code>は非同期処理を使うので、<code>async</code>と<code>await</code>を使ってデータを保存します。</p>



<h3 class="wp-block-heading">ユーザー名を保存する</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Future&lt;void&gt; saveUserName(String name) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('username', name);
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">saveUserName</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4"> name) </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> prefs = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SharedPreferences</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">getInstance</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> prefs.</span><span style="color: #DCDCAA">setString</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;username&#39;</span><span style="color: #D4D4D4">, name);</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">　この例では、<code>setString</code>を使って文字列データ（<code>username</code>）を保存しています。<code>SharedPreferences.getInstance()</code>を使って、共有プリファレンスにアクセスし、<code>username</code>というキーでユーザー名を保存しています。</p>



<h4 class="wp-block-heading">保存できるデータの種類</h4>



<ul class="wp-block-list">
<li><code>setString(key, value)</code>：文字列を保存</li>



<li><code>setInt(key, value)</code>：整数を保存</li>



<li><code>setBool(key, value)</code>：ブール値を保存</li>



<li><code>setDouble(key, value)</code>：小数点の数値を保存</li>



<li><code>setStringList(key, value)</code>：文字列のリストを保存</li>
</ul>



<h2 class="wp-block-heading">データの読み取り方法</h2>



<p class="wp-block-paragraph">　保存したデータを読み取る際も、非同期処理を使います。保存時に使用したキーを使ってデータを取得します。</p>



<h3 class="wp-block-heading">ユーザー名を読み取る</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Future&lt;String?&gt; getUserName() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('username');
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4">?&gt; </span><span style="color: #DCDCAA">getUserName</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> prefs = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SharedPreferences</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">getInstance</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> prefs.</span><span style="color: #DCDCAA">getString</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;username&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">　このコードでは、<code>getString</code>を使って文字列データを読み取っています。キーが存在しない場合は<code>null</code>が返されます。</p>



<h4 class="wp-block-heading">読み取れるデータの種類</h4>



<ul class="wp-block-list">
<li><code>getString(key)</code>：文字列を読み取る</li>



<li><code>getInt(key)</code>：整数を読み取る</li>



<li><code>getBool(key)</code>：ブール値を読み取る</li>



<li><code>getDouble(key)</code>：小数点の数値を読み取る</li>



<li><code>getStringList(key)</code>：文字列のリストを読み取る</li>
</ul>



<h2 class="wp-block-heading">データの削除</h2>



<p class="wp-block-paragraph">　<code>shared_preferences</code>から特定のデータを削除する場合、<code>remove()</code>メソッドを使用します。また、すべてのデータをクリアするためには、<code>clear()</code>メソッドを使用します。</p>



<h3 class="wp-block-heading">特定のデータを削除</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Future&lt;void&gt; removeUserName() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.remove('username');
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">removeUserName</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> prefs = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SharedPreferences</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">getInstance</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> prefs.</span><span style="color: #DCDCAA">remove</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;username&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<h3 class="wp-block-heading">全てのデータを削除</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Future&lt;void&gt; clearAllPreferences() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.clear();
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">clearAllPreferences</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> prefs = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SharedPreferences</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">getInstance</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> prefs.</span><span style="color: #DCDCAA">clear</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">　このコードでは、全ての保存データを削除します。</p>



<h2 class="wp-block-heading">UIと連携した実装例</h2>



<p class="wp-block-paragraph">　ここでは、<code>shared_preferences</code>を使ってテーマの選択（ライトモード/ダークモード）を保存し、アプリを再起動してもその設定が保持されるシンプルな例を紹介します。</p>



<h3 class="wp-block-heading">テーマ設定を保存・読み取るアプリ</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() =&gt; _MyAppState();
}

class _MyAppState extends State&lt;MyApp&gt; {
  ThemeMode _themeMode = ThemeMode.light;

  @override
  void initState() {
    super.initState();
    _loadThemePreference();
  }

  Future&lt;void&gt; _loadThemePreference() async {
    final prefs = await SharedPreferences.getInstance();
    final isDarkMode = prefs.getBool('isDarkMode') ?? false;
    setState(() {
      _themeMode = isDarkMode ? ThemeMode.dark : ThemeMode.light;
    });
  }

  Future&lt;void&gt; _toggleTheme(bool isDark) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isDarkMode', isDark);
    setState(() {
      _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: _themeMode,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shared Preferences Example'),
        ),
        body: Center(
          child: SwitchListTile(
            title: Text('ダークモード'),
            value: _themeMode == ThemeMode.dark,
            onChanged: (bool value) {
              _toggleTheme(value);
            },
          ),
        ),
      ),
    );
  }
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:flutter/material.dart&#39;</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:shared_preferences/shared_preferences.dart&#39;</span><span style="color: #D4D4D4">;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">main</span><span style="color: #D4D4D4">() {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">runApp</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">MyApp</span><span style="color: #D4D4D4">());</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">MyApp</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">extends</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">StatefulWidget</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">@override</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">_MyAppState</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">createState</span><span style="color: #D4D4D4">() =&gt; </span><span style="color: #4EC9B0">_MyAppState</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">_MyAppState</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">extends</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">State</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">MyApp</span><span style="color: #D4D4D4">&gt; {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4"> _themeMode = </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4">.light;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">@override</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">initState</span><span style="color: #D4D4D4">() {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">super</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">initState</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">_loadThemePreference</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">_loadThemePreference</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> prefs = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SharedPreferences</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">getInstance</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> isDarkMode = prefs.</span><span style="color: #DCDCAA">getBool</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;isDarkMode&#39;</span><span style="color: #D4D4D4">) ?? </span><span style="color: #569CD6">false</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">setState</span><span style="color: #D4D4D4">(() {</span></span>
<span class="line"><span style="color: #D4D4D4">      _themeMode = isDarkMode ? </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4">.dark : </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4">.light;</span></span>
<span class="line"><span style="color: #D4D4D4">    });</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">_toggleTheme</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">bool</span><span style="color: #D4D4D4"> isDark) </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> prefs = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SharedPreferences</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">getInstance</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> prefs.</span><span style="color: #DCDCAA">setBool</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;isDarkMode&#39;</span><span style="color: #D4D4D4">, isDark);</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">setState</span><span style="color: #D4D4D4">(() {</span></span>
<span class="line"><span style="color: #D4D4D4">      _themeMode = isDark ? </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4">.dark : </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4">.light;</span></span>
<span class="line"><span style="color: #D4D4D4">    });</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">@override</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #4EC9B0">Widget</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">build</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">BuildContext</span><span style="color: #D4D4D4"> context) {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">MaterialApp</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">      themeMode: _themeMode,</span></span>
<span class="line"><span style="color: #D4D4D4">      theme: </span><span style="color: #4EC9B0">ThemeData</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">light</span><span style="color: #D4D4D4">(),</span></span>
<span class="line"><span style="color: #D4D4D4">      darkTheme: </span><span style="color: #4EC9B0">ThemeData</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">dark</span><span style="color: #D4D4D4">(),</span></span>
<span class="line"><span style="color: #D4D4D4">      home: </span><span style="color: #4EC9B0">Scaffold</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">        appBar: </span><span style="color: #4EC9B0">AppBar</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">          title: </span><span style="color: #4EC9B0">Text</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Shared Preferences Example&#39;</span><span style="color: #D4D4D4">),</span></span>
<span class="line"><span style="color: #D4D4D4">        ),</span></span>
<span class="line"><span style="color: #D4D4D4">        body: </span><span style="color: #4EC9B0">Center</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">          child: </span><span style="color: #4EC9B0">SwitchListTile</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">            title: </span><span style="color: #4EC9B0">Text</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;ダークモード&#39;</span><span style="color: #D4D4D4">),</span></span>
<span class="line"><span style="color: #D4D4D4">            value: _themeMode == </span><span style="color: #4EC9B0">ThemeMode</span><span style="color: #D4D4D4">.dark,</span></span>
<span class="line"><span style="color: #D4D4D4">            onChanged: (</span><span style="color: #4EC9B0">bool</span><span style="color: #D4D4D4"> value) {</span></span>
<span class="line"><span style="color: #D4D4D4">              </span><span style="color: #DCDCAA">_toggleTheme</span><span style="color: #D4D4D4">(value);</span></span>
<span class="line"><span style="color: #D4D4D4">            },</span></span>
<span class="line"><span style="color: #D4D4D4">          ),</span></span>
<span class="line"><span style="color: #D4D4D4">        ),</span></span>
<span class="line"><span style="color: #D4D4D4">      ),</span></span>
<span class="line"><span style="color: #D4D4D4">    );</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">　このアプリでは、ユーザーがスイッチを切り替えることで、テーマモード（ライト/ダーク）を変更でき、その設定が<code>shared_preferences</code>に保存されます。アプリを再起動しても、選択されたテーマが保持されます。</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="flutter shared prefs video" width="1256" height="707" src="https://www.youtube.com/embed/1Tii0mePuks?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading">まとめ</h2>



<p class="wp-block-paragraph">　<code>shared_preferences</code>を使うことで、簡単にデータをローカルストレージに保存し、アプリが再起動した後もデータを保持することができます。今回は基本的なデータの保存・読み取り・削除の方法と、UIと連携したテーマ設定の例を紹介しました。ユーザーの設定や小規模なデータを保存する際にとても便利なライブラリですので、ぜひ自分のアプリで活用してみてください。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://techgrowup.net/flutter-shared-preferences/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【Androidアプリ開発】タブで画面を切り替えるアプリの実装</title>
		<link>https://techgrowup.net/android-fragment-tabapp/</link>
					<comments>https://techgrowup.net/android-fragment-tabapp/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[techgrowup]]></dc:creator>
		<pubDate>Sat, 08 May 2021 05:10:20 +0000</pubDate>
				<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[Androidアプリ開発]]></category>
		<category><![CDATA[BottomNavigationView]]></category>
		<category><![CDATA[SharedPreferences]]></category>
		<category><![CDATA[Webview]]></category>
		<guid isPermaLink="false">https://techgrowup.net/?p=380</guid>

					<description><![CDATA[はじめに 　本記事では、BottomNavigationViewを利用してタブを実装し、タブごとのページをFragmentを利用して実装します。　※説明をみながらソースコードを見たいという方がいれば、下記Githubから [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h1 class="wp-block-heading">はじめに</h1>



<p class="wp-block-paragraph">　本記事では、BottomNavigationViewを利用してタブを実装し、タブごとのページをFragmentを利用して実装します。<br>　※説明をみながらソースコードを見たいという方がいれば、下記Githubからソースをダウンロードしてください</p>




<a rel="noopener" target="_blank" href="https://github.com/daichi-mizuno-tech/BottomNavigationApp" title="Build software better, together" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img fetchpriority="high" decoding="async" src="https://techgrowup.net/wp-content/uploads/cocoon-resources/blog-card-cache/f543dc43b7b380979be974b14c3fd120.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Build software better, together</div><div class="blogcard-snippet external-blogcard-snippet">GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<p class="wp-block-paragraph"></p>



<h2 class="wp-block-heading">タブアプリについて</h2>



<h3 class="wp-block-heading">最終的なゴール</h3>



<p class="wp-block-paragraph">　今回作るものは下記のような動画のアプリケーションになります。シンプルですが、<span class="marker-under">タブを配置し、タブの切替、Webページ、Webページの設定などをFragment間で切り替えられる仕様</span>になっています。</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Androidアプリ開発 BottomNavigaitonViewとFragmentを利用したタブアプリケーション" width="1256" height="942" src="https://www.youtube.com/embed/NWYunr40AL4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h3 class="wp-block-heading">アプリのUI構成</h3>



<p class="wp-block-paragraph">　アプリのUI構成については、画面下部にタブを2つ配置し、それぞれ「ホーム」「設定」というタブを作りたいと思います。<br>　また、それぞれのタブを押すとFragmentが切り替わり、「ホーム」タブでは本サイトの記事が表示されるWebViewを使い、「設定」画面ではWebviewの設定を変更できるようにします<span class="marker-under">。ホーム画面と設定画面のデータのやりとりはSharedPreferencesというクラス</span>を利用して受け渡しています。</p>



<p class="wp-block-paragraph"></p>



<h2 class="wp-block-heading">利用するライブラリ(クラス)の説明</h2>



<h3 class="wp-block-heading">Webview</h3>



<p class="wp-block-paragraph">　<span class="marker-under"><a rel="noopener" target="_blank" href="https://developer.android.com/reference/android/webkit/WebView" data-type="URL">WebView<span class="fa fa-external-link external-icon anchor-icon"></span></a>とはViewというクラスの拡張で、ウェブページを表示するためのもの</span>です。通常みなさんがウェブページを開くときは、SafariやChromeなどのブラウザを利用すると思いますが、自分のアプリなのに毎回ユーザーにChromeなどを開かせると、利便性が悪くなってしまいます。<br>　そこで<span class="marker-under">WebViewをアプリ内に組み込むことで、自分のアプリ内でウェブページを開くことができます</span>。Chromeのようにブックマーク、ナビゲーション、アドレスバー等はないためシンプルなものにはなりますが、とても使いやすいです。</p>



<h3 class="wp-block-heading">BottomNavigationView</h3>



<p class="wp-block-paragraph">　<span class="marker-under"><a rel="noopener" target="_blank" href="https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView">BottomNavigationView<span class="fa fa-external-link external-icon anchor-icon"></span></a>とは画面下部にボタンを配置し、ナビゲーションを実装するためのクラス</span>で、ユーザーが画面を切り替えるために利用されています。<br>　このBottomNavigationViewを利用すると、タブ切り替えの実装やボタンの配置などを自由に簡単にカスタマイズできたり、Fragmentとの相性がいいためコンポーネント単位で実装が用意になります。</p>



<p class="wp-block-paragraph"></p>



<h3 class="wp-block-heading"><em>SharedPreferences</em></h3>



<p class="wp-block-paragraph">　<span class="marker-under"><a rel="noopener" target="_blank" href="https://developer.android.com/reference/android/content/SharedPreferences">SharedPreferences<span class="fa fa-external-link external-icon anchor-icon"></span></a>はアプリ内のデータを追加/保存/修正/削除などをxml形式で簡単に保存できるようにしたクラス</span>です。通常データを保存する際にはAndroidのSQLiteというDBを使うこともありますが、データ量が少ないのであればDBを作るのは高機能すぎるため、大きなデータを扱わない限りは、SharedPreferencesで十分と言えます。<br>　余談ですが、<span class="marker-under">Androidアプリではデータを保存するためにxml以外にもjsonファイルなどもよく利用され</span>ます。</p>



<p class="wp-block-paragraph"></p>



<h2 class="wp-block-heading">アプリの実装</h2>



<h3 class="wp-block-heading">実装の流れを考える</h3>



<p class="wp-block-paragraph">　<span class="bold-red">アプリを開発するときは、どのような流れで実装を行っていくか考えましょう</span>。今回の場合だとタブを切り替えて各画面を表示し、Webview画面と設定画面の中身が表示されるという流れになりますので、流れとしては下記で行っていきます。</p>



<ol class="wp-block-list">
<li>BottomNavigationViewでタブの実装</li>



<li>タブを押した時に表示するFragment(ホームと設定）の実装</li>



<li>ホーム画面のWebviewの実装</li>



<li>設定画面の設定項目の実装</li>



<li>設定を保存するためのSharedPreferencesの実装</li>



<li>細かい部分の調整</li>
</ol>



<p class="wp-block-paragraph">　また、ここからは流れに沿ってソースコードを記載しますが、ソースコードを記述する場所や関数名、レイアウトの中身などは細かく説明しませんので、少しずつ自分で調整してみてください。</p>



<h3 class="wp-block-heading">1.BottomNavigationViewでタブの実装</h3>



<p class="wp-block-paragraph">　まずBottomNavigationViewを利用するためにタブを作成するための/resフォルダの下に、<strong>/menu/my_nav_item.xml</strong>を作成します。これをBottomNavigationViewにつけることで、タブが作成できます。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
<menu xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
    <item android:id=&quot;@+id/action_home&quot;
        android:title=&quot;ホーム&quot;
        android:icon=&quot;@drawable/ic_baseline_home_24&quot; /&gt;
    <item android:id=&quot;@+id/action_setting&quot;
        android:title=&quot;設定&quot;
        android:icon=&quot;@drawable/ic_baseline_settings_24&quot; /&gt;
</menu&gt;" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #808080">&lt;?</span><span style="color: #569CD6">xml</span><span style="color: #9CDCFE"> version</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;1.0&quot;</span><span style="color: #9CDCFE"> encoding</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;utf-8&quot;</span><span style="color: #808080">?&gt;</span></span>
<span class="line"><span style="color: #808080">&lt;</span><span style="color: #569CD6">menu</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">xmlns:android</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;http://schemas.android.com/apk/res/android&quot;</span><span style="color: #808080">&gt;</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">item</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">android:id</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;@+id/action_home&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #9CDCFE">android:title</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;ホーム&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #9CDCFE">android:icon</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;@drawable/ic_baseline_home_24&quot;</span><span style="color: #D4D4D4"> </span><span style="color: #808080">/&gt;</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">item</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">android:id</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;@+id/action_setting&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #9CDCFE">android:title</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;設定&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #9CDCFE">android:icon</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;@drawable/ic_baseline_settings_24&quot;</span><span style="color: #D4D4D4"> </span><span style="color: #808080">/&gt;</span></span>
<span class="line"><span style="color: #808080">&lt;/</span><span style="color: #569CD6">menu</span><span style="color: #808080">&gt;</span></span></code></pre></div>



<p class="wp-block-paragraph">　次にmain_activity.xmlのレイアウトにBottomNavigationViewを下位置に配置します。そして、<span class="marker-under">MainActivity.ktにBottomNavigationView.OnNavigatiojnItemSelectedListenerを継承させ、タブが押されたときのコールバック関数を定義</span>します。<br> 　続いて、レイアウトに配置したBottomNavigationViewをfindViewByIdで参照し、onNavigationItemSelectedを加えます。最後にonNavigationItemSelectedのコールバック関数内で各タブ(アイテム）が選択された時にFragmentを参照するような処理にします。参照するときのレイアウトはFrameLayoutを使ってcontainerというidを使っています。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="class MainActivity : AppCompatActivity() ,BottomNavigationView.OnNavigationItemSelectedListener{


	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_main)

		initializeResource()
	}

	fun initializeResource(){
//		BottomNavigationViewを設定
		val bottomNavigationView = findViewById<BottomNavigationView&gt;(R.id.bottom_navigation_view)
		bottomNavigationView.setOnNavigationItemSelectedListener(this)
		bottomNavigationView.itemIconSize = 70
		bottomNavigationView.scaleX = 1.2f
		bottomNavigationView.scaleY = 1.2f

	}

	override fun onNavigationItemSelected(item: MenuItem): Boolean {
		Log.d(TAG,&quot;Selected item: &quot; + item)

		when(item.itemId){
//			ホームボタンが押された時
			R.id.action_home -&gt; {
				supportFragmentManager.beginTransaction()
						.replace(R.id.container,HomeFragment())
						.setReorderingAllowed(true)
						.commit()
			}
//			設定ボタンが押された時
			R.id.action_setting -&gt; {
				supportFragmentManager.beginTransaction()
						.replace(R.id.container,SettingFragment())
						.setReorderingAllowed(true)
						.commit()
			}

		}

		return true
	}

	companion object{
		const val TAG : String = &quot;MainActivity&quot;
	}
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">MainActivity</span><span style="color: #D4D4D4"> : </span><span style="color: #4EC9B0">AppCompatActivity</span><span style="color: #D4D4D4">() ,BottomNavigationView.</span><span style="color: #DCDCAA">OnNavigationItemSelectedListener</span><span style="color: #D4D4D4">{</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">override</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">onCreate</span><span style="color: #D4D4D4">(savedInstanceState: </span><span style="color: #4EC9B0">Bundle</span><span style="color: #D4D4D4">?) {</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">super</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">onCreate</span><span style="color: #D4D4D4">(savedInstanceState)</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #DCDCAA">setContentView</span><span style="color: #D4D4D4">(R.layout.activity_main)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #DCDCAA">initializeResource</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">initializeResource</span><span style="color: #D4D4D4">(){</span></span>
<span class="line"><span style="color: #6A9955">//		BottomNavigationViewを設定</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> bottomNavigationView = </span><span style="color: #DCDCAA">findViewById</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">BottomNavigationView</span><span style="color: #D4D4D4">&gt;(R.id.bottom_navigation_view)</span></span>
<span class="line"><span style="color: #D4D4D4">		bottomNavigationView.</span><span style="color: #DCDCAA">setOnNavigationItemSelectedListener</span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">this</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">		bottomNavigationView.itemIconSize = </span><span style="color: #B5CEA8">70</span></span>
<span class="line"><span style="color: #D4D4D4">		bottomNavigationView.scaleX = </span><span style="color: #B5CEA8">1.2f</span></span>
<span class="line"><span style="color: #D4D4D4">		bottomNavigationView.scaleY = </span><span style="color: #B5CEA8">1.2f</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">override</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">onNavigationItemSelected</span><span style="color: #D4D4D4">(item: </span><span style="color: #4EC9B0">MenuItem</span><span style="color: #D4D4D4">): </span><span style="color: #4EC9B0">Boolean</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">		Log.</span><span style="color: #DCDCAA">d</span><span style="color: #D4D4D4">(TAG,</span><span style="color: #CE9178">&quot;Selected item: &quot;</span><span style="color: #D4D4D4"> + item)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #C586C0">when</span><span style="color: #D4D4D4">(item.itemId){</span></span>
<span class="line"><span style="color: #6A9955">//			ホームボタンが押された時</span></span>
<span class="line"><span style="color: #D4D4D4">			R.id.action_home </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">				supportFragmentManager.</span><span style="color: #DCDCAA">beginTransaction</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">						.</span><span style="color: #DCDCAA">replace</span><span style="color: #D4D4D4">(R.id.container,</span><span style="color: #DCDCAA">HomeFragment</span><span style="color: #D4D4D4">())</span></span>
<span class="line"><span style="color: #D4D4D4">						.</span><span style="color: #DCDCAA">setReorderingAllowed</span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">true</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">						.</span><span style="color: #DCDCAA">commit</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">			}</span></span>
<span class="line"><span style="color: #6A9955">//			設定ボタンが押された時</span></span>
<span class="line"><span style="color: #D4D4D4">			R.id.action_setting </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">				supportFragmentManager.</span><span style="color: #DCDCAA">beginTransaction</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">						.</span><span style="color: #DCDCAA">replace</span><span style="color: #D4D4D4">(R.id.container,</span><span style="color: #DCDCAA">SettingFragment</span><span style="color: #D4D4D4">())</span></span>
<span class="line"><span style="color: #D4D4D4">						.</span><span style="color: #DCDCAA">setReorderingAllowed</span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">true</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">						.</span><span style="color: #DCDCAA">commit</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">			}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">true</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">companion</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">object</span><span style="color: #D4D4D4">{</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> TAG : </span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4"> = </span><span style="color: #CE9178">&quot;MainActivity&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="772" src="https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-mainlayout-1024x772.jpg" alt="Fragmentを利用したタブアプリ開発のメインレイアウト" class="wp-image-418" srcset="https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-mainlayout-1024x772.jpg 1024w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-mainlayout-300x226.jpg 300w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-mainlayout-768x579.jpg 768w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-mainlayout-1536x1158.jpg 1536w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-mainlayout.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">main_activity.xml</figcaption></figure>



<h3 class="wp-block-heading">2.タブを押した時に表示するFragment(ホームと設定）の作成</h3>



<p class="wp-block-paragraph">　タブの設定が終わったので、次にタブを押した時にcontainerのidに表示するFragmentを作成します。作成方法はAndroid Studioのメニューから右クリックをし<span class="marker-under">、[New]-&gt;[Fragment]-&gt;[Fragment(Blank)]で作成することができます。</span><br>　今回は「HomeFragment」と「SettingFragment」という名前のFragmentを作りました。</p>



<h3 class="wp-block-heading">3.ホーム画面のWebviewの実装</h3>



<p class="wp-block-paragraph">　続いて、HomeFragmentにWebViewを実装します。Fragment作成時に、fragment_home.xmlというレイアウトファイルができていると思いますので、そちらに<span class="marker-under">WebViewを全体に配置</span>します。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="795" src="https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-homelayout-1024x795.png" alt="Fragmentを利用したタブアプリ開発のホームレイアウト" class="wp-image-417" srcset="https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-homelayout-1024x795.png 1024w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-homelayout-300x233.png 300w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-homelayout-768x596.png 768w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-homelayout-1536x1192.png 1536w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-homelayout.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">fragment_home.xml</figcaption></figure>



<h3 class="wp-block-heading">4.設定画面の設定項目の実装</h3>



<p class="wp-block-paragraph">　続いて、SettingFragment作成時にも、fragment_setting.xmlというレイアウトファイルができていると思いますので、こちらに<span class="marker-under">「Webviewで読み込むURL」，「キャッシュ方法」、「ズーム倍率」をユーザーが入力するためのビューと、「保存」ボタンを配置</span>します。<br>　※配置方法がよくわからない場合は、とりあえずUIが崩れていても問題ないので配置してみてください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="777" src="https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-settinglayout-1024x777.jpg" alt="Fragmentを利用したタブアプリ開発の設定レイアウト" class="wp-image-419" srcset="https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-settinglayout-1024x777.jpg 1024w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-settinglayout-300x228.jpg 300w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-settinglayout-768x583.jpg 768w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-settinglayout-1536x1166.jpg 1536w, https://techgrowup.net/wp-content/uploads/2021/05/fragment-app-settinglayout.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">fragment_setting.xml</figcaption></figure>



<h3 class="wp-block-heading">5.設定を保存するためのSharedPreferencesの実装</h3>



<p class="wp-block-paragraph">　続いて、SettingFragmentで修正や保存したデータをHomeFragmentでも利用したいので、MySharedPrefsというクラスを作成し、SharedPreferencesを利用します。<br>　※クラスの作成方法は、プロジェクト内のパッケージ名で右クリックし、<span class="marker-under">[New]-&gt;[Kotlin Class/File]で作成</span>できます。</p>



<p class="wp-block-paragraph">　MySharedPrefesの中身としては、url、キャッシュ方法、ズーム倍率を保存/取得したいので、下記のように記述します。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="class MySharedPrefs (context: Context){
	private val preferences = context.getSharedPreferences(&quot;MyPrefs&quot;, Context.MODE_PRIVATE)
	private val urlKey = &quot;url&quot;
	private val cacheKey = &quot;cache&quot;
	private val zoomKey = &quot;zoom&quot;

	fun getUrl() : String?{
		return preferences.getString(urlKey,&quot;https://techgrowup.net/&quot;)
	}

	fun setUrl(value : String){
		val editor = preferences.edit()
		editor.putString(urlKey,value)
		editor.apply()
	}

	fun getCache() :  Int{
		return preferences.getInt(cacheKey, CACHE_DEFAULT)
	}

	fun setCache(value: Int){
		val editor = preferences.edit()
		editor.putInt(cacheKey,value)
		editor.apply()
	}

	fun getZoom() :  Int{
		return preferences.getInt(zoomKey, ZOOM_DEFAULT)
	}

	fun setZoom(value: Int){
		val editor = preferences.edit()
		editor.putInt(zoomKey,value)
		editor.apply()
	}

	companion object{
		const val CACHE_DEFAULT= 1
		const val NO_CACHE = 2
		const val CACHE_ONLY = 3

		const val ZOOM_DEFAULT = 100
	}
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">MySharedPrefs</span><span style="color: #D4D4D4"> (context: </span><span style="color: #4EC9B0">Context</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">private</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> preferences = context.</span><span style="color: #DCDCAA">getSharedPreferences</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&quot;MyPrefs&quot;</span><span style="color: #D4D4D4">, Context.MODE_PRIVATE)</span></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">private</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> urlKey = </span><span style="color: #CE9178">&quot;url&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">private</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> cacheKey = </span><span style="color: #CE9178">&quot;cache&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">private</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> zoomKey = </span><span style="color: #CE9178">&quot;zoom&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">getUrl</span><span style="color: #D4D4D4">() : </span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4">?{</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> preferences.</span><span style="color: #DCDCAA">getString</span><span style="color: #D4D4D4">(urlKey,</span><span style="color: #CE9178">&quot;https://techgrowup.net/&quot;</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">setUrl</span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">value</span><span style="color: #D4D4D4"> : </span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> editor = preferences.</span><span style="color: #DCDCAA">edit</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">		editor.</span><span style="color: #DCDCAA">putString</span><span style="color: #D4D4D4">(urlKey,</span><span style="color: #569CD6">value</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">		editor.</span><span style="color: #DCDCAA">apply</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">getCache</span><span style="color: #D4D4D4">() :  </span><span style="color: #4EC9B0">Int</span><span style="color: #D4D4D4">{</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> preferences.</span><span style="color: #DCDCAA">getInt</span><span style="color: #D4D4D4">(cacheKey, CACHE_DEFAULT)</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">setCache</span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">value</span><span style="color: #D4D4D4">: </span><span style="color: #4EC9B0">Int</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> editor = preferences.</span><span style="color: #DCDCAA">edit</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">		editor.</span><span style="color: #DCDCAA">putInt</span><span style="color: #D4D4D4">(cacheKey,</span><span style="color: #569CD6">value</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">		editor.</span><span style="color: #DCDCAA">apply</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">getZoom</span><span style="color: #D4D4D4">() :  </span><span style="color: #4EC9B0">Int</span><span style="color: #D4D4D4">{</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> preferences.</span><span style="color: #DCDCAA">getInt</span><span style="color: #D4D4D4">(zoomKey, ZOOM_DEFAULT)</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">setZoom</span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">value</span><span style="color: #D4D4D4">: </span><span style="color: #4EC9B0">Int</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> editor = preferences.</span><span style="color: #DCDCAA">edit</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">		editor.</span><span style="color: #DCDCAA">putInt</span><span style="color: #D4D4D4">(zoomKey,</span><span style="color: #569CD6">value</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">		editor.</span><span style="color: #DCDCAA">apply</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">	</span><span style="color: #569CD6">companion</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">object</span><span style="color: #D4D4D4">{</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> CACHE_DEFAULT= </span><span style="color: #B5CEA8">1</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> NO_CACHE = </span><span style="color: #B5CEA8">2</span></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> CACHE_ONLY = </span><span style="color: #B5CEA8">3</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">		</span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> ZOOM_DEFAULT = </span><span style="color: #B5CEA8">100</span></span>
<span class="line"><span style="color: #D4D4D4">	}</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<h3 class="wp-block-heading">6.細かい部分の調整</h3>



<p class="wp-block-paragraph">　ここまでできたら、大枠がほとんど完成しましたので、ActivityとFragment同士を繋げます。初めに、<span class="marker-under">SettingFragmentでMySharedPrefsにデータを保存する部分を作成</span>します。下記がSettingFragment.ktの全体像です。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="class SettingFragment : Fragment() {
    lateinit var  mySharedPrefs : MySharedPrefs

    lateinit var saveButton: Button
    lateinit var urlText : TextView
    lateinit var cacheRadioGroup : RadioGroup
    lateinit var zoomText: TextView


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_setting, container, false)
        initializeResource(view)

        return view
    }

    fun initializeResource(view : View){
//        SharedPreferenceのインスタンス生成
        mySharedPrefs = MySharedPrefs(context!!)

//        保存ボタンの初期設定
        saveButton = view.findViewById<Button&gt;(R.id.save_button)
        saveButton.setOnClickListener {
            saveData(saveButton)
        }

//        埋め込みURLの初期設定
        urlText = view.findViewById<TextView&gt;(R.id.url_plaintext)
        urlText.text = mySharedPrefs.getUrl()

//        キャッシュタイプラジオボタンの初期設定
        cacheRadioGroup = view.findViewById<RadioGroup&gt;(R.id.cache_radiogroup)
        when (mySharedPrefs.getCache()){
            MySharedPrefs.CACHE_DEFAULT -&gt; cacheRadioGroup.check(R.id.cache_default_radiobutton)
            MySharedPrefs.NO_CACHE -&gt; cacheRadioGroup.check(R.id.nocache_radiobutton)
            MySharedPrefs.CACHE_ONLY -&gt; cacheRadioGroup.check(R.id.cacheonly_radiobutton)
        }

//        ズーム倍率の初期設定
        zoomText = view.findViewById<TextView&gt;(R.id.textzoom_plaintext)
        zoomText.text = mySharedPrefs.getZoom().toString()
    }


    fun saveData(view : View){
//        データの取得
        Log.d(TAG,&quot;save datas&quot;)
        val url = urlText.text.toString()
        val checkedRadioButton = cacheRadioGroup.checkedRadioButtonId
        var cacheType = MySharedPrefs.CACHE_DEFAULT
        when(checkedRadioButton){
            R.id.cache_default_radiobutton -&gt; cacheType = MySharedPrefs.CACHE_DEFAULT
            R.id.nocache_radiobutton -&gt; cacheType = MySharedPrefs.NO_CACHE
            R.id.cacheonly_radiobutton -&gt; cacheType = MySharedPrefs.CACHE_ONLY
        }
        val zoom = Integer.parseInt(zoomText.text.toString())

//        データの保存
        mySharedPrefs.setUrl(url)
        mySharedPrefs.setCache(cacheType)
        mySharedPrefs.setZoom(zoom)

        Toast.makeText(context,&quot;データが更新されました。&quot;,Toast.LENGTH_LONG).show()
    }

    companion object {
       const val TAG : String = &quot;SettingFragment&quot;
    }
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">SettingFragment</span><span style="color: #D4D4D4"> : </span><span style="color: #4EC9B0">Fragment</span><span style="color: #D4D4D4">() {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">lateinit</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4">  mySharedPrefs : </span><span style="color: #4EC9B0">MySharedPrefs</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">lateinit</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> saveButton: </span><span style="color: #4EC9B0">Button</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">lateinit</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> urlText : </span><span style="color: #4EC9B0">TextView</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">lateinit</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> cacheRadioGroup : </span><span style="color: #4EC9B0">RadioGroup</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">lateinit</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> zoomText: </span><span style="color: #4EC9B0">TextView</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">override</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">onCreate</span><span style="color: #D4D4D4">(savedInstanceState: </span><span style="color: #4EC9B0">Bundle</span><span style="color: #D4D4D4">?) {</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">super</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">onCreate</span><span style="color: #D4D4D4">(savedInstanceState)</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">override</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">onCreateView</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">        inflater: </span><span style="color: #4EC9B0">LayoutInflater</span><span style="color: #D4D4D4">, container: </span><span style="color: #4EC9B0">ViewGroup</span><span style="color: #D4D4D4">?,</span></span>
<span class="line"><span style="color: #D4D4D4">        savedInstanceState: </span><span style="color: #4EC9B0">Bundle</span><span style="color: #D4D4D4">?</span></span>
<span class="line"><span style="color: #D4D4D4">    ): </span><span style="color: #4EC9B0">View</span><span style="color: #D4D4D4">? {</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> view = inflater.</span><span style="color: #DCDCAA">inflate</span><span style="color: #D4D4D4">(R.layout.fragment_setting, container, </span><span style="color: #569CD6">false</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #DCDCAA">initializeResource</span><span style="color: #D4D4D4">(view)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> view</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">initializeResource</span><span style="color: #D4D4D4">(view : </span><span style="color: #4EC9B0">View</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #6A9955">//        SharedPreferenceのインスタンス生成</span></span>
<span class="line"><span style="color: #D4D4D4">        mySharedPrefs = </span><span style="color: #DCDCAA">MySharedPrefs</span><span style="color: #D4D4D4">(context!!)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        保存ボタンの初期設定</span></span>
<span class="line"><span style="color: #D4D4D4">        saveButton = view.</span><span style="color: #DCDCAA">findViewById</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">Button</span><span style="color: #D4D4D4">&gt;(R.id.save_button)</span></span>
<span class="line"><span style="color: #D4D4D4">        saveButton.</span><span style="color: #DCDCAA">setOnClickListener</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">            </span><span style="color: #DCDCAA">saveData</span><span style="color: #D4D4D4">(saveButton)</span></span>
<span class="line"><span style="color: #D4D4D4">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        埋め込みURLの初期設定</span></span>
<span class="line"><span style="color: #D4D4D4">        urlText = view.</span><span style="color: #DCDCAA">findViewById</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">TextView</span><span style="color: #D4D4D4">&gt;(R.id.url_plaintext)</span></span>
<span class="line"><span style="color: #D4D4D4">        urlText.text = mySharedPrefs.</span><span style="color: #DCDCAA">getUrl</span><span style="color: #D4D4D4">()</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        キャッシュタイプラジオボタンの初期設定</span></span>
<span class="line"><span style="color: #D4D4D4">        cacheRadioGroup = view.</span><span style="color: #DCDCAA">findViewById</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">RadioGroup</span><span style="color: #D4D4D4">&gt;(R.id.cache_radiogroup)</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #C586C0">when</span><span style="color: #D4D4D4"> (mySharedPrefs.</span><span style="color: #DCDCAA">getCache</span><span style="color: #D4D4D4">()){</span></span>
<span class="line"><span style="color: #D4D4D4">            MySharedPrefs.CACHE_DEFAULT </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> cacheRadioGroup.</span><span style="color: #DCDCAA">check</span><span style="color: #D4D4D4">(R.id.cache_default_radiobutton)</span></span>
<span class="line"><span style="color: #D4D4D4">            MySharedPrefs.NO_CACHE </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> cacheRadioGroup.</span><span style="color: #DCDCAA">check</span><span style="color: #D4D4D4">(R.id.nocache_radiobutton)</span></span>
<span class="line"><span style="color: #D4D4D4">            MySharedPrefs.CACHE_ONLY </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> cacheRadioGroup.</span><span style="color: #DCDCAA">check</span><span style="color: #D4D4D4">(R.id.cacheonly_radiobutton)</span></span>
<span class="line"><span style="color: #D4D4D4">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        ズーム倍率の初期設定</span></span>
<span class="line"><span style="color: #D4D4D4">        zoomText = view.</span><span style="color: #DCDCAA">findViewById</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">TextView</span><span style="color: #D4D4D4">&gt;(R.id.textzoom_plaintext)</span></span>
<span class="line"><span style="color: #D4D4D4">        zoomText.text = mySharedPrefs.</span><span style="color: #DCDCAA">getZoom</span><span style="color: #D4D4D4">().</span><span style="color: #DCDCAA">toString</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">saveData</span><span style="color: #D4D4D4">(view : </span><span style="color: #4EC9B0">View</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #6A9955">//        データの取得</span></span>
<span class="line"><span style="color: #D4D4D4">        Log.</span><span style="color: #DCDCAA">d</span><span style="color: #D4D4D4">(TAG,</span><span style="color: #CE9178">&quot;save datas&quot;</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> url = urlText.text.</span><span style="color: #DCDCAA">toString</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> checkedRadioButton = cacheRadioGroup.checkedRadioButtonId</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> cacheType = MySharedPrefs.CACHE_DEFAULT</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #C586C0">when</span><span style="color: #D4D4D4">(checkedRadioButton){</span></span>
<span class="line"><span style="color: #D4D4D4">            R.id.cache_default_radiobutton </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> cacheType = MySharedPrefs.CACHE_DEFAULT</span></span>
<span class="line"><span style="color: #D4D4D4">            R.id.nocache_radiobutton </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> cacheType = MySharedPrefs.NO_CACHE</span></span>
<span class="line"><span style="color: #D4D4D4">            R.id.cacheonly_radiobutton </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> cacheType = MySharedPrefs.CACHE_ONLY</span></span>
<span class="line"><span style="color: #D4D4D4">        }</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> zoom = Integer.</span><span style="color: #DCDCAA">parseInt</span><span style="color: #D4D4D4">(zoomText.text.</span><span style="color: #DCDCAA">toString</span><span style="color: #D4D4D4">())</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        データの保存</span></span>
<span class="line"><span style="color: #D4D4D4">        mySharedPrefs.</span><span style="color: #DCDCAA">setUrl</span><span style="color: #D4D4D4">(url)</span></span>
<span class="line"><span style="color: #D4D4D4">        mySharedPrefs.</span><span style="color: #DCDCAA">setCache</span><span style="color: #D4D4D4">(cacheType)</span></span>
<span class="line"><span style="color: #D4D4D4">        mySharedPrefs.</span><span style="color: #DCDCAA">setZoom</span><span style="color: #D4D4D4">(zoom)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">        Toast.</span><span style="color: #DCDCAA">makeText</span><span style="color: #D4D4D4">(context,</span><span style="color: #CE9178">&quot;データが更新されました。&quot;</span><span style="color: #D4D4D4">,Toast.LENGTH_LONG).</span><span style="color: #DCDCAA">show</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">companion</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">object</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">       </span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> TAG : </span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4"> = </span><span style="color: #CE9178">&quot;SettingFragment&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">　これで設定画面でデータを保存することができるようになりましたので、続いてはH<span class="marker-under">omeFragmentでMySharedPrefsから受け取る処理</span>を作りたいと思います。以下がHomeFragmentの全コードです。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="class HomeFragment : Fragment() {
    lateinit var  mySharedPrefs : MySharedPrefs

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_home, container, false)
        initializeResource(view)

        return view
    }

    fun initializeResource(view : View){
//        SharedPreferenceのインスタンス生成
        mySharedPrefs = MySharedPrefs(context!!)

//        データの取得
        val url = mySharedPrefs.getUrl()
        val cacheType = mySharedPrefs.getCache()
        val zoom = mySharedPrefs.getZoom()

//        WebViewの設定
        val webView = view.findViewById<WebView&gt;(R.id.webview)
        webView.webViewClient = WebViewClient()
        webView.settings.javaScriptEnabled = true

        when(cacheType){
            MySharedPrefs.CACHE_DEFAULT -&gt; webView.settings.cacheMode = WebSettings.LOAD_DEFAULT
            MySharedPrefs.NO_CACHE -&gt; webView.settings.cacheMode = WebSettings.LOAD_NO_CACHE
            MySharedPrefs.CACHE_ONLY -&gt; webView.settings.cacheMode = WebSettings.LOAD_CACHE_ONLY
        }

        webView.settings.textZoom = zoom
        webView.loadUrl(url!!)
    }

    companion object {
        const val TAG : String = &quot;HomeFragment&quot;
    }
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">class</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">HomeFragment</span><span style="color: #D4D4D4"> : </span><span style="color: #4EC9B0">Fragment</span><span style="color: #D4D4D4">() {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">lateinit</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4">  mySharedPrefs : </span><span style="color: #4EC9B0">MySharedPrefs</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">override</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">onCreate</span><span style="color: #D4D4D4">(savedInstanceState: </span><span style="color: #4EC9B0">Bundle</span><span style="color: #D4D4D4">?) {</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">super</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">onCreate</span><span style="color: #D4D4D4">(savedInstanceState)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">override</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">onCreateView</span><span style="color: #D4D4D4">(</span></span>
<span class="line"><span style="color: #D4D4D4">        inflater: </span><span style="color: #4EC9B0">LayoutInflater</span><span style="color: #D4D4D4">, container: </span><span style="color: #4EC9B0">ViewGroup</span><span style="color: #D4D4D4">?,</span></span>
<span class="line"><span style="color: #D4D4D4">        savedInstanceState: </span><span style="color: #4EC9B0">Bundle</span><span style="color: #D4D4D4">?</span></span>
<span class="line"><span style="color: #D4D4D4">    ): </span><span style="color: #4EC9B0">View</span><span style="color: #D4D4D4">? {</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> view = inflater.</span><span style="color: #DCDCAA">inflate</span><span style="color: #D4D4D4">(R.layout.fragment_home, container, </span><span style="color: #569CD6">false</span><span style="color: #D4D4D4">)</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #DCDCAA">initializeResource</span><span style="color: #D4D4D4">(view)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> view</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">fun</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">initializeResource</span><span style="color: #D4D4D4">(view : </span><span style="color: #4EC9B0">View</span><span style="color: #D4D4D4">){</span></span>
<span class="line"><span style="color: #6A9955">//        SharedPreferenceのインスタンス生成</span></span>
<span class="line"><span style="color: #D4D4D4">        mySharedPrefs = </span><span style="color: #DCDCAA">MySharedPrefs</span><span style="color: #D4D4D4">(context!!)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        データの取得</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> url = mySharedPrefs.</span><span style="color: #DCDCAA">getUrl</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> cacheType = mySharedPrefs.</span><span style="color: #DCDCAA">getCache</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> zoom = mySharedPrefs.</span><span style="color: #DCDCAA">getZoom</span><span style="color: #D4D4D4">()</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6A9955">//        WebViewの設定</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> webView = view.</span><span style="color: #DCDCAA">findViewById</span><span style="color: #D4D4D4">&lt;</span><span style="color: #4EC9B0">WebView</span><span style="color: #D4D4D4">&gt;(R.id.webview)</span></span>
<span class="line"><span style="color: #D4D4D4">        webView.webViewClient = </span><span style="color: #DCDCAA">WebViewClient</span><span style="color: #D4D4D4">()</span></span>
<span class="line"><span style="color: #D4D4D4">        webView.settings.javaScriptEnabled = </span><span style="color: #569CD6">true</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #C586C0">when</span><span style="color: #D4D4D4">(cacheType){</span></span>
<span class="line"><span style="color: #D4D4D4">            MySharedPrefs.CACHE_DEFAULT </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> webView.settings.cacheMode = WebSettings.LOAD_DEFAULT</span></span>
<span class="line"><span style="color: #D4D4D4">            MySharedPrefs.NO_CACHE </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> webView.settings.cacheMode = WebSettings.LOAD_NO_CACHE</span></span>
<span class="line"><span style="color: #D4D4D4">            MySharedPrefs.CACHE_ONLY </span><span style="color: #569CD6">-&gt;</span><span style="color: #D4D4D4"> webView.settings.cacheMode = WebSettings.LOAD_CACHE_ONLY</span></span>
<span class="line"><span style="color: #D4D4D4">        }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">        webView.settings.textZoom = zoom</span></span>
<span class="line"><span style="color: #D4D4D4">        webView.</span><span style="color: #DCDCAA">loadUrl</span><span style="color: #D4D4D4">(url!!)</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">companion</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">object</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">        </span><span style="color: #569CD6">const</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">val</span><span style="color: #D4D4D4"> TAG : </span><span style="color: #4EC9B0">String</span><span style="color: #D4D4D4"> = </span><span style="color: #CE9178">&quot;HomeFragment&quot;</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">　これで<span class="marker-under">設定画面でデータを変更し、タブ切り替えでホーム画面でウェブページが変更</span>されることが確認できると思います。実装の流れとしては以上になります。最後にできたアプリを確認してみましょう。</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Androidアプリ開発 BottomNavigaitonViewとFragmentを利用したタブアプリケーション" width="1256" height="942" src="https://www.youtube.com/embed/NWYunr40AL4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<h2 class="wp-block-heading">まとめ</h2>



<p class="wp-block-paragraph">　今回はタブを利用して画面を切り替えるアプリの実装をしてみました。<span class="marker-under">BottomNavigationViewやWebView、SharedPreferencese、Fragmentなどは今後もよく利用するもの</span>ですので、ぜひ覚えておきましょう。<br>　プロジェクト一式は下記に配置してありますので、参考にしてください。</p>




<a rel="noopener" target="_blank" href="https://github.com/daichi-mizuno-tech/BottomNavigationApp" title="Build software better, together" class="blogcard-wrap external-blogcard-wrap a-wrap cf"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img fetchpriority="high" decoding="async" src="https://techgrowup.net/wp-content/uploads/cocoon-resources/blog-card-cache/f543dc43b7b380979be974b14c3fd120.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="320" height="180" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">Build software better, together</div><div class="blogcard-snippet external-blogcard-snippet">GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
					<wfw:commentRss>https://techgrowup.net/android-fragment-tabapp/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Disk: Enhanced  を使用したページ キャッシュ

Served from: techgrowup.net @ 2026-06-22 01:10:07 by W3 Total Cache
-->