ワードプレスで画像をアップロードすると「返答が正しい JSON レスポンスではありません。」

掲題の通り

ワードプレスというものをサーバーにインストールして、るんるん気分で画像をアップロードしようとしたところこんなエラーが、、、

エラーでググってみると色々と解決法はみつかる。パーマリンクを設定しなおすと治ったとか、、そのなかであーーなるほどって思ったがphp.iniのmax_execution_timeを設定しなおすというもの（デフォルトは30で60とかに修正する）でもこれでも治らず。

うちの環境はnginxなのでそっちの方面かなぁと調べているとどうやらphp.ini側の設定ではなくnginxのPOSTボディの大きさが原因であったみたい（デフォルトは1M）なのでclient_max_body_size が小さすぎるのが原因というエントリが見つかる。

www.bnote.net

あーーーなるほど、んで超小さい画像（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

ゲド戦記 テルーの唄 フルートで吹きました

掲題の通りです。

www.youtube.com

こちらがとても良くて一緒に吹いているうちに録音してみっかとなりました。

www.youtube.com

ゲド戦記についてはテルーの唄の録画を漁っているうちにエンディングの「時の唄」というのがあるらしく、そちらの方が楽曲としてはいい曲だなぁと。そのうちできればと思います。ちなみに♯が５つあって鬼のような楽譜だなぁと思いましたが。

和柄のコースターを作ってみました

こちら、きりたんのコースターを作り、だいたいコースターぐらいの大きさでのレザー彫刻についてわかってきた。

arcanum.hatenablog.com

それで今回は普通のコースターも作ってみようかと思う。と思ったのも実はまた皮コースターを安くしてるのを見つけたので購入してしまったのです。これに彫刻していきたいと思います。

ピンクはもうアレしかないでしょう！竹くわえたアレです。。。紺色はまぁ、、青海波がいいかな？黒はなんだろう、、、主人公の日輪刀が黒だから主人公の柄か？（なぜ鬼滅にこだわる？）夢が膨らみます。

原版を作る

さて、皮のコースターに押し付ける原版となるものを作ります。前回と同様にアクリルで作っていきます。

80mm*80mmの大きさの彫刻は今までの経験上１回あたり15〜20分と思われます、レザーに彫刻できるようにアクリル側の溝は0.5mm〜1mmは欲しいところなので複数回アクリル原版側に彫刻して溝を深くします。（予定では２回）

そのためだいたい１時間で最大４回ほど彫刻ができず、２種類ぐらいしかできないのかなと目算です。それで今回はピンクのコースターへの彫刻を中心に作っていきます。

データはこんな感じで。１つは80mm*80mmで、もう１つは異なる麻の葉を互い違いに４か所に押す感じです。

 んで、切ってきました。場所はまたFablab仙台です。

fablabsendai-flat.com

うん、なかなかいい具合です。右側の小さい方はデザインを作るときに気が付かなかったのですが模様が細かすぎですね。これレザーに刻印出るのでしょうか、、、不安ですね、、

これを保護シートを取って彫刻時に出た細かい粉を取るとこんな感じになります。

コースターへの彫刻

色々なサイトを見ているとこのように皮に押し付けて模様をつけるのも彫刻というみたいです。彫刻というとどうしても削ってというイメージでしたが面白いです。

実際にこれを使ってレザーに彫刻してみます。皮側には水を含ませてからこんな感じに作ってきた原版を上から押し付けます。このまま皮が乾くまで放置します（大体１時間ぐらい？）

出来ました。いい感じですね。

改善点があると言えば裏側に押し付けたときの模様がうつってしまう事でしょうか？裏側は使わないので特に問題ないと言えば問題ないのですが・・・

こんな感じに皮の裏側には緩衝材を挟むと良いみたいですね。

こちらは小さい方の彫刻。これを２回繰り返します。

できました。これは良いですね。

 ちなみに、、、気になっていたのですが今回は原版をアクリルで作成しましたが材質がMDFだとどうでしょう？アクリルの場合は80mm*80mmで大体17分前後でしたがMDFのい場合だと6分程度みたいですね、、、もし次に作るとしたらMDFでやってみましょう。。。

 さて、このコースターですがBOOTHで販売しています。よろしくお願いします。

arcanumjp.booth.pm

arcanumjp.booth.pm

Flutter LINE SDKをインストール

フフフ・・・こんな簡単なこともわからなかったので書き残しておくのですよ。

FlutterでAndroid/iOS両方のアプリを作りたいのですが、LINEログインをしたい。ということ。その組み込み方。よく読むと公式に書いてるんですけどね・・・

flutter_line_sdk 自身はこちらで開発されています。

github.com

が、、、こちらを読む限り関係ないのですね・・・インストール方法を読む限り、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 を検索すると出てきます。

pub.dev

検索された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アプリに戻ってきます。やったね！

LIFFのURLをたたくと何故かエラーになる

LIFFの画面から自分のサーバーにあるAPIを叩くとこんなエラーが出力・・・なんだろまたか？分からん・・・

