【WordPress】Cocoonの「吹き出し」トークを簡単に作るためのpython

一式鍵 — Wed, 25 Aug 2021 12:02:59 +0000

何でもかんでもめんどくさいと感じてしまう私ですが、別サイトでこういうコンテンツを作ったりしています。

エディットなんか召喚されたんだけど、ここはどこ？いま何年？カティアタシもよくわからないけど、なんか不思

「フキダシ」トーク、ダイアログのコンテンツなんですね。ところが、この吹き出しコンテンツ、作るのがすごくめんどくさい。ストレスフル。なにせ１文書くたびに吹き出し作ってまた一文書いて……というのを繰り返す必要があるので。修正したら変なところまで消えちゃうし、元に戻すのもめんどくさいし。で、結構イライラしてたんですね。でも、基本は話者１と話者２の繰り返しトーク。とりあえずは２人しか出てこないコンテンツ。であれば、なんかプログラム書けば一発じゃね？　という話。

python実行環境を作る
吹き出し用のアイコンとかを設定する
pythonでコードを書いてみる
完成形
原稿を準備する
python実行！
再び「投稿」→「新規作成」からの表示確認（プレビュー）

python実行環境を作る

まず、pythonの実行環境を作る必要があります。これ、書こうと思ったんですけど、既に他にいろんなページで書かれているのでありがたく参照させていただきます。ので、まずはこちらのサイトなどを参考にして、Visual Studio Code上にpython実行環境を作ってください。あ、他の環境でもOKです。pythonが動けば何でもいい。私はVSCodeでpython動作環境を完結させています。多分一番手軽なのでおすすめですよ。

吹き出し用のアイコンとかを設定する

さて、pythonできたら、次はCocoonの吹き出しにアイコンとか設定してください。「Cocoon設定」→「吹き出し」ページに入り、「新規追加」してください。こんなふうに。

左右に関しては、実はタグを一箇所いじるだけで変更できるんですが、ここではこのフキダシ位置で固定にします。

吹き出しが用意できたら、「投稿」→「新規追加」で新しいページを作ります。このページはタグを取得するためだけのページなので「公開」はしないでくださいね。

白いページが開いたら、ブロック追加で「クラシック」を選びます。

すると、こんなふうに「吹き出し」が選べるようになるので、今設定した「アイコンが左」の吹き出しを設定します。

ここまでできたら、上の画像の上の方にある「ブロックに変換」ボタンを押してHTMLを表示させます。下記の様に表示されますが、黄色でマークした部分は環境に合わせて変わります。

まず、↑のHTMLをどこかに保存しておいてください。

保存したら、一度↑のブロックを削除し、次に「アイコンが右側にある吹き出し」を出して同様にHTMLコードを保存します。準備はここまでで。

pythonでコードを書いてみる

次に、エディタで「fukidashi.py」とか適当な名前の.pyファイルを用意します。あ、文字コードは「UTF-8」ですよ。

以下、コードです。１行目については「読み込むテキストファイル名」を設定します。

f = open('talking.txt', 'r',encoding="utf-8")
datalist = f.readlines()
f.close()

次の行で、↑の方で保存した二種類のHTMLコードを使います。が、最後の

のところまでしか使いません。ここ注意。たとえばこんなふうになります。

l =('
エディット
')

r =('
カティ
')

そして、「閉じタグ」部分だけを変数に入れます。

finmark =('
')

出力ファイル名を設定します。ここでは「result.txt」としました。

fo = open('result.txt','a',encoding="utf-8")

そして以下はまんまコピペ。

for data in datalist:
    dArr = data.split(":")
    cName = dArr[0]
    cContent = dArr[1]
    outputText = ''
    if(cName == 'l'):
        outputText = l + cContent + finmark
    elif(cName == 'r'):
        outputText = r + cContent + finmark

    fo.write(outputText + '\n')

fo.close()

というわけで、私のファイルはこんなふうになっています。pythonはタブの入れ方も重要なのでこのままね。

完成形

ピンク背景のところが個人差の出てくる所です。

f = open('talking.txt', 'r',encoding="utf-8")
datalist = f.readlines()
f.close()

l =('
エディット')

r =('
カティ
')

finmark =('')

fo = open('result.txt','a',encoding="utf-8")

for data in datalist:
    dArr = data.split(":")
    cName = dArr[0]
    cContent = dArr[1]
    outputText = ''
    if(cName == 'l'):
        outputText = l + cContent + finmark
    elif(cName == 'r'):
        outputText = r + cContent + finmark
    fo.write(outputText + '\n')
fo.close()

原稿を準備する

↑で設定した「talking.txt」を作らないといけません。これはテキストファイルですが、文字コードはやっぱり「UTF-8」です。なお、talking.txtは、↑でつくったfukidashi.pyと同じフォルダに置きます。

中身はこんな感じ。

l:カティ、カティ
r:なんだい姉さん
l:思ったんだけど、どうしてここ私たちしかいないの？
r:多分アイコンが確保できないんだと思う
l:あいこん？？？
r:ああ、いやいや、こっちの話。
l:それはそうと、キリス・オヴェロニアって名前知ってる？
r:ん？　うん、知ってるけど。マリーたちの養子。
l:養子？　歌姫なの？

「l:」と「r:」が繰り返されているのが分かると思いますが、この「l」「r」がどの吹き出しを用いるかを決めています。また「:」（←半角）はpythonコードの中で区切り文字として使っているので、忘れずに入れてください。「l:せりふ」「r:せりふ」を繰り返すのです。これはいくら続いても構いません。pythonがいい感じにHTMLコードに変えてくれます。原稿ができたら保存します。

python実行！

ターミナルで「fukidashi.py」を保存しているディレクトリ（フォルダ）に移動してください。そして、「fukidashi.py」を実行します。すると、何食わぬ顔で処理が終了します。気になる人はprintでも仕込むと良いです。

すると、fukidashi.pyやtalking.txtと同じフォルダに「result.txt」が出てきます。

中身を見ると、こんなです（抜粋）


エディット
カティ、カティ

カティ
なんだい姉さん

エディット
思ったんだけど、どうしてここ私たちしかいないの？

カティ
多分アイコンが確保できないんだと思う

エディット
あいこん？？？

台詞のあとに改行いれて ”

“がきていますが、これは個人的な好み。改行とっぱらってもいいし。

とりあえずこの「result.txt」の中身を全部コピーします。

再び「投稿」→「新規作成」からの表示確認（プレビュー）

白い画面が開いたら、「カスタムHTML」ブロックを追加します。

こんなふうにコピペします。

これ、↑画像内の「プレビュー」だと上手く表示されません。ので、「公開」ボタンの横の「プレビュー」をしてみてください。

見てみると、この通り。

これで、１：１トークに関しては問題なくクリアできると思います。もちろんコードをちょっといじれば途中でキャラクターを変えたりすることも自由です。

これで長文トークも自由自在です。なお、トークの途中で改行を入れたい場合は「ああああ
いいいい」のように「br」タグを書けばOKです。なお、このコードはあくまで私が個人用に作ったものなので、例外処理的なものとか入れてませんし、なんならresult.txtの初期化処理もしていません。（なので、fukidashi.pyを実行するたびにresult.txtは手動で消してね(゜¬゜））

ものっそいざっくりしてますが、まぁヒントくらいになればいいかな。みたいな？

めんどくさいって思うのは大事なことですよ。

The post 【WordPress】Cocoonの「吹き出し」トークを簡単に作るためのpython first appeared on 文章で生きていく.

Cocoon | 文章で生きていく