<h2 id="h3bd9209464">方法1</h2><p>Platform.isIOS/Platform.isAndroidを使用して、自身でPlatformを判別して出し分けることができます。</p><pre><code>import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

import 'dart:io';

Widget loading() {
&nbsp; return Center(
&nbsp; &nbsp; child: Platform.isIOS
&nbsp; &nbsp; &nbsp; &nbsp; ? const CupertinoActivityIndicator()
&nbsp; &nbsp; &nbsp; &nbsp; : const CircularProgressIndicator(),
&nbsp; );
}</code></pre><p><br></p><h2 id="h15aae23d70">方法2</h2><p>adaptiveを使用することで、自動的にPlatformを判別して出し分けることができます。</p><pre><code>import 'package:flutter/material.dart';

Widget loading() {
&nbsp; return const Center(
&nbsp; &nbsp; child: CircularProgressIndicator.adaptive(),
&nbsp; );
}</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p>CircularProgressIndicatoradaptiveだけでなく、SliderやSwitch、SwitchListTileなどでもadaptiveを使用することができます。<br>adaptiveが用意されているものを出し分けたい場合は、adaptiveを使用するのが良さそう。</p>

【Flutter】ローディング表示をiOS/Androidで出し分ける

<h2 id="hea7606c3a9">事象</h2><p>iOSのシミュレーターで実行した時に、テスト広告が表示されない。<br><br>ターミナルに下記メッセージが表示されている。</p><pre><code>&lt;Google&gt; To get test ads on this device, set:&nbsp;
Objective-C
&nbsp; &nbsp; &nbsp; &nbsp; GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers = @[ kGADSimulatorID ];
Swift
&nbsp; &nbsp; &nbsp; &nbsp; GADMobileAds.sharedInstance().requestConfiguration.testDeviceIdentifiers = [ kGADSimulatorID ]</code></pre><p><br></p><h2 id="hd970156c24">対応</h2><p>Issuesを眺めているとAppDelegate.swiftに追記をする方法が書いてあった。<br><a href="https://github.com/googleads/googleads-mobile-flutter/issues/503" target="_blank" rel="noopener noreferrer">https://github.com/googleads/googleads-mobile-flutter/issues/503</a><br><br>ios/Runner/AppDelegate.swiftを修正する。</p><pre><code>import UIKit
import Flutter
import GoogleMobileAds // この行を追加

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -&gt; Bool {
    GeneratedPluginRegistrant.register(with: self)
    GADMobileAds.sharedInstance().requestConfiguration.testDeviceIdentifiers = [ kGADSimulatorID ] // この行を追加
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}</code></pre><p><br>flutter runするとテスト広告が表示される。</p>

【google_mobile_ads】テスト広告が表示されない場合の解決法

<p>環境</p><pre><code>Flutter 2.10.0
Dart 2.16.0</code></pre><p><br>pubspec.yaml</p><pre><code>dependencies:
&nbsp; flutter_launcher_icons: ^0.9.2</code></pre><p><br>flutter_launcher_iconsをインストールし、</p><pre><code>flutter pub run flutter_launcher_icons:main</code></pre><p>を実行すると<br></p><pre><code>✓ Successfully generated launcher icons
Unhandled exception:
FormatException: Invalid number (at character 1)</code></pre><p>上記のエラーが発生した。<br><br><a href="https://github.com/fluttercommunity/flutter_launcher_icons/issues/316" target="_blank" rel="noopener noreferrer">https://github.com/fluttercommunity/flutter</a><a href="https://github.com/fluttercommunity/flutter_launcher_icons/issues/316" target="_blank" rel="noopener noreferrer"><em>launcher</em></a><a href="https://github.com/fluttercommunity/flutter_launcher_icons/issues/316" target="_blank" rel="noopener noreferrer">icons/issues/316</a><br>上記リンクを参考に、pubspec.yamlを修正し、</p><pre><code>flutter_launcher_icons:
&nbsp; git:
&nbsp; &nbsp; url: https://github.com/Davenchy/flutter_launcher_icons.git
&nbsp; &nbsp; ref: fixMinSdkParseFlutter2.8</code></pre><p>再度実行するとエラーなくアイコンを生成することができる。</p>

