フラスコメガチュートリアル、パート15：Ajax

これはシリーズの15番目の記事で、 Flaskマイクロフレームワークを使用してPython Webアプリケーションを作成した経験を説明しています。



このガイドの目的は、かなり機能的なマイクロブログアプリケーションを開発することです。オリジナリティが完全に欠如しているため、マイクロブログアプリケーションと呼ぶことにしました。







これは、国際化とローカリゼーションに関する最後の記事（I18nおよびL10n）であり、非英語圏ユーザー向けのマイクロブログアプリケーションの可用性を高める取り組みをまとめます。



この記事では、慣れ親しんだサーバー開発の「コンフォートゾーン」を離れ、サーバーコンポーネントとクライアントコンポーネントが同様に重要である機能に取り組み始めます。 一部のサイトがユーザーコンテンツの横に表示する「翻訳」ボタンを見たことがありますか？ これらのリンクは、コンテンツをリアルタイムでユーザーの母国語に自動的に翻訳します。 通常、オリジナルの下に翻訳されたコンテンツが挿入されます。 Googleは、このアプローチを外国語の検索結果、Facebook、および投稿に使用しています。 今日は、マイクロブログに同様の動作を追加します！

サーバー側と クライアント側

これまで従ってきた従来のクライアント/サーバー相互作用モデルでは、リクエストをサーバーに送信するクライアント（クライアントWebブラウザー）があります。 リクエストは単に「マイプロフィール」リンクをクリックした場合のようにWebページをリクエストするか、ユーザーがプロフィールを編集して「送信」をクリックした場合のようにサーバー上で何らかのアクションを実行できます。 タイプに関係なく、サーバーは新しいページをクライアントに直接送信するか、リダイレクトを介して送信することで、リクエストに応答します。 次に、ブラウザは現在のページを新しいページに置き換えます。 ユーザーがサイトにとどまっている限り、このサイクルが繰り返されます。 サーバーがページを生成するすべての作業を行うため、このモデルを「サーバー」と呼びますが、クライアントは受信したページを表示するだけです。



「クライアント」モデルでは、サーバーにリクエストを送信するブラウザーがまだあります。 サーバーは、「サーバー」モデルの使用時に発生したものと同様のページで応答しますが、すべてのデータがHTMLではなく、主にjavascriptのコードもあります。 クライアントがページを受信するとすぐに、クライアントはそれを表示し、ページの代わりに付属のコードを実行します。 これで、サーバーとの継続的な対話なしで動作できるアクティブなクライアントができました。 理想的な場合、アプリケーションは最初のロード時にクライアントにダウンロードされ、その後、ページを更新しなくてもクライアント上で起動して動作し、データを受信および保存するためだけにサーバーと対話します。 このタイプのアプリケーションは、 シングルページアプリケーションまたはSPAと呼ばれます。



ほとんどの実際のアプリケーションは、これら2つのアプローチの組み合わせです。 現時点では、アプリケーションは完全にサーバー上で実行されますが、今日はクライアント側にいくつかのロジックを追加します。 投稿をリアルタイムで翻訳するために、ブラウザーはサーバーにリクエストを送信しますが、サーバーはクライアント上でページを更新せずに翻訳されたテキストで応答します。 クライアントは、現在のページに翻訳を動的に追加します。 この手法はAjaxとして知られており、Asynchronous JavascriptとXMLの略です（今日ではXMLはしばしばJSONに置き換えられますが）。

カスタムコンテンツ翻訳

現時点では、Flask-Babelのおかげで、外国語のサポートはかなり良好です。 膨大な数の言語でアプリケーションを公開できます。あなたは私たちを助ける準備ができている翻訳者を見つける必要があります。



しかし、一瞬逃しました。 異なる言語を話すユーザーがアプリケーションを利用できるようにしたので、おそらく今、おそらく、異なる言語のレコードが国に表示されるようになります。 そして今、私たちのユーザーは、記録を見ているときに、彼らが理解していない言語の記録に遭遇する可能性があります。 自動翻訳機能を提供するのはいいことですよね？ 自動翻訳の品質はそれほど高くありませんが、ほとんどの場合、書かれた内容の意味を理解するだけで十分であるため、すべてのユーザー（私たちを含む）がそのような機能の恩恵を受けることができます。



