Pythonista3でWeb APIを取得するアプリを作ってみる

前回のブログ(Pythonでrequestsを使ってWEB APIのデータを取得する)で、Pythonを使って天気予報のWeb APIからデータを取得する方法を試しました。

今回は、前回作ったプログラムを使用して、天気予報を取得するGUIを作ってみることにします。

せっかくなので、1,200円で購入したものの全然使いこなせていないiPhone・iPad用のアプリ、Pythonista3を使って天気予報を取得するアプリを作ってみることにしました。


Pythonista3とは

Pythonista3とは、iPhoneやiPadでPythonのプログラムを書いて実行することができるという優れもののアプリです。

ちゃんと使いこなせば、自分用の便利ツールを作ったり、iPhoneだけでオリジナルゲームを作ることもできます。

僕は全然使いこなせていないので、もっぱら電車やバスでPythonの勉強をしている時に、ちょっとしたコードを試すといった使い方をしています。

いつでもどこでもPythonの勉強ができるので、お気に入りのアプリの一つです。



完成イメージ

今回作るのは、ボタンをタップすると東京の今日の天気を表示するという、とても
シンプルなアプリ(?)です。

作成にはiPhoneを使い、天気予報の取得には、前回も使わせてもらったlivedoorのWeather Hacksのお天気ウェブサービスを使わせてもらいます。


完成イメージ図
完成イメージ

作成方法

作成のおおまかな流れは以下のような感じです。


  1. UIを作る
  2. コードを書く
  3. アイコンを設置する
作成には、Pythonista3の公式ドキュメントやExampleコードが参考になります。

それでは、さっそくアプリを作成していくことにします。

フォルダとファイルの作成

まずはPythonistaに適当なフォルダを作成します。
今回はTestというフォルダを作成しました。

次にTestフォルダ内で画面左下の+ボタンをタップします。


Pythonistaのイメージ01


+をタップすると、フォルダや作成するファイルを選ぶことができます。

ここでScript with UIをタップして名前を入力すると、Pythonのスクリプトを作るファイルとUIを作るためのファイルが作成されます。


Pythonistaのイメージ02


名前をapi_testと入力したので、api_test.pyとapi_test.pyuiという2つのファイルが作られました。

ここからは、api_test.pyuiを使ってUIを作っていきます。

UIの作成

Pythonistaのイメージ03


まずは、①のUntitledとかかれている部分をタップし、タイトルを入力します。

次に②の部分で画面の大きさを調整します。

③の+をタップするとUIに設置できるオブジェクトの一覧が表示されます。

Pythonistaのイメージ04

この中にあるLabelとButtonというツールを使います。

ツールを選ぶと、UIに設置できるようになるので大きさを調節します。

設置したツールをタップして選択した状態で右上のiをタップするとツールの設定画面になります。


Pythonistaのイメージ05

今回は、Labelを2つとボタンを1つ設置します。

ラベルの設定

1つ目のLabelはTextを「今日」にします。
2つ目のLabelはTextに何も表示せず、Borderのwidthを1にしてラベルに縁を作ります。

2つのラベルはどちらもAlignmentで中央に表示にしておきます。

ボタンの設定

ボタンはTitleを「更新」にします。これでボタンに「更新」と表示されるようになります。

Tint Colorでボタンの色を設定し、BorderのRadiusの値を調整してボタンの角を丸くします。


Pythonistaのイメージ06

ここまでの設定で上図のようなUIとなります。

プログラムの作成

ここからは、Web APIから天気予報を取得し、UIに表示するプログラムを作っていきます。

さきほど作ったapi_test.pyというファイルを開きます。


import ui

v = ui.load_view()
v.present('sheet')


api_test.pyを開くと元々3行ほどコードが書かれています。
この3行は、PythonistaでUIを使うのに必要なコードです。

ここに他のコードを追加していきます。


import requests
import ui

def button_tap(sender):
        api_url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=130010'
    
        weather_data = requests.get(api_url).json()
        weather_data = weather_data['forecasts'][0]['telop']
    
        text_field = sender.superview['label2']
        text_field.text = weather_data

v = ui.load_view()
v.present('sheet')


Pythonista3には初めからrequestsライブラリがインストールされているので、そのままimportすることができます。

次にbutton_tapという関数を作り、UIに設置したボタンがタップされた時の処理を記述します。

前半のapi_urlとweather_dataの部分は、前回と同じようにWeather Hacksから天気予報を取得する部分です。

前回との違いは、3日分取得していたのを今日の分だけにしたことです。

text_fieldから始まる2行に、UIで設置したlabel2にAPIで取得したデータを表示する指示を記述しています。

プログラムの記述は以上です。



ここで、一度UIの設定画面に戻り、ボタンを選択した状態で右上のiをタップして、ボタンのタップでbutton_tapの関数が呼び出されるようにします。

ボタンの設定画面にある、Actionにbutton_tapと記述します。これで、ボタンのタップでbutton_tapが呼び出せるようになりました。

この状態でapi_test.pyに戻り、画面上部の再生ボタンをタップするとUIが起動します。
更新ボタンをタップすると今日の天気予報が表示されるようになっています。

次はアイコンの設置です。

アイコンの設置

アイコンの設置は画面上部のレンチマークから行います。

Pythonistaのイメージ07

レンチマークをタップ後に表示される画面で、HomeScreenをタップするとアイコンの設定画面が開くので、Run Scriptにチェックが付いていることを確認したら、好きなアイコンや色を選び、画面右上のContinueボタンをタップします。

すると画面がサファリに切り替わるので、画面に表示される指示通り共有ボタンからホーム画面に追加を選びます。

Pythonistaのイメージ08

これで、ホーム画面から作成したUIを呼び出して天気予報を取得できるようになりました。


以上、今回はここまで。

作成したのは簡単なプログラムですが、アプリを作っているようで楽しかったです。

なによりiPhoneだけでできちゃうのが気軽でいいですね。

これからももっとPythonista3をいじっていこうと思います。

0 件のコメント :