【簡単】pythonコードをwordpressに埋め込み・実行・編集までできるツール

【簡単】pythonコードをwordpressに埋め込み・実行・編集までできるツール

このページではtrinket.ioというサービスを使い、pythonのコードを埋め込む方法を紹介します。

他のサイトでは「wordpress(php)からpythonを実行する」だったり、「ただ、コードを埋め込むのみ」で、実行まではしていません。

しかし、このサービスを使うことで以下のようなことができるようになります。コードの動きを示すのに最適なサービスだと思います。期待していたことができそうでなければ、他のサイトを参考にしてください。

  • pythonコードを簡単に貼り付け、実行、編集までできる。(HTMLに貼れば挿入されます。なのでwordpressはもちろん、他のサービスでも利用できます。)
  • pythonなら完全無料で利用できる。(2系、3系どちらもいけます。)
  • 基本的なモジュールが使用できる(matplotlib.pyplot, numpy, urllib.requestなど)

例:trinket.ioのサンプルです。「Run」ボタンを押すとロケットが現れます。その画像をクリックしてから、パソコンの矢印ボタンを使うとロケットが動きます。

コード編集とかいろいろいじってみてください。かなりいろいろなことができます。

trinket.ioに登録する

ちらからサイトにアクセスしてください。

右上のSign Upをクリックしてください。

Sign Upの方法が出てきます。ほとんどの方がgoogleかメールアドレスになると思います。自分の好きな方法で登録してください。

このような画面が出れば成功です!!!

コードをサイトに貼り付けるまで

早速コードをサイトに貼ってみましょう。ここでは、最低限の作業のみをします。カスタマイズは次の章で方法を紹介します。

1. コードを作成する

先ほどの画面から始めます。

  • 画面右上の鍵マークをクリック
  • New Trinketをクリック
  • Pythonをクリック

ちなみに緑色の鍵マークがついているものはは有料です。「Python3」も有料。。。ぽいですが、「Python」は2系と3系を同時に実行するみたいなので、3系も行けます。安心してください。

Python Version By default, this Trinket will try to run both Python 2 and 3 code. You can also enable strict Python 2 or Python 3 modes with a #!/bin/python2 or #!/bin/python3 shebang at the top of your trinket. Learn more here.

https://trinket.io/library/trinkets/create?lang=python

この画面が出てきます。

適当にコードを書いてみましょう。

セーブします。画面右上青色の「Save」をクリックしてください。名前は画面左上赤色の「Untitleed」をクリックすれば変えられます。

このような画面になります。右上が少し変わります。

2. サイトに貼り付ける

画面右上のShareからEmbedを選択してください。

URL部分をコピーしてください。

ここからはwordpressの作業です。

HTMLとして貼り付けてください。

実際に貼り付けた例:

これが基本的な使い方です。とても簡単に使えると思います。

trinket.ioをカスタマイズする

ここからはいろいろなカスタマイズ方法です。

1. コードに説明を付けたい。

この画面から始めます。

右上にある、Instructionsをクリックし、鉛筆マークをクリックしてください。ここで編集してください。

日本語も可能ですが、変換するたびに空白ができるのだけ気をつけてください。(OS・ブラウザによって違うと思います。)

変更が貼り付け先でも反映されています。(「実際に貼り付けた例:」のでも実は説明がついています。)

2. 表示をカスタマイズしたい

1. 大きさとか幅とか

貼り付けたコードをみてください。

  • width: 幅
  • height: 高さ

ここの値を変えてください。編集はcssと同じです。

2. コードの実行のみorコンソールのみの設定

この画面で、「Allow either Run or Interactive console」を選択すると他に選択肢が二つ出てきます。

それぞれを選択すると、初期の設定とは違い、「Run」か「console」どちらかしかできなくなります。

Run code only:

Interactive console only:

3. 結果のみを表示orコードと結果の切替

この画面で、「Show code and output side-by-side (~)」を選択すると他に選択肢が二つ出てきます。

それぞれを選択すると、初期の設定とは違い、コードの実行結果のみの表示orコードと実行結果を切り替えることができるようになります。

Only show output(~)

Only show code or output(~)(左上のcode|Runで切替可能)

2.3のそれぞれを組み合わせることで自分好みの表示ができます。

4. それ以外

この画面で二つチェックする箱があります。

それぞれにチェックすると以下のことが適用されます。

  • Auto run trinket when loaded(ロードされたら自動でrun)
  • Show instructions first when loaded(説明をはじめに表示)

まとめ

trinketの基本的な使い方は以上です。このサービスに気づいた時には本当に感動しました。

いろいろいじると使い方がわかっていくと思います。皆さんも是非trinket.ioを使ってくださいね!

関連記事

【失敗談アリ】テックアカデミーのAIコースを徹底レビューする

【失敗談アリ】テックアカデミーのAIコースを徹底レビューする

【Python】venv仮想環境を2ステップで作成・有効化する

【Python】venv仮想環境を2ステップで作成・有効化する

【無料】いろんなサイトの動画・音楽をダウンロードするアプリ作ったよ(python)

【無料】いろんなサイトの動画・音楽をダウンロードするアプリ作ったよ(python)

Javascript/Typescript(+react等)開発環境を簡単に構築するスクリプト作った

Javascript/Typescript(+react等)開発環境を簡単に構築するスクリプト作った

コメント

*

*