思索的逍遥の記。

いろいろな考え事。

Pythonista 3 で Google 翻訳を使いやすく (1) UI を設定する

モチベーション

Pythonista 3 は高機能な iOS 向け Python 開発環境。

Pythonista 3

Pythonista 3

  • omz:software
  • 仕事効率化
  • ¥1,220

しかし、ダウンロードしたはいいものの、使い方や使い道がいまいちピンと来ていなかった。

そこで、他の方がこれまでどんなものを作ってきたのか調べてみた。

なるほど、便利そう。

プログラミングに関する情報をググるとき、少なからず海外サイトを巡ることになるので、アプリの切り替えの手間が省けるのはとても助かる(ただ、複数アプリを画面に並べられる iPad では、普通にブラウザと Google 翻訳アプリを並べるだろう)。

まずは上の記事を参考に、ほぼ同じものを作ってみたが、次の点で欲が出始めた。

  • 画面を上下分割すると、ソフトウェアキーボードが出た時に下半分が完全に見えなくなる(コピペのために上下を行ったり来たりしたい時に不便)
  • リンクの貼り付け・移動にも対応したい
  • どうせなら、ブラウザの共有メニューから Python スクリプトを起動したい

これらを踏まえて、自分なりにプログラムに改善を加えてみた。コード全体はこちら(スクロールで全体が見られます)。

The script for switching two WebViews on Pythonist ...

スクリプトの使用イメージ

完成品の使用イメージはこんな感じ。

Image from Gyazo

ブラウザの共有メニューから iOS のショートカットアプリを経由して、Pythonista に URL を渡しつつ起動する。これをどう実現したのかを解説していきたい。今回は UI の構築方法に焦点を当てる。

.pyui ファイルに UI 設定を入れる

Gist のコードでわかるように、.pyui ファイルは json 形式になっているが、Pythonista のアプリ上では専用のエディタが起動するので、項目ごとに入力して行くと良いだろう( json の key / value が編集画面の項目 / 設定値に対応している)。

全体的なレイアウトは次のような感じ。上の+ボタンで各ウィジェットを追加でき、ドラッグで大まかな位置に配置する。位置や大きさの微調整は i ボタンで表示される入力画面で数値入力することで行える。

WebView が webview2 の1つしかないように見えるが、webview1 がこの裏にあり、ボタン(SegmentedControl、ここでは「サイトビュー | Google翻訳」という表示)で最前面に出る WebView を切り替えている。次の編集画面を見れば、2つの WebView が同じ座標にあるのがわかる。

webview1

webview2

これで、ソフトウェアキーボードに画面下半分が隠れる問題は解消された。また、リンクを表示・編集するためのテキストフィールド、WebView の履歴を進めたり戻ったりするためのボタンも追加している。

これら以外にもいろいろなウィジェットが存在する。詳しくは Pythonista 公式のドキュメントを参照。

ここまで準備できたら、見栄えは完成である。このあとは、この .pyui ファイル を Python スクリプトで呼び出し、各ウィジェットに関数を紐付けていく。記事が長くなったので、その解説は次回にしようと思う。