この機能は、Ajaxで実装するのに理想的です。 メインページに異なる言語の複数の投稿が含まれているとします。 従来の方法で投稿の翻訳を実装した場合、投稿を翻訳するリクエストにより、現在のページが選択した投稿の翻訳を含む新しいページに置き換えられます。 読んだ後、ユーザーは「戻る」ボタンをクリックしてすべての投稿のリストに戻る必要があります。 実際には、翻訳後のリクエストは、ページ全体を更新するための重要なタスクではありません。 翻訳されたテキストを元の投稿テキストの下に単に挿入し、残りのコンテンツをそのまま残した方が良いでしょう。 したがって、今日は最初のAjaxサービスを実装しています！



自動翻訳を実装するには、いくつかの手順が必要です。 まず、翻訳する投稿の言語を決定する必要があります。 投稿の言語を知っていれば、ユーザーが選択した言語を知っているため、特定のユーザーに翻訳が必要かどうかを調べることができます。 翻訳が必要で、ユーザーがそれを表示したい場合は、サーバーで実行されるAjax翻訳サービスを使用します。 その結果、クライアント側のjavascriptは、投稿の翻訳をページに追加します。

投稿言語の定義

最初のタスクは、投稿のソース言語を決定することです。 言語を正確に決定することは常に可能であるとは限らないため、このために可能な限りのことをすべて実行しようとします。 この問題を解決するには、 guess-languageモジュールを使用します。 それではインストールしましょう。 LinuxおよびMac OS Xユーザー：

flask/bin/pip install guess-language
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Windowsユーザー：

 flask\Scripts\pip install guess-language
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このモジュールを使用して、各投稿のテキストをスキャンし、言語を決定しようとします。 なぜなら 同じ投稿を何度もスキャンする必要はありません。ユーザーが送信した投稿ごとにこれを1回行います。 次に、投稿言語情報と投稿自体をデータベースに保存します。



Postsテーブルに言語フィールドを追加しましょう。

 class Post(db.Model): __searchable__ = ['body'] id = db.Column(db.Integer, primary_key = True) body = db.Column(db.String(140)) timestamp = db.Column(db.DateTime) user_id = db.Column(db.Integer, db.ForeignKey('user.id')) language = db.Column(db.String(5))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データベースを変更するたびに、移行を忘れてはなりません。

 $ ./db_migrate.py New migration saved as microblog/db_repository/versions/005_migration.py Current database version: 5
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

投稿言語情報を保存する場所ができたので、新しい投稿を追加するプロセスに言語定義を追加しましょう。

 from guess_language import guessLanguage @app.route('/', methods = ['GET', 'POST']) @app.route('/index', methods = ['GET', 'POST']) @app.route('/index/<int:page>', methods = ['GET', 'POST']) @login_required def index(page = 1): form = PostForm() if form.validate_on_submit(): language = guessLanguage(form.post.data) if language == 'UNKNOWN' or len(language) > 5: language = '' post = Post(body = form.post.data, timestamp = datetime.utcnow(), author = g.user, language = language) db.session.add(post) db.session.commit() flash(gettext('Your post is now live!')) return redirect(url_for('index')) posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False) return render_template('index.html', title = 'Home', form = form, posts = posts)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

投稿の言語を見つけることができなかった場合、または予想外に長い結果が返された場合、言語フィールドに空の文字列を保存します。 これは、投稿の言語がわからないマーカーになります。

翻訳リンクを表示する

次のステップは、ユーザーが使用する言語（file app / templates / post.html）以外の言語で書かれた各投稿の「翻訳」リンクを表示することです：

 {% if post.language != None and post.language != '' and post.language != g.locale %} <div><a href="#">{{ _('Translate') }}</a></div> {% endif %}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これをpost.htmlテンプレートで行い、投稿を表示するすべてのページに翻訳機能を追加しました。 投稿の言語を特定でき、特定の言語がFlask-Babelのlocaleselector関数によって返され、g.localeからアクセスできる言語と異なる場合、「翻訳」リンクが表示されます。