30-Oct-2020 06:17:47.776 INFO [http-nio-8080-exec-7] org.apache.coyote.http11.Http11Processor.service Error parsing HTTP request header
 Note: further occurrences of HTTP request parsing errors will be logged at DEBUG level.
        java.lang.IllegalArgumentException: Invalid character found in the request target [/path/to/api?{%22userId%22:%XXXXXXXXXXXXXXXXXXXX%22}]. The valid characters are defined in RFC 7230 and RFC 3986
                at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:490)
                at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:261)
                at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
                at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:868)
                at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1590)
                at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
                at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
                at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
                at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
                at java.base/java.lang.Thread.run(Thread.java:834)

RFC 7230 and RFC 3986に準拠しなさいって？なんだろ？よく見るとLIFFの画面でAPIを叩いているが、APIの処理まで到達していない。ということはLIFF云々以前ではじかれているってことか・・・で、このキーワードで検索していったらこちらのブログ。7.0.76あたりからTomcatのURLに渡せるパラメータの判別が厳密になったらしい。

qiita.com

回避方法としては上記のエントリにも書いてますが、忘れないためこちらでも書いておきます。relaxedPathChars、relaxedQueryCharsを追加する。

    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
            redirectPort="8443"
            relaxedPathChars="[]|" relaxedQueryChars="[]|{}^\`"
            />

Nginxにきた特定のパスをAPサーバーに転送する

Nginxがポート80で受けているときに背後にTomcatなどAPサーバを立てたい時があると思います。
例えば8080ポートの場合は全部Tomcatが処理するみたいな。そういう場合です。一般的にはリバースプロキシというらしいです。

前提として/etc/nginx/nginx.confで inlucdeで以下が記載されているものとします。（インストールでデフォルトで設定されていると思います）

/etc/nginx/nginx.conf

http {
    ... 省略
    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;    <---- ここに設定を追加していきます

}

実際に /etc/nginx/sites-enabled/ に転送設定を追加します。以下、例です。

この例ではhogeファイルでhoge.arcanum.jpにきたリクエストを同一サーバ内の8080にあるhoge Webアプリに転送します。

/etc/nginx/sites-enabled/hoge

server {
    listen 80;
    listen [::]:80;

    server_name hoge.arcanum.jp;

    location / {
        rewrite ^/(.+) $1 break;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://127.0.0.1:8080/hoge/$1$is_args$args;

    }
}

別のサブドメイン（例：fuga.arcanum.jp）を追加する場合は同様に新規にfugaファイルなどを作成し上記のような設定を記載すればいいです。

皮のコースター再び（きりたん）

先日、アクリルマグネットとかを作っているときにデータ作るの疲れたと散歩がてら近くのパンドラに行ったんですね。（パンドラは手芸専門店）ちなみに手芸専門店にムサイおっさんが一人で入るのは結構辛いものがありますね・・・そこで皮のコースター（無地）が安くなっていたのでまた何か作ってみようかと。

以前こちらで皮のコースターは作ったのですが、その時は心底やりたくないと思ったものでした。が、前回は皮の縫製もやったのに対し、今回は既製品のコースターに絵を押すだけです、、

arcanum.hatenablog.com

模様を押す方法はこちらで一度やっています。超簡単ですね。

arcanum.hatenablog.com

早速データを作ります。今回はきりたんと何か違うものを、、、とずん子さんの「ず」の字、あとは、、、MSXのマークでも作っておくか！

なかなかいい具合ですね。一つ10分ぐらいの彫刻ってところでしょうか。それで彫刻してきました。実は前回のエントリで印刷に行ったときに彫刻していたのですね・・・

これ・・・右側にいたのですね、、、彫刻パワー55％で２回ほど彫刻してます。それでだいたい1mmぐらい彫刻になります。

これを保護シート取って綺麗にします。彫りがいつもより深いです。

これを皮を一旦水に浸けてアクリルを押し付けながら型を定着させます。拷問きりたん、、、「ぎりたん誕生」

arcanum.hatenablog.com

出来たのがこちら。押した型は１年以上は持ちます。が、、、慌てて雑に押し付けたのでクランプで押し付けた部分はよく出ていますが、離れた部分（頭のてっぺんとか、服の部分とか）はあまりうまく出てないですね。（写真では見えないだけですが薄く出ています）

さて、他のものも、、、ん？ずん子さんの「ず」は反対に彫刻してないじゃないですか！しかもMSXももも！Σ（・□・；）これじゃ使えない orz...

気を取り直してもう一回きりたん押してみます。クランプが足りないとなりもう少し足して押してみます。本当は全体に押せるように大きいクランプがいいのですが、、一般家庭にそんな代物はありません。拷問きりたん、、、「ぎりぎりたんリボーン！」

 今度は良いようですね。

 こんな風に押せました。

こちら、３枚を失敗品をおまけして計４枚で販売しています。

追記：嫁ぎ先が決まりました。ありがとうございます。

arcanumjp.booth.pm