5374のnuxt版触ってみた
さて無職で何もすることがないと言うところに仙台のランドマークこと小泉さんが5374のNuxt版を作ったとのことでちょっとだけ触ってみた。正直僕はNuxtなに？って状態なのだが、、、
5374プロジェクト自身はこちら
今回の5374Nuxt版のリポジトリはこちら。
オリジナルの5374プロジェクトはもともとUI部分にjQueryを使っていたのですが、もうjQueryオワコン！とのことでトレンドであるVue, Nuxtで構築したとのこと。Vueは以前業務でシステム１つスクラッチで作った際に使ったことがあったので知っているがNuxtって何よ！
Vueそのものがクライアントサイド（ブラウザ上）でUIを構築するフレームワークなのですが、この構築する部分をサーバー側で行うというのがNuxtの特徴みたいです。Vueを使ったSPAはたまに一瞬UI構築の時間がありイラっとさせられますがサーバー上で構築して返すため高速で表示する（ように見える）ことができます。サーバーサイド上で描画を行うのでSEO上でも完全に描画されたDOMを解析できると言う利点があります。またVueを使う際、用途に応じてルーティングなどのパッケージが色々ありますが、Nuxtを使うと初めから入っているので楽なんでしょうね。
Nuxtで構築されたサービスといえば例えばnoteなんかですね。
さてさわりしか知らない僕の解釈はこの辺にして実際に動かしてみたいと思います。githubのドキュメントを見るにこれしか書いていない。とりあえずこれでローカルホストで動く環境ができるみたいですね。
# install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev
yarnってなんだよ！yarnって！！最近初めに覚えるのが多くてやーん！って嫌になっちゃうっすよ！おっさんに学習は苦痛なのです。yarnはJsで使うパッケージなどの依存関係を管理するもので、package.jsonに記述された依存関係にしたがってローカルにキャッシュして管理します。最近のJsを使ったものは古式ゆかしくライブラリを自分でダウンロードしてリンク張って依存関係を管理するんじゃなくてもうMavenみたいに依存関係の管理は人間がせずにソフトに任せるってのが主流みたいですね。楽になったもんだ。
yarnはnode.js上で動きますので次のコマンドは、node.jsをインストール後、yarnのインストールが前提となっています。ちなみに自分の端末のyarnは1.22.1です。
$ yarn -v 1.22.1
んで、、yarn installでyarn devでとりあえず環境ができるみたい。やーん！エラーちょっと出るけどとりあえずlocalhost:3000で動きます。終了！
$ yarn install yarn install v1.22.1 info No lockfile found. [1/4] 🔍 Resolving packages... warning bootstrap-vue > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 warning nuxt > @nuxt/webpack > @nuxt/babel-preset-app > core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning " > bootstrap@4.5.3" has unmet peer dependency "jquery@1.9.1 - 3". warning " > bootstrap@4.5.3" has unmet peer dependency "popper.js@^1.16.1". [4/4] 🔨 Building fresh packages... success Saved lockfile. warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.22.1". info To upgrade, run the following command: $ brew upgrade yarn ✨ Done in 43.50s.
$ yarn dev yarn run v1.22.1 $ nuxt WARN mode option is deprecated. You can safely remove it from nuxt.config 18:18:14 ℹ NuxtJS collects completely anonymous data about usage. 18:18:15 This will help us improving Nuxt developer experience over the time. Read more on https://git.io/nuxt-telemetry ? Are you interested in participation? Yes ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.14.11 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ ℹ Preparing project for development 18:18:26 ℹ Initial build may take a while 18:18:26 ✔ Builder initialized 18:18:26 ✔ Nuxt files generated 18:18:26 ℹ Starting type checking service... ・・・後略
動かしてみてこのケースの場合UI構築がサーバーで動くってことで、Webサーバーは何が動いているんだろうとかふと疑問はあるのだがまぁ、、、今回は動かすのが目的なのでそっと閉じる・・・
松前漬けつくった
カミさんが塩数の子を買ってきたので、「お？正月近いしまめ数の子でも作るのか？」と思っていた。まめ数の子ってのは、こんな感じにひたし豆と数の子をあえて作る料理なんだけど正月の定番料理
と思っている所に数の子自由に使っていいよ！みたいに言われてしまった・・・あぁ、俺がかずのこ好きだから買ってきてくれたのか・・・いいやつだ・・・と思いつつ、そういえばイカニンジン作りたいなぁって思っていた所だったので、この数の子入れて松前漬けにしましょうと。以下メモ。しょうもない俺しか分からん感覚メモ。多分誰にも分からん文章だと思う( ´艸｀)
塩数の子はボウルにちょいと薄い塩水入れて数の子入れて12時間放置。その間何度か塩水を交換すると良いらしい。
味付けは、日本って言ったらこれよ！って感じで、砂糖、醤油、水、出汁の素、酒、みりん、をドバドバっと入れて酒を飛ばして材料混ぜて終わり。あ、ニンジンは千切りした後塩をパパっと振ってもぎゅもぎゅっとしんなりするまでやってから混ぜるのね。味付けのポイントは、甘み強く、酒をちょっと多めに入れて酒特有の味を出す。市販の子持ちメカブのあの甘くてほわんとした味付けを目指そう。
もう誰にも参考にもならん文章でした（未来の僕へ）
雑感：カルタゴ農法という揶揄
先日除草に塩を使ったとうツイートが話題になっていた。
塩まいたらガッツリ枯れた👏
— エリック🌺ゆるニート大家 (@eric7blog) 2020年11月22日
クレベアさん(@Crazybe99325409)教えてくれてありがとー！！
塩くっそ安い pic.twitter.com/O57Jl4DlHF
塩まいたらガッツリ枯れた👏
クレベアさん(@Crazybe99325409)教えてくれてありがとー！！
塩くっそ安い pic.twitter.com/O57Jl4DlHF
上記は多分ツイート主が連投でツイートへの返信と対応策などを書いているため削除と言う最悪の手はやらないだろうと思うけど引用でも残しています。（別にこのエントリは彼を糾弾するものではありません、単にTwitterというサービスの継続性の問題があるので引用残してるだけです）
先のツイートについては沢山の方が引用RTやらリプライやらで土地に塩を撒いた場合の影響、危険性を書いていて、そうだよなぁと自分も読んでいました。
こういった土地に塩をまく行為はからカルタゴが第三次ポエニ戦争後にローマによって滅ぼされたときにカルタゴに塩をまいて作物が育たないようにした、という古事からカルタゴか！とかカルタゴ農法！みたいな揶揄がされてきましたが、このツイートの流れで知ったのが、カルタゴに塩は本当にまかれたか？というもの。
自分も以前カルタゴ関連の本を読んだときに内容として塩をまいたという内容が書いてあったのを覚えているので、カルタゴ農法的な揶揄というのは何という愚かな行為を！という感情を表していると思います。
ただ、偶然タイムラインに流れてきたもので目にしたこちらの連投を読んでいくと・・・
「カルタゴに塩はまかれていない」という端的な訂正の言説から、「塩は貴重なので呪いの儀式に少量が使われた」とか「伝承はあるが史実ではないという説がある」といった新たな誤解が生じていく様子が興味深いです…
— cuniculicavum (@cuniculicavum00) 2020年11月24日
これによると
- カルタゴに塩をまかれたという歴史的事実は確認されていない
- 当時、塩があったか？4,5世紀まで塩は文献では出てない
- あったとしても貴重だったろうしそんなものを大量に撒くか？（撒けるか？）
- どちらかというと宗教的儀式をおこなったのではないか？（但しその儀式には塩は使われない）
- 他地域の塩まきの逸話、事例に影響されて歴史の記述に紛れ込んだか？
など歴史家による考証が紹介され、結論としてカルタゴに塩はまかれていない可能性の方が高いというもの。Twitterバカ製造機とか色々言われるけどこういう面では本当に面白い。
上記の自分が読んだ本によるとカルタゴ自体は通商都市であって農作物は衛星都市からの年貢みたいなもので賄っていたはずだからカルタゴに塩まいても仕方がないよなぁ、、撒くなら小さい国カルタゴに率いられてきた衛星都市の広大な土地だよなぁと。なるほど儀式を行ってカルタゴの地が宗教的禁忌に指定されたというのがうなずかれます。
また、先の一連のツイートにあったリプで、こんな話も。
雑草駆除に塩云々の話で「カルタゴに塩を撒かれていなかった」について、大体の人がwikipediaを引用してるのはそれはそれでどうなんという感じになっている。
— 私はケントゥリオP。第十次ウソm@s祭り終了。 (@centurio_P) 2020年11月25日
これによると古来、塩は、土壌改良に生育効果、病害・虫害対策として古くから使用されてきた。例えばキャベツやナツメヤシなどは味が良くなるとも言っている。ただし、最新の注意が必要で使用方法、使用範囲を間違うと痩せた土地を更に痩せさせる、植物が全滅するなど難しい局面もあったようだ。現代では塩に変わるより良い肥料があるため塩を肥料として使用しなくなり、塩害についてのみがクローズアップされるようになったと言う事らしい。うーん、、、深い。
とすると今後、土地に塩を撒くという行為へカルタゴ農法か！という揶揄は上記の現代の歴史家の考証を知った上で使う必要がある、という事か、、、と思いました。土地に塩を撒いてはいけないという自分の常識が単なる無知の固執であった事が分かります。
この発端からの一連の流れによって得たもの、面白かった。
ワードプレスで画像をアップロードすると「返答が正しい JSON レスポンスではありません。」
掲題の通り
ワードプレスというものをサーバーにインストールして、るんるん気分で画像をアップロードしようとしたところこんなエラーが、、、
エラーでググってみると色々と解決法はみつかる。パーマリンクを設定しなおすと治ったとか、、そのなかであーーなるほどって思ったがphp.iniのmax_execution_timeを設定しなおすというもの（デフォルトは30で60とかに修正する）でもこれでも治らず。
うちの環境はnginxなのでそっちの方面かなぁと調べているとどうやらphp.ini側の設定ではなくnginxのPOSTボディの大きさが原因であったみたい（デフォルトは1M）なのでclient_max_body_size が小さすぎるのが原因というエントリが見つかる。
あーーーなるほど、んで超小さい画像（38バイトほど）の画像をアップロードすると正常にアップロードできるのが確認できた。そのためnginxのこのclient_max_body_size を10Mほどにして再度アプロードしてみたらできました。つかエラーメッセージが変じゃねの？
nginxのサイトごとの設定ファイル
21 server {
22 listen 80 default_server;
23 listen [::]:80 default_server;
24
25 client_max_body_size 10M; <--- これを追加
26
27 # SSL configuration
ゲド戦記 テルーの唄 フルートで吹きました
掲題の通りです。
こちらがとても良くて一緒に吹いているうちに録音してみっかとなりました。
ゲド戦記についてはテルーの唄の録画を漁っているうちにエンディングの「時の唄」というのがあるらしく、そちらの方が楽曲としてはいい曲だなぁと。そのうちできればと思います。ちなみに♯が５つあって鬼のような楽譜だなぁと思いましたが。
和柄のコースターを作ってみました
こちら、きりたんのコースターを作り、だいたいコースターぐらいの大きさでのレザー彫刻についてわかってきた。
それで今回は普通のコースターも作ってみようかと思う。と思ったのも実はまた皮コースターを安くしてるのを見つけたので購入してしまったのです。これに彫刻していきたいと思います。
ピンクはもうアレしかないでしょう！竹くわえたアレです。。。紺色はまぁ、、青海波がいいかな？黒はなんだろう、、、主人公の日輪刀が黒だから主人公の柄か？（なぜ鬼滅にこだわる？）夢が膨らみます。
原版を作る
さて、皮のコースターに押し付ける原版となるものを作ります。前回と同様にアクリルで作っていきます。
80mm*80mmの大きさの彫刻は今までの経験上１回あたり15〜20分と思われます、レザーに彫刻できるようにアクリル側の溝は0.5mm〜1mmは欲しいところなので複数回アクリル原版側に彫刻して溝を深くします。（予定では２回）
そのためだいたい１時間で最大４回ほど彫刻ができず、２種類ぐらいしかできないのかなと目算です。それで今回はピンクのコースターへの彫刻を中心に作っていきます。
データはこんな感じで。１つは80mm*80mmで、もう１つは異なる麻の葉を互い違いに４か所に押す感じです。
んで、切ってきました。場所はまたFablab仙台です。
うん、なかなかいい具合です。右側の小さい方はデザインを作るときに気が付かなかったのですが模様が細かすぎですね。これレザーに刻印出るのでしょうか、、、不安ですね、、
これを保護シートを取って彫刻時に出た細かい粉を取るとこんな感じになります。
コースターへの彫刻
色々なサイトを見ているとこのように皮に押し付けて模様をつけるのも彫刻というみたいです。彫刻というとどうしても削ってというイメージでしたが面白いです。
実際にこれを使ってレザーに彫刻してみます。皮側には水を含ませてからこんな感じに作ってきた原版を上から押し付けます。このまま皮が乾くまで放置します（大体１時間ぐらい？）
出来ました。いい感じですね。
改善点があると言えば裏側に押し付けたときの模様がうつってしまう事でしょうか？裏側は使わないので特に問題ないと言えば問題ないのですが・・・
こんな感じに皮の裏側には緩衝材を挟むと良いみたいですね。
こちらは小さい方の彫刻。これを２回繰り返します。
できました。これは良いですね。
ちなみに、、、気になっていたのですが今回は原版をアクリルで作成しましたが材質がMDFだとどうでしょう？アクリルの場合は80mm*80mmで大体17分前後でしたがMDFのい場合だと6分程度みたいですね、、、もし次に作るとしたらMDFでやってみましょう。。。
さて、このコースターですがBOOTHで販売しています。よろしくお願いします。
Flutter LINE SDKをインストール
フフフ・・・こんな簡単なこともわからなかったので書き残しておくのですよ。
FlutterでAndroid/iOS両方のアプリを作りたいのですが、LINEログインをしたい。ということ。その組み込み方。よく読むと公式に書いてるんですけどね・・・
flutter_line_sdk 自身はこちらで開発されています。
が、、、こちらを読む限り関係ないのですね・・・インストール方法を読む限り、pubspec.ymlに必要事項を記入しflutter pub getを実行すれば依存関係がダウンロードされるらしい。Mavenみたいですね。楽ちんです。初めどこかからかライブラリをダウンロードして自前でフォルダに入れるのかとか、化石みたいな事を思ってしまった僕はもう淘汰されるべき人間なのかもしれません。
1.Open the pubspec.yaml file in your app folder and, under dependencies, add flutter_line_sdk:. 2.Install it by running this in a terminal: flutter pub get
プラグイン自身はこちらで管理されているらしく・・・ここで flutter_line_sdk を検索すると出てきます。
検索されたflutter_line_sdkはこちらですね。
pub.dev
install自身は簡単で、プロジェクトのpubspec.ymlのdependenciesに以下を記載し、プロジェクトフォルダ内でflutter pub get を実行します。またはAndroid Studioを使っているのであればpubspec.ymlを開いているテキストエディタの右上に「pub get」ボタンがあるのでそれを押します。
dependencies: flutter_line_sdk: ^1.3.0 <----- これを追加
プロジェクト内を確認するとExternal Librariesに追加されてますね。
あとはLINE SDKを使うファイル内でインポートします。
import 'package:flutter_line_sdk/flutter_line_sdk.dart';
ここで一旦実行してみましょう。
あれ？エラーがでるぞ？minSdk を21以上にしろって。
Suggestion: use a compatible library with a minSdk of at most 16, or increase this project's minSdk version to at least 21, or use tools:overrideLibrary="com.linecorp.flutter_line_sdk" to force usage (may lead to runtime failures)
ということで、build.gradleのminSdkVersionの値を16->21にして実行してみます。
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "jp.arcanum.tomiya_gomi_app"
// minSdkVersion 16
minSdkVersion 21 <------------ ここ！
targetSdkVersion 29
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}とりあえずコンパイルは完了して実行はできたようです。
flutter_line_sdkのページをもう一回よく読むと前提に書いてますね。minSdkVersion set to 21 or higher って。こういう所はpubspec.ymlとかじゃなくて実際のプラットフォーム側の設定ファイルに書く必要があるのですね。
Prerequisites iOS 10.0 or later as the deployment target Android minSdkVersion set to 21 or higher (Android 5.0 or later) <----ここ！ LINE Login channel linked to your app
さて次に実際にログインしてみます。
サンプルコードを書き書きします。main関数でLineSDKのセットアップが必要なようです。ここでチャネルIDを指定してセットアップします。
void main() {
WidgetsFlutterBinding.ensureInitialized();
LineSDK.instance.setup('1234567890').then((_) {
print("LineSDK Prepared");
});
runApp(MyApp());
}
どこかのボタンとかのイベントでログインするコード。非同期的なコードが同期的に書けるようです。これは素晴らしい。
void _incrementCounter() async {
try {
final result = await LineSDK.instance.login();
setState(() {
print(result.userProfile.userId);
print(result.userProfile.displayName);
print(result.userProfile.pictureUrl);
print(result.userProfile.pictureUrlLarge);
print(result.userProfile.pictureUrlSmall);
print(result.userProfile.statusMessage);
});
}
on PlatformException catch(e) {
print(e);
}
}LINE Developer側でも設定が必要です。LINEログイン設定 の項目でAndroidであればパッケージを入力しておきます。
以下はFlutterのデモ画面にあるボタンに上記のログイン機能を組み込んでみました。右下のボタンをタップするとLINEログインします。
これはLINEアプリが入っていないシミュレーターなのでLINEのWebログイン画面が表示されます。LINEアプリが入っている端末の場合はLINEアプリでのログイン画面になります。
ID/PASS入力後こんな感じでアプリに権限を与えるかの画面が表示されますのでAllowを押します。押すとFlutterアプリに戻ってきます。やったね！
