<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 &#x27;package:flutter&#x2F;material.dart&#x27;;
import &#x27;package:flutter_markdown&#x2F;flutter_markdown.dart&#x27;;

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

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

final String markdownText = &#x27;&#x27;&#x27;
# 見出し1
hoge

## 見出し2
fuga

### 見出し3
piyo 
&#x27;&#x27;&#x27;</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:&#x2F;&#x2F;www.cyberagent.co.jp&#x2F;way&#x2F;features&#x2F;list&#x2F;detail&#x2F;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:&#x2F;&#x2F;atraetech.hatenablog.com&#x2F;entry&#x2F;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:&#x2F;&#x2F;note.com&#x2F;yamarkz&#x2F;n&#x2F;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:&#x2F;&#x2F;blog.giftee.dev&#x2F;2021-01-12-rebuild-app-with-flutter&#x2F;</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:&#x2F;&#x2F;type.jp&#x2F;et&#x2F;feature&#x2F;15075&#x2F;</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:&#x2F;&#x2F;speakerdeck.com&#x2F;osamtimizer&#x2F;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:&#x2F;&#x2F;speakerdeck.com&#x2F;rtechkouhou&#x2F;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:&#x2F;&#x2F;speakerdeck.com&#x2F;yagitatsu&#x2F;chompytefluttercai-yong-sita-zhen-rifan-ri</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 &quot;react-share&quot;;</code></pre><p><br>後は設置したい箇所に、下記のように記載するだけです。</p><pre><code>&lt;TwitterShareButton url=&quot;https:&#x2F;&#x2F;prism-cube.com&quot; title=&quot;ページタイトル&quot;&gt;
　　&lt;TwitterIcon size={30} round={true} &#x2F;&gt;
&lt;&#x2F;TwitterShareButton&gt;

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

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

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

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

<h2 id="hfa66ac9b59">aspidaを導入</h2><h3 id="hd8d793506b">インストール</h3><pre><code>yarn add @aspida&#x2F;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&#x2F;types&#x2F;api.ts</p><pre><code>export type ContentsResponse&lt;T&gt; = {
 contents: T[];
 totalCount: number;
 offset: number;
 limit: number;
};
 
export type ContentResponse&lt;T&gt; = {
 id: string;
 createdAt: string;
 updatedAt: string;
 publishedAt: string;
 revisedAt: string;
} &amp; T;
 
export type ContentsQuery = {
 draftKey?: string;
 offset?: number;
 limit?: number;
 orders?: string;
 q?: string;
 fields?: string;
 ids?: string;
 filters?: string;
 depth?: number;
};
 
export type ContentQuery = {
 draftKey?: string;
 fields?: string;
 depth?: number;
};</code></pre><p><br></p><h3 id="hcd4e76d427">Articles</h3><p>記事用のレスポンスの型を作成します。<br><br>src&#x2F;types&#x2F;article.ts</p><pre><code>import { ContentsResponse } from &quot;.&#x2F;api&quot;;
import { TagResponse } from &quot;.&#x2F;tag&quot;;
import { ImageResponse } from &quot;.&#x2F;image&quot;;
 
export type ArticlesResponse = ContentsResponse&lt;ArticleResponse&gt;;
 
export type ArticleResponse = ContentResponse&lt;{
 title?: string;
 body?: string;
 tags?: TagResponse[];
 image?: ImageResponse;
}&gt;;</code></pre><p><br>タグと画像用の型も作成します。<br><br>src&#x2F;types&#x2F;tag.ts</p><pre><code>import { ContentResponse, ContentsResponse } from &quot;.&#x2F;api&quot;;
import { ImageResponse } from &quot;.&#x2F;image&quot;;
 
export type TagsResponse = ContentsResponse&lt;TagResponse&gt;;
 
export type TagResponse = ContentResponse&lt;{
 name?: string;
 image?: ImageResponse;
}&gt;;

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

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

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

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

foreach (var itemList in itemListList)
{
  Console.WriteLine(&quot;hoge&quot;);
  foreach (var item in itemList)
  {
    Console.WriteLine(item);
  }
  Console.WriteLine(&quot;fuga&quot;);
}</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 &#x2F; separateCount).Select(g =&gt; g.Select(x =&gt; x.v).ToList()).ToList();</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&#x2F;7&#x2F;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>&#x2F;bin&#x2F;bash -c &quot;$(curl -fsSL https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;Homebrew&#x2F;install&#x2F;master&#x2F;install.sh)&quot;</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="h9e364eda10">2-3-1. &#x2F;bin&#x2F;bashと表示された場合</h3><p>&#x2F;bin&#x2F;bashと表示された場合は、下記をターミナルに貼り付けて実行してください。</p><pre><code>echo &#x27;export PYENV_ROOT=&quot;$HOME&#x2F;.pyenv&quot;&#x27; &gt;&gt; ~&#x2F;.bash_profile
echo &#x27;export PATH=&quot;$PYENV_ROOT&#x2F;bin:$PATH&quot;&#x27; &gt;&gt; ~&#x2F;.bash_profile
echo -e &#x27;if command -v pyenv 1&gt;&#x2F;dev&#x2F;null 2&gt;&amp;1; then\n  eval &quot;$(pyenv init -)&quot;\nfi&#x27; &gt;&gt; ~&#x2F;.bash_profile
source ~&#x2F;.bash_profile</code></pre><h3 id="h7273d6b98a">2-3-2. &#x2F;bin&#x2F;zshと表示された場合</h3><p>&#x2F;bin&#x2F;zshと表示された場合は、下記をターミナルに貼り付けて実行してください。</p><pre><code>echo &#x27;export PYENV_ROOT=&quot;$HOME&#x2F;.pyenv&quot;&#x27; &gt;&gt; ~&#x2F;. zshrc
echo &#x27;export PATH=&quot;$PYENV_ROOT&#x2F;bin:$PATH&quot;&#x27; &gt;&gt; ~&#x2F;. zshrc
echo -e &#x27;if command -v pyenv 1&gt;&#x2F;dev&#x2F;null 2&gt;&amp;1; then\n  eval &quot;$(pyenv init -)&quot;\nfi&#x27; &gt;&gt; ~&#x2F;. zshrc
source ~&#x2F;. 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&#x2F;6&#x2F;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 = &#x27;dazai&#x27;
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&#x2F;5&#x2F;7)したものです。<br><br>入力された内容をトークルームに送信するLIFFアプリを作ろう<br></p><h2 id="hd0e9724409">HTML</h2><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;フォーム&lt;&#x2F;title&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;link href=&quot;https:&#x2F;&#x2F;fonts.googleapis.com&#x2F;earlyaccess&#x2F;notosansjapanese.css&quot; rel=&quot;stylesheet&quot; &#x2F;&gt;
&lt;&#x2F;head&gt;

&lt;body&gt;
    &lt;input type=&quot;text&quot; id=&quot;textbox&quot;&gt;
    &lt;button id=&quot;sendmessagebutton&quot;&gt;送信&lt;&#x2F;button&gt;

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

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

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

<p>この記事は前ブログに投稿(2020&#x2F;3&#x2F;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 = &#x27;ランダムな50文字&#x27;</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 = &#x27;ランダムな50文字&#x27;</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>

PrismCube