【flutter_launcher_icons】エラー(FormatException: Invalid number (at character 1))の対処方法

<p>IconButtonのタップ時やロングプレス時に表示されるエフェクトを消してみました。</p><pre><code>IconButton(
　　onPressed: () {},
　　icon: const Icon(Icons.add),
  highlightColor: const Color(0x00FFFFFF),
  splashColor: const Color(0x00FFFFFF),
)</code></pre><p>highlightColorとsplashColorに透明な色を設定しています。<br><br>全てのWidgetに適応する場合は、themeに設定します。</p><pre><code>MaterialApp(
  title: 'Title',
  theme: ThemeData(
    highlightColor: const Color(0x00FFFFFF),
    splashColor: const Color(0x00FFFFFF),
  ),
  home: const HomePage(),
);</code></pre>

【Flutter】ボタンを押した時のエフェクトを消したい

<pre><code>import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';


class MyWidget extends StatelessWidget {
&nbsp; const MyWidget({Key? key}) : super(key: key);
&nbsp;&nbsp;
&nbsp; @override
&nbsp; Widget build(BuildContext context) {
&nbsp; &nbsp; const _url = "https://flutter.dev";
&nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; return Column(
&nbsp; &nbsp; &nbsp; children: [
&nbsp; &nbsp; &nbsp; &nbsp; TextButton(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: const Text('アプリ内ブラウザで開く'),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPressed: () async {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await launch(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _url,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceSafariVC: true, // iOS用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceWebView: true, // Android用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; &nbsp; TextButton(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: const Text('外部ブラウザで開く'),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPressed: () async {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await launch(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _url,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceSafariVC: false, // iOS用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceWebView: false, // Android用の設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; &nbsp; TextButton(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; child: const Text('ユニバーサルリンクで開く'),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPressed: () async {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await launch(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _url,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; forceSafariVC: false,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; universalLinksOnly: true, // iOSかつforceSafariVCがfalseの場合でのみ有効
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; );
&nbsp; }
}</code></pre>

【Flutter】url_launcherでURLを開く方法を指定する

<p>NG</p><pre><code>id := "hogehoge"
db.Find(&amp;user, id)</code></pre><p><br>OK</p><pre><code>id := "hogehoge"
db.Find(&amp;user, "id = ?", id)</code></pre><p><br>ドキュメント<br><a href="https://gorm.io/ja_JP/docs/query.html#Retrieving-objects-with-primary-key" target="_blank" rel="noopener noreferrer">https://gorm.io/ja_JP/docs/query.html#Retrieving-objects-with-primary-key</a></p>

【Gorm】主キーがstringの時のFind

<p>Next.js 11がリリースされていたので、10からアップグレードしてみます。<br></p><h2 id="hed900658dc">環境</h2><pre><code>"next": "^10.0.0",
"react": "17.0.1",
"react-dom": "17.0.1",</code></pre><p><br></p><h2 id="h046876a126">手順</h2><p>公式の<a href="https://nextjs.org/docs/upgrading" target="_blank" rel="noopener noreferrer">アップグレードガイド</a>の通りに行ってみます。<br></p><h3 id="ha31c15f535">reactとreact-domのアップグレード</h3><p>まずはreactとreact-domをアップグレードします。<br><br>npmの場合</p><pre><code>npm install react@latest react-dom@latest</code></pre><p>yarnの場合</p><pre><code>yarn add react@latest react-dom@latest</code></pre><p><br></p><h3 id="he54ab14daa">nextのアップグレード</h3><p>次に、nextをアップグレードします。<br><br>npmの場合</p><pre><code>npm install next@latest</code></pre><p>yarnの場合</p><pre><code>yarn add next@latest</code></pre><p><br></p><h3 id="h00da90d3f5">package.jsonを確認</h3><p>package.jsonを開いて、バージョンが変更されていることが確認できれば完了です。</p><pre><code>"next": "^11.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",</code></pre>

Next.jsを10から11にアップグレードする

<p>特定の条件下でのみWidgetを表示させたり、条件によってWidgetを出しわけたいことがあると思います。<br><br>そのような時は「...」ドット(ピリオド)3つを使用して、Widgetの配列にWidgetを動的に追加して対応することができます。<br></p><h3 id="h42b5c846a9">コード例</h3><pre><code>import 'package:flutter/material.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
&nbsp;@override
&nbsp;Widget build(BuildContext context) {
&nbsp;&nbsp;return MaterialApp(
&nbsp;&nbsp;&nbsp;home: Scaffold(
&nbsp;&nbsp;&nbsp;&nbsp;appBar: AppBar(title: Text("Flutter")),
&nbsp;&nbsp;&nbsp;&nbsp;body: AppendWidgetList(),
&nbsp;&nbsp;&nbsp;),
&nbsp;&nbsp;);
&nbsp;}
}

class AppendWidgetList extends StatelessWidget {
&nbsp;@override
&nbsp;Widget build(BuildContext context) {
&nbsp;&nbsp;return Center(
&nbsp;&nbsp;&nbsp;&nbsp;child: Row(
&nbsp;&nbsp;&nbsp;mainAxisAlignment: MainAxisAlignment.spaceAround,
&nbsp;&nbsp;&nbsp;children: [
&nbsp;&nbsp;&nbsp;&nbsp;Text("Platform is"),
&nbsp;&nbsp;&nbsp;&nbsp;if (Platform.isIOS) ...{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text("iOS"),
&nbsp;&nbsp;&nbsp;&nbsp;} else if (Platform.isAndroid) ...{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text("Android"),
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;));
&nbsp;}
}</code></pre><p><br>例として、プラットフォームによってテキストを出し分けてみました。<br>iOS端末で見た場合は「iOS」が、Android端末で見た場合は「Android」が表示されます。</p>

【Flutter】「...」を使用してWidgetListにWidgetを動的に追加する

<p>FlutterでMarkdownのテキストを表示する為には、<a href="https://pub.dev/packages/flutter_markdown" target="_blank" rel="noopener noreferrer">flutter_markdown</a>を利用します。<br><br>pubspec.yaml</p><pre><code>dependencies:
  flutter_markdown: ^0.6.2</code></pre><p><br>main.dart</p><pre><code>import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

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

class MyApp extends StatelessWidget {
&nbsp; @override
&nbsp; Widget build(BuildContext context) {
&nbsp; &nbsp; return MaterialApp(
&nbsp; &nbsp; &nbsp; home: Scaffold(
&nbsp; &nbsp; &nbsp; &nbsp; appBar: AppBar(title: Text("MarkdownDemo")),
&nbsp; &nbsp; &nbsp; &nbsp; body: Markdown(data: markdownText),
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; );
&nbsp; }
}

final String markdownText = '''
# 見出し1
hoge

## 見出し2
fuga

### 見出し3
piyo 
'''</code></pre>

FlutterでMarkdownのテキストを表示する

<p>日本でのFlutterの採用事例をまとめました。<br></p><h3 id="hd00eb6082b">REQU</h3><p><span style="color:#333333">サイバーエージェント</span><br><a href="https://www.cyberagent.co.jp/way/features/list/detail/id=26230" target="_blank" rel="noopener noreferrer">https://www.cyberagent.co.jp/way/features/list/detail/id=26230</a><br></p><h3 id="h4fc2f0bbc2">Green</h3><p>アトラエ<br><a href="https://atraetech.hatenablog.com/entry/20210218_green_mobile_app_structure" target="_blank" rel="noopener noreferrer">https://atraetech.hatenablog.com/entry/20210218</a><a href="https://atraetech.hatenablog.com/entry/20210218_green_mobile_app_structure" target="_blank" rel="noopener noreferrer"><em>green</em></a><a href="https://atraetech.hatenablog.com/entry/20210218_green_mobile_app_structure" target="_blank" rel="noopener noreferrer">mobile_app_structure</a><br></p><h3 id="h72c563f63b">カウル</h3><p>ハウスマート<br><a href="https://note.com/yamarkz/n/nd9716541d8ad" target="_blank" rel="noopener noreferrer">https://note.com/yamarkz/n/nd9716541d8ad</a><br></p><h3 id="ha750097178">giftee</h3><p>ギフティ<br><a href="https://blog.giftee.dev/2021-01-12-rebuild-app-with-flutter/" target="_blank" rel="noopener noreferrer">https://blog.giftee.dev/2021-01-12-rebuild-app-with-flutter/</a><br></p><h3 id="hb1c05da024">Stailer</h3><p>10X<br><a href="https://type.jp/et/feature/15075/" target="_blank" rel="noopener noreferrer">https://type.jp/et/feature/15075/</a><br></p><h3 id="hf38638a8d2">SUZURI</h3><p>GMOペパボ<br><a href="https://speakerdeck.com/osamtimizer/suzuri-meets-flutter" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/osamtimizer/suzuri-meets-flutter</a><br></p><h3 id="hed770b3dc7">じゃらん</h3><p>リクルート<br><a href="https://speakerdeck.com/rtechkouhou/flutteryi-xing-falseku-lao-to-cheng-riyue-etaxian-nide-raretamofalse" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/rtechkouhou/flutteryi-xing-falseku-lao-to-cheng-riyue-etaxian-nide-raretamofalse</a><br></p><h3 id="hb847e37937">Chompy</h3><p><span style="color:#0c2340">シン</span><br><a href="https://speakerdeck.com/yagitatsu/chompytefluttercai-yong-sita-zhen-rifan-ri" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/yagitatsu/chompytefluttercai-yong-sita-zhen-rifan-ri</a><br></p><h3 id="h8489b790d6"><span style="color:#141e30">ポルト</span></h3><p><span style="color:#141e30">スタディプラス</span><br><a href="https://tech.studyplus.co.jp/entry/2019/09/27/113643" target="_blank" rel="noopener noreferrer">https://tech.studyplus.co.jp/entry/2019/09/27/113643</a></p>

【採用・導入事例】Flutterで作られたアプリ

<h2 id="hb9839ad71f">ライブラリ</h2><p><a href="https://github.com/nygardk/react-share" target="_blank" rel="noopener noreferrer">react-share</a> を使用します。<br><br>インストール</p><pre><code>yarn add react-share</code></pre><p><br></p><h2 id="h922edff87b">実装</h2><p>まずはインポートします。<br>今回は Twitter, Facebook, Line, Hatenaを使用します。(この記事の下部にあるものと同じ)</p><pre><code>import { TwitterShareButton, FacebookShareButton, LineShareButton, HatenaShareButton, TwitterIcon, FacebookIcon, LineIcon, HatenaIcon } from "react-share";</code></pre><p><br>後は設置したい箇所に、下記のように記載するだけです。</p><pre><code>&lt;TwitterShareButton url="https://prism-cube.com" title="ページタイトル"&gt;
　　&lt;TwitterIcon size={30} round={true} /&gt;
&lt;/TwitterShareButton&gt;

&lt;FacebookShareButton url="https://prism-cube.com" quote="ページタイトル"&gt;
　　&lt;FacebookIcon size={30} round={true} /&gt;
&lt;/FacebookShareButton&gt;

&lt;LineShareButton url="https://prism-cube.com" title="ページタイトル"&gt;
　　&lt;LineIcon size={30} round={true} /&gt;
&lt;/LineShareButton&gt;

&lt;HatenaShareButton url="https://prism-cube.com" title="ページタイトル"&gt;
　 &lt;HatenaIcon size={30} round={true} /&gt;
&lt;/HatenaShareButton&gt;</code></pre>

【Next.js】シェアボタンを設置する

<h2 id="hfa66ac9b59">aspidaを導入</h2><h3 id="hd8d793506b">インストール</h3><pre><code>yarn add @aspida/fetch</code></pre><h2 id="he98e7ef630">使用するAPIスキーマ</h2><h3 id="hcd4e76d427">Articles</h3><p><img src="https://images.microcms-assets.io/assets/637a154d3e1c433dadd7561517c3541d/233d44f1584d46cf9b91f64ad9a0a881/a_microcms-aspida-1.png" alt=""></p><h3 id="h0502f3a90c">tags</h3><p><img src="https://images.microcms-assets.io/assets/637a154d3e1c433dadd7561517c3541d/403a5d694dcc4507bf0570aaeee017cc/a_microcms-aspida-2.png" alt=""></p><h2 id="hf71e62297b">型定義ファイルの作成</h2><h3 id="h802c719757">共通</h3><p>microCMSのAPIのリクエストとレスポンスで使用する共通の型を作成します。<br><br>src/types/api.ts</p><pre><code>export type ContentsResponse&lt;T&gt; = {
&nbsp;contents: T[];
&nbsp;totalCount: number;
&nbsp;offset: number;
&nbsp;limit: number;
};
 
export type ContentResponse&lt;T&gt; = {
&nbsp;id: string;
&nbsp;createdAt: string;
&nbsp;updatedAt: string;
&nbsp;publishedAt: string;
&nbsp;revisedAt: string;
} &amp; T;
 
export type ContentsQuery = {
&nbsp;draftKey?: string;
 offset?: number;
&nbsp;limit?: number;
&nbsp;orders?: string;
&nbsp;q?: string;
&nbsp;fields?: string;
&nbsp;ids?: string;
&nbsp;filters?: string;
&nbsp;depth?: number;
};
 
export type ContentQuery = {
&nbsp;draftKey?: string;
&nbsp;fields?: string;
&nbsp;depth?: number;
};</code></pre><p><br></p><h3 id="hcd4e76d427">Articles</h3><p>記事用のレスポンスの型を作成します。<br><br>src/types/article.ts</p><pre><code>import { ContentsResponse } from "./api";
import { TagResponse } from "./tag";
import { ImageResponse } from "./image";
 
export type ArticlesResponse = ContentsResponse&lt;ArticleResponse&gt;;
 
export type ArticleResponse = ContentResponse&lt;{
&nbsp;title?: string;
&nbsp;body?: string;
&nbsp;tags?: TagResponse[];
&nbsp;image?: ImageResponse;
}&gt;;</code></pre><p><br>タグと画像用の型も作成します。<br><br>src/types/tag.ts</p><pre><code>import { ContentResponse, ContentsResponse } from "./api";
import { ImageResponse } from "./image";
 
export type TagsResponse = ContentsResponse&lt;TagResponse&gt;;
 
export type TagResponse = ContentResponse&lt;{
&nbsp;name?: string;
&nbsp;image?: ImageResponse;
}&gt;;

src/types/image.ts
export type ImageResponse = {
&nbsp;url?: string;
&nbsp;height?: number;
&nbsp;width?: number;
};</code></pre><p><br></p><h2 id="h98cff18434">aspidaの設定</h2><p>プロジェクトルートに <span style="color:#14171a">aspida.config.js を作成します。</span><br><br>aspida.config.js</p><pre><code>module.exports = {
&nbsp;input: "src/apis",
};</code></pre><p><br>aspida用の型定義ファイルを作成します。<br><br>src/apis/articles/index.ts</p><pre><code>import { ContentsQuery } from "src/types/api";
import { ArticlesResponse } from "src/types/article";
 
export type Methods = {
&nbsp;get: {
&nbsp;&nbsp;query?: ContentsQuery;
&nbsp;&nbsp;resBody: ArticlesResponse;
&nbsp;};
};</code></pre><p><br>src/apis/articles/_id@string/index.ts</p><pre><code>import { ContentQuery } from "src/types/api";
import { ArticleResponse } from "src/types/article";
 
export type Methods = {
&nbsp;get: {
&nbsp;&nbsp;query?: ContentQuery;
&nbsp;&nbsp;resBody: ArticleResponse;
&nbsp;};
};</code></pre><p><br></p><h2 id="h82915db38a"><span style="color:#14171a">$api.ts</span>を生成</h2><p>package.json の scripts に "api:build": "aspida" を追加します。<br><br>package.json</p><pre><code>"scripts": {
&nbsp;&nbsp;"dev": "next dev",
&nbsp;&nbsp;"build": "next build",
&nbsp;&nbsp;"start": "next start",
&nbsp;&nbsp;"api:build": "aspida"
&nbsp;}</code></pre><p><br></p><pre><code>yarn api:build</code></pre><p>上記を実行すると、src/apis/$api.ts が生成されます。<br></p><h2 id="h16374f7be1">APIを叩く</h2><p>APIを叩く為の共通設定を utils/api.ts に持たせます。<br><br>utils/api.ts</p><pre><code>import aspida from '@aspida/fetch'
import api from 'src/apis/$api'
 
const fetchConfig: Required&lt;Parameters&lt;typeof aspida&gt;&gt;[1] = {
&nbsp;baseURL: 'https://[YOUR-SERVICE].microcms.io/api/v1/',
&nbsp;throwHttpErrors: true,
&nbsp;headers: {
&nbsp;&nbsp;"X-API-KEY": '[YOUR-API-KEY]',
&nbsp;},
};
 
export const client = api(aspida(fetch, fetchConfig));</code></pre><p><br>シンプルにAPIを呼べるようになりました！</p><pre><code>import { ArticlesResponse } from 'src/types/article'
import { client } from 'src/utils/api'
 
const response = await client.articles.$get()</code></pre><p><br>0件目から、5件取得する場合</p><pre><code>const response = await client.articles.$get({
&nbsp;query: {
&nbsp;&nbsp;offset: 0,
&nbsp;&nbsp;limit: 5,
&nbsp;},
})</code></pre><p><br>IDから1件取得する場合</p><pre><code>const id = 'content-id';
const response = await client.articles._id(id).$get()</code></pre>

aspidaで型定義してmicroCMSのAPIにアクセスする

<pre><code>// 1~100が入ったリストを作成
var baseList = new List&lt;int&gt;();
baseList.AddRange(Enumerable.Range(1, 100));

//10ずつに分割
var separateCount = 10;
var itemListList = baseList.Select((v, i) =&gt; new { v, i }).GroupBy(x =&gt; x.i / separateCount).Select(g =&gt; g.Select(x =&gt; x.v).ToList()).ToList();

foreach (var itemList in itemListList)
{
  Console.WriteLine("hoge");
  foreach (var item in itemList)
  {
    Console.WriteLine(item);
  }
  Console.WriteLine("fuga");
}</code></pre><p><br>出力結果</p><pre><code>hoge
1
2
3
4
5
6
7
8
9
10
fuga
hoge
11
12
13
14
15
16
17
18
19
20
fuga
hoge
21
22
...省略</code></pre><p><br>こうするとランダムに並び替えたうえで分割することができる</p><pre><code>var itemListList = baseList.OrderBy(x =&gt; Guid.NewGuid()).Select((v, i) =&gt; new { v, i }).GroupBy(x =&gt; x.i / separateCount).Select(g =&gt; g.Select(x =&gt; x.v).ToList()).ToList();</code></pre><p><br></p><h3 id="h6a5297362b">追記</h3><p>.NET6で追加されたChunkメソッドを使用するともっと簡単に書ける</p><pre><code>//10ずつに分割
var itemListList = Enumerable.Range(1, 100).Chunk(10);</code></pre>

LINQでList<T>をList<List<T>>に変換する

<h2 id="h523ec6bed9">旧</h2><ul><li>Python</li><li>Django</li><li>MySQL</li><li>VPS</li><li>Nginx</li><li>uWSGI</li></ul><p><br></p><h2 id="h7684b597a2">新</h2><ul><li>Next.js</li><li>microCMS</li><li>Vercel</li></ul><p><br>JAMstackになり非常にシンプルになりました。<br>便利な世の中ですね！</p>

サイトを移行しました。

<p><span style="color:#000000">この記事は前ブログに投稿(2020/7/29)したものです。</span><br></p><h2 id="hed900658dc">環境</h2><p>macOS Catalina Xcodeインストール済み<br></p><h2 id="h9707d3a59a">概要</h2><ol><li>homebrewをインストール</li><li>homebrewでpyenvをインストール</li><li>pyenvでPythonをインストール</li></ol><p><br></p><h2 id="h046876a126">手順</h2><h3 id="h51613e2613">1-1. homebrewをインストール</h3><p>まずはhomebrewをインストールします。<br>下記をターミナルに貼り付けて実行してください。</p><pre><code>/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"</code></pre><h3 id="hbdd6b383af">2-1. pyenvをインストール</h3><p>homebrewのインストールが完了したらpyenvをインストールします。<br>下記をターミナルに貼り付けて実行してください。</p><pre><code>brew install pyenv</code></pre><h3 id="h6ada1b88fc">2-2. PATHを通す</h3><p>使用しているSHELLを確認します。<br>下記をターミナルに貼り付けて実行してください。</p><pre><code>echo $SHELL</code></pre><h3 id="h9dff5a75d5">2-3-1. /bin/bashと表示された場合</h3><p>/bin/bashと表示された場合は、下記をターミナルに貼り付けて実行してください。</p><pre><code>echo 'export PYENV_ROOT="$HOME/.pyenv"' &gt;&gt; ~/.bash_profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' &gt;&gt; ~/.bash_profile
echo -e 'if command -v pyenv 1&gt;/dev/null 2&gt;&amp;1; then\n  eval "$(pyenv init -)"\nfi' &gt;&gt; ~/.bash_profile
source ~/.bash_profile</code></pre><h3 id="hd98a7aeac0">2-3-2. /bin/zshと表示された場合</h3><p>/bin/zshと表示された場合は、下記をターミナルに貼り付けて実行してください。</p><pre><code>echo 'export PYENV_ROOT="$HOME/.pyenv"' &gt;&gt; ~/. zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' &gt;&gt; ~/. zshrc
echo -e 'if command -v pyenv 1&gt;/dev/null 2&gt;&amp;1; then\n  eval "$(pyenv init -)"\nfi' &gt;&gt; ~/. zshrc
source ~/. zshrc</code></pre><h3 id="h80bf773ca9">3-1. Pythonをインストール</h3><p>インストール可能なバージョンを確認します。</p><pre><code>pyenv install -l</code></pre><p>インストールしたいバージョンを指定して、インストールします。</p><pre><code>pyenv install 3.8.5</code></pre><p>インストールされているバージョンを確認します。</p><pre><code>pyenv versions</code></pre><p>使用するバージョンを指定します。</p><pre><code>pyenv global 3.8.5</code></pre><p><br></p>

【Mac】CatalinaにPythonをインストールする

<p><span style="color:#000000">この記事は前ブログに投稿(2020/6/15)したものです。</span><br></p><h1 id="h6a3ebfb03e">エラー Related Field got invalid lookup: が出た</h1><p><br></p><h2 id="h9c1f22bd6d">原因</h2><p>.filterでは複数のオブジェクトを取ってくることを想定している為、pkやslugは入らないらしい。<br></p><h1 id="h5e56efe3ac">発生状況</h1><h2 id="h361fd99869">テーブル</h2><p>Authors：著者 複数のbooksを持つ。 Books：本 一つの著者を持つ。</p><h2 id="he7967d0922">models.py</h2><pre><code>class Authors(models.Model):
    name = models.CharField(max_length=255)
    slug = models.SlugField(unique=True, max_length=255)

class Books(models.Model):
    title = models.CharField(max_length=255)
    author = models.ForeignKey(Authors, on_delete=models.PROTECT)</code></pre><h2 id="h61045f6ed6">views.py</h2><pre><code>slug = 'dazai'
books = Books.objects.filter(author__slug=slug)</code></pre><p><br></p><h1 id="h141087ae17">解決法</h1><p>SlugFieldからCharFieldに変更する。</p>

【Django】.filter()でSlugFieldを指定した場合のエラー

<p>この記事は前ブログに投稿(2020/5/7)したものです。<br><br>入力された内容をトークルームに送信するLIFFアプリを作ろう<br></p><h2 id="hd0e9724409">HTML</h2><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;フォーム&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" /&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;input type="text" id="textbox"&gt;
    &lt;button id="sendmessagebutton"&gt;送信&lt;/button&gt;

    &lt;script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        liff.init({
            liffId: 'LIFFアプリのID'
        })
        .then(async () =&gt; {
            document.getElementById('sendmessagebutton').addEventListener('click', function () {
                const sendText = document.getElementById('textbox').value;
                liff.sendMessages([{
                    type: "text",
                    text: sendText
                }]).then(function () {
                    liff.closeWindow();
                }).catch(function (error) {
                    window.alert("メッセージの送信に失敗しました。");
                });
            })
        })

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p><br></p>

【LIFF】入力された内容をトークルームに送信するLIFFアプリを作る

<p>この記事は前ブログに投稿(2020/3/3)したものです。<br></p><h2 id="h8d027c8ed3">はじめに</h2><p>プロジェクトを作成すると、settings.pyにランダムな50文字のSECRET_KEYが生成される。</p><blockquote>SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = 'ランダムな50文字'</blockquote><p>シークレットキーは秘密にしてね！と言っているので、別ファイルに記述し、読み込む様に変更する。<br>これによってSECRET_KEYのみをGitの管理下から外す事ができる。<br></p><h2 id="hc57795ce2b">settings_local.pyを作成</h2><p>settings.pyと同じフォルダにsettings_local.pyを作成する。<br>ファイル名は任意なので、変えても良い。<br>settings.pyに記載されているSECRET_KEYの行をコピーし、settings_local.pyに貼り付ける。<br>settings.pyに記載されているSECRET_KEYの行は削除する。</p><pre><code>SECRET_KEY = 'ランダムな50文字'</code></pre><p><br></p><h2 id="h6baa878c2f">settings_local.pyを読み込む</h2><p>settings_local.pyを読み込む為に、settings.pyにコードを追加する。</p><pre><code>from .settings_local import *</code></pre><p>これでSECRET_KEYを別ファイルにし、読み込む事ができた。<br></p><h2 id="hb06efa883b">settings_local.pyをGitの管理外に設定する</h2><p>プロジェクトフォルダ直下に.gitignoreという名前でファイルを作成する。<br>.gitignoreにsettings_local.pyを追加する。</p>

【Django】SECRET_KEYをGitで管理しない様に、別ファイルから読み込む

<p>この記事は前ブログに投稿(2020/3/2)したものです。</p><h2 id="hbe10bea12e"><br>プロジェクトの作成</h2><pre><code>django-admin startproject プロジェクト名</code></pre><p><br></p><h2 id="h4c7b2b4a64">アプリケーションの作成</h2><pre><code>python3 manage.py startapp アプリケーション名</code></pre><p><br></p><h2 id="h50ab959c9f">モデルをDBに反映させる</h2><p>変更差分を検知するマイグレーションファイルを作成</p><pre><code>python3 manage.py makemigrations</code></pre><p>作成したマイグレーションファイルの変更内容をデータベースに反映</p><pre><code>python3 manage.py migrate</code></pre><p><br></p><h2 id="h401eceb7dd">開発用サーバを立ち上げる</h2><pre><code>python3 manage.py runserver 0.0.0.0:8000</code></pre><p><br></p><h2 id="h39edd9c2a8">静的ファイルを集める</h2><pre><code>python3 manage.py collectstatic</code></pre>

Djangoで開発するときによく使うコマンド

<p>この記事は前ブログに投稿(2020/3/2)したものです。<br><br>初めまして。<br>Tachibanaです。<br><br>技術ブログみたいなことを、していきたいと思います。</p>

ブログを開設しました。

TypeScript

Next.js

Tailwind CSS

Supabase

Ketchuple

ブラウザで動作するオンラインのメモ帳

React

Vite

Chakra UI

Browser Notepad

DAZNでサイドバーの表示・非表示を切り替えるChrome拡張機能

JavaScript

dazn-sidebar-switch

Electron

Image Converter

ワードとサービスを保存しておき、1Tapで検索することのできるアプリ

Timeline

2023