このリンクには、新しいテキストである「Translate」という単語を追加する必要があります。これは翻訳ファイルに含める必要があります。 すぐに文字列を_（）関数でラップして、この文字列をFlask-Babel用にマークします。 この単語を翻訳するには、 前の記事で行ったように、言語リファレンス（tr_update.py）を更新し、poeditとコンパイルを使用して翻訳（tr_compile.py）する必要があります。



現時点では、翻訳を開始するために何をすべきかわからないため、現時点ではリンクはスタブになります。

翻訳サービス

先に進む前に、翻訳サービスを選択する必要があります。



翻訳サービスを提供するサービスは数多くありますが、残念ながら、それらのほとんどは有料であるか、かなりの制限があります。



2つの主要な翻訳サービスは、 Google TranslateとMicrosoft Translatorです。 どちらも有料ですが、Microsoftは少量の翻訳を含む無料のプランを提供しています。 Googleはこれまで無料翻訳を提供していましたが、提供していません。 これにより、サービスを選択しやすくなります。

Microsoft Translator Serviceを使用する

Microsoft Translatorを使用するための多くの要件があります。

• アプリケーション開発者は、Azure MarketplaceのMicrosoft Translatorアプリに登録する必要があります。 ここで、料金プランを選択できます（無料は一番下にあります）。
• 次に、開発者はアプリケーションを登録する必要があります 。 登録されたアプリケーションには、サービスにリクエストを送信するときに使用されるクライアントIDとクライアントシークレットコードが与えられます。

登録が完了した後、転送要求プロセスは次のとおりです。

• クライアントIDとシークレットを渡すことでアクセストークンを取得します 。
• 優先メソッド-Ajax 、 HTTPまたはSOAPを呼び出し 、アクセストークンと翻訳用のテキストを渡します。

実際には、実際よりも複雑に聞こえます。 詳細を説明することなく、すべての作業を実行し、テキストを別の言語（app / translate.pyファイル）に翻訳する関数を次に示します。

 import urllib, httplib import json from flask.ext.babel import gettext from config import MS_TRANSLATOR_CLIENT_ID, MS_TRANSLATOR_CLIENT_SECRET def microsoft_translate(text, sourceLang, destLang): if MS_TRANSLATOR_CLIENT_ID == "" or MS_TRANSLATOR_CLIENT_SECRET == "": return gettext('Error: translation service not configured.') try: # get access token params = urllib.urlencode({ 'client_id': MS_TRANSLATOR_CLIENT_ID, 'client_secret': MS_TRANSLATOR_CLIENT_SECRET, 'scope': 'http://api.microsofttranslator.com', 'grant_type': 'client_credentials' }) conn = httplib.HTTPSConnection("datamarket.accesscontrol.windows.net") conn.request("POST", "/v2/OAuth2-13", params) response = json.loads (conn.getresponse().read()) token = response[u'access_token'] # translate conn = httplib.HTTPConnection('api.microsofttranslator.com') params = { 'appId': 'Bearer ' + token, 'from': sourceLang, 'to': destLang, 'text': text.encode("utf-8") } conn.request("GET", '/V2/Ajax.svc/Translate?' + urllib.urlencode(params)) response = json.loads("{\"response\":" + conn.getresponse().read().decode('utf-8-sig') + "}") return response["response"] except: return gettext('Error: Unexpected error.')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は、構成ファイルから2つの新しい要素、Microsoftから提供されたIDとシークレットコード（config.pyファイル）をインポートします。

 # microsoft translation service MS_TRANSLATOR_CLIENT_ID = '' #    app id MS_TRANSLATOR_CLIENT_SECRET = '' #   secret
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サービスを使用するには、自分で登録し、これらの構成変数のデータを受信するアプリケーションを登録する必要があります。 マイクロブログをテストするだけの場合でも、登録する必要があります（無料です）。



新しいテキスト-エラーメッセージを追加しました。 ローカライズする必要があるため、tr_update.py、poedit、tr_compile.pyを再度実行して翻訳ファイルを更新します。

何かを翻訳しましょう！

では、翻訳サービスをどのように使用しますか？ 実際、それは簡単です。 以下に例を示します。

 $ flask/bin/python Python 2.6.8 (unknown, Jun 9 2012, 11:30:32) >>> from app import translate >>> translate.microsoft_translate('Hi, how are you today?', 'en', 'es') u'¿Hola, cómo estás hoy?'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サーバー上のAjax

これで、ある言語のテキストを別の言語に翻訳できます。 この機能をアプリケーションに統合する準備が整いました。



ユーザーが投稿の「翻訳」リンクをクリックすると、Ajaxリクエストがサーバーに送信されます。 この要求を送信する方法については後ほど説明しますが、今度はサーバー側の要求処理に焦点を当てましょう。



サーバー上のAjaxサービスは、HTMLページやリダイレクトの代わりに、通常はXMLまたはJSON形式のデータを返すという1つの違いがある通常のプレゼンテーション機能です 。 JSONはJavascriptにやや近いため、この形式（ファイルapp / views.py）を使用します。

 from flask import jsonify from translate import microsoft_translate @app.route('/translate', methods = ['POST']) @login_required def translate(): return jsonify({ 'text': microsoft_translate( request.form['text'], request.form['sourceLang'], request.form['destLang']) })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それほど新しいものはありません。 このビューはPOSTリクエストを処理します。POSTリクエストには、翻訳するテキストと、元の言語とテキストの翻訳先の言語のコードが含まれている必要があります。 これはPOSTリクエストであるため、request.form辞書を使用してHTMLフォームから送信されたかのようにこのデータにアクセスします。 このデータを使用して翻訳関数の1つを呼び出し、翻訳を受け取った後、Flask関数jsonify（）を使用して応答をJSONに変換します。 クライアントがリクエストへの回答として表示するデータは、次の形式になります。

 { "text": "<   >" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クライアント上のAjax

ここで、ブラウザーからAjaxビュー関数を呼び出す必要があるため、post.htmlテンプレートに戻り、以前に開始したことを完了します。



まず、投稿のテキストを一意のIDを持つspan要素で囲み、後でDOM（ファイルapp / templates / post.html）で簡単に見つけられるようにします。

 <p><strong><span id="post{{post.id}}">{{post.body}}</span></strong></p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

投稿IDを使用して一意のIDを作成したことに注意してください。 投稿のIDが3の場合、要素のIDはpost3になります。



また、翻訳が表示された後にこのリンクを非表示にできるように、一意のIDを持つ「翻訳」リンクをスパンに配置します。

 <div><span id="translation{{post.id}}"><a href="#">{{ _('Translate') }}</a></span></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記の例と同様に、翻訳リンクはidがtranslation3の要素にあります。

また、ユーザーの魅力と利便性を高めるために、翻訳プロセスがサーバーで実行されていることをユーザーに通知するアニメーションを追加します。 ページの読み込み後に非表示になり、翻訳中のみ表示され、一意のIDも持ちます。

 <img id="loading{{post.id}}" style="display: none" src="/static/img/loading.gif">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

だから今、私たちは持っています：

• 翻訳するテキストを含むpost <id>に等しいidを持つ要素、
• 「翻訳」リンクを含む翻訳<id>と等しいidを持つ要素で、後で翻訳されたテキストに置き換えられます
• そして、ロード中の<id>に等しいidの画像は、翻訳中に表示されます。

接尾辞<id>は、これらの要素を一意にします。 ページにはいくつでも投稿することができ、それらはすべてこれら3つの値の独自のセットを持ちます。



次に、「転送」リンクをクリックして、Ajaxにリクエストを送信する必要があります。 これを行うには、すべての作業を実行するJavascript関数を作成します。 「翻訳」リンクをクリックして関数呼び出しを追加することから始めましょう。

 <a href="javascript:translate('{{post.language}}', '{{g.locale}}', '#post{{post.id}}', '#translation{{post.id}}', '#loading{{post.id}}');">{{ _('Translate') }}</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テンプレート変数は少しわかりにくいですが、関数呼び出し自体は非常に簡単です。 スペイン語で書かれ、英語版のサイトを使用してユーザーが閲覧するid = 23の投稿を検討してください。 この場合、関数は次のように呼び出されます。

 translate('es', 'en', '#post23', '#translation23', '#loading23')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり この関数は、元の言語と宛先言語、および3つのポスト関連要素のセレクターを受け取ります。



各投稿を表示するために使用されるため、関数呼び出しをpost.htmlテンプレートに直接追加しました。 アプリケーションのすべてのページ（ファイルapp / templates / base.html）でアクセスできるように、基本テンプレートに関数自体を作成します。

 <script> function translate(sourceLang, destLang, sourceId, destId, loadingId) { $(destId).hide(); $(loadingId).show(); $.post('/translate', { text: $(sourceId).text(), sourceLang: sourceLang, destLang: destLang }).done(function(translated) { $(destId).text(translated['text']) $(loadingId).hide(); $(destId).show(); }).fail(function() { $(destId).text("{{ _('Error: Could not contact server.') }}"); $(loadingId).hide(); $(destId).show(); }); } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要な機能を実装するには、jQueryを使用します。 Bootstrapを接続したときにjQueryを接続したことを思い出させてください。



翻訳リンクを非表示にし、ダウンロードの進行状況バーを表示することから始めます。



次に、$ .post（）関数を使用して、Ajaxリクエストをサーバーに送信します。 $ .post関数はPOST要求を送信します。これは、サーバーがフォームを送信したときにブラウザーから送信された要求と区別できなくなります。 違いは、クライアントではこのリクエストがページ全体をリロードすることなくバックグラウンドで送信されることです。 サーバーから応答を受信すると、done（）関数への引数である関数が実行され、受信したデータをページに挿入しようとします。 この関数は、応答を引数として受け取ります。 DOMの「翻訳」リンクを翻訳されたテキストに置き換え、ダウンロードインジケーターを非表示にして、最後に翻訳されたテキストをユーザーに表示するだけです。 できた！



クライアントがサーバーからの応答を受信できない原因が発生した場合、fail（）関数の引数である関数が実行されます。 この場合、サポートされているすべての言語に翻訳し、翻訳データベースを更新する必要があるエラーメッセージを表示するだけです。

単体テスト

テストフレームワークを覚えていますか？ アプリケーションに新しいコードを追加した後は常に、このコードのテストを作成することが理にかなっているかどうかを評価する価値があります。 翻訳サービスへのアピールは、コードのその後の作業の過程で、またはサービス自体の作業の更新の結果として、当社によって破られる場合があります。 サービスにアクセスし、翻訳を取得できることを確認する簡単なテストを作成しましょう。

 from app.translate import microsoft_translate class TestCase(unittest.TestCase): #... def test_translation(self): assert microsoft_translate(u'English', 'en', 'es') == u'Inglés' assert microsoft_translate(u'Español', 'es', 'en') == u'Spanish'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点では、クライアント側のコードをテストするためのフレームワークがないため、Ajaxリクエストサイクル全体をテストしません。

実行中のテストはエラーなしで合格するはずです：

 $ ./tests.py ..... ---------------------------------------------------------------------- Ran 5 tests in 5.932s OK
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、Microsoft Translatorのアクセスデータを指定する前にテストを実行すると、次の結果が得られます。

 $ ./tests.py ....F ====================================================================== FAIL: test_translation (__main__.TestCase) ---------------------------------------------------------------------- Traceback (most recent call last): File "./tests.py", line 120, in test_translation assert microsoft_translate(u'English', 'en', 'es') == u'Inglés' AssertionError ---------------------------------------------------------------------- Ran 5 tests in 3.877s FAILED (failures=1)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おわりに

これで、この記事を終了します。 記事を書いていただくのと同じくらい楽しんでいただけたら幸いです！



最近、全文検索にFlask-WhooshAlchemyを使用する際のデータベースの問題について通知を受けました。 次の記事では、この問題を口実として使用して、Flaskアプリケーションを操作する際のデバッグ手法のいくつかを掘り下げます。 パートXVIを期待してください！



最新のマイクロブログバージョンへのリンクは次のとおりです。



microblog-0.15.zipをダウンロードします。



または、 GitHubでソースコードを見つけることができます。



ミゲル