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

（2018年版）

ミゲル・グリンバーグ

---

ここに 戻る

これは、Flaskの14番目の部分であるk Mega-Tutorialで、Microsoft翻訳サービスといくつかのJavaScriptを使用して、リアルタイムのテキスト翻訳機能を追加します。

ネタバレの下には、この2018年シリーズのすべての記事のリストがあります。

注1：このコースの古いバージョンをお探しの場合は、こちらをご覧ください 。

注2：私（ミゲル）の仕事を支持して突然声をかけたい場合、または1週間記事を待つ忍耐がない場合、私（ミゲルグリーンバーグ）はこのガイドの完全版（英語）を電子書籍またはビデオの形式で提供します。 詳細については、 learn.miguelgrinberg.comをご覧ください 。

この記事では、サーバー側の開発の「セーフゾーン」に移動し、同様に重要なサーバーコンポーネントとクライアントコンポーネントを持つ機能に取り組みます。 一部のサイトにユーザーが作成したコンテンツの横に表示される翻訳リンクを見ましたか？ これらは、リアルタイムでユーザーの母国語とは異なるコンテンツの自動翻訳をトリガーするリンクです。 翻訳されたコンテンツは通常、元のバージョンの下に入力されます。 Googleは外国語で検索結果を表示します。 Facebookは投稿のためにこれを行います。 Twitterはツイートのためにそれを行います。 今日は、同じ機能をマイクロブログに追加する方法を紹介します！

この章のGitHubリンク： Browse 、 Zip 、 Diff 。

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

これまで従ってきた従来のサーバーモデルには、アプリケーションサーバーへのHTTP要求を実行するクライアント（ユーザーが制御するWebブラウザー）があります。 リクエストは、たとえば「 プロフィール 」リンクをクリックしたときにHTMLページをリクエストしたり、プロフィール情報の編集後に「送信」ボタンをクリックしたときにアクションをトリガーしたりできます。 どちらのタイプのリクエストでも、サーバーは新しいWebページを直接またはリダイレクトしてクライアントに送信することにより、リクエストを実行します。 次に、クライアントは現在のページを新しいページに置き換えます。 ユーザーがアプリケーションWebサイトにとどまっている間、このサイクルが繰り返されます。 このモデルでは、サーバーがすべての作業を行い、クライアントは単純にWebページを表示し、ユーザー入力を受け入れます。

クライアントがより積極的な役割を果たす別のモデルがあります。 このモデルでは、クライアントはサーバーにリクエストを発行し、サーバーはWebページで応答しますが、前のケースとは異なり、ページデータのすべてがHTMLであるとは限らず、通常Javascriptで記述されたコードを含むページのセクションもあります。 クライアントはページを受信するとすぐに、HTMLフラグメントを表示し、コードを実行します。 これからは、サーバーと通信せずに独立して動作できるアクティブなクライアントができました。 厳密なクライアントアプリケーションでは、アプリケーション全体が開始ページのリクエストとともにクライアントにダウンロードされ、その後アプリケーションはクライアント上で完全に実行されます。データを受信または保存し、最初で唯一のWebページのみの外観を動的に変更するためにサーバーに時々アクセスするだけです。 このタイプのアプリケーションは、 シングルページアプリケーションまたはSPAと呼ばれます。

ほとんどのアプリケーションは、2つのモデルのハイブリッドであり、両方のテクノロジーを組み合わせています。 私のマイクロブログアプリケーションは基本的にサーバーアプリケーションですが、今日はクライアント側のアクションをいくつか追加します。 メッセージをリアルタイムで翻訳するために、クライアントブラウザーは非同期リクエストをサーバーに送信します。サーバーはページを更新せずにサーバーに応答します。 その後、クライアントは現在のページに動的に翻訳を挿入します。 このメソッドはAjaxと呼ばれ、非同期JavaScriptおよびXMLの略です（ただし、最近ではXMLがJSONに置き換えられることがよくあります）。

リアルタイム翻訳ワークフロー

Flask-Babelのおかげで、このアプリケーションは外国語を十分にサポートしています。Flask-Babelは 、翻訳者を見つけられる限り多くの言語をサポートします。 しかし、もちろん、1つの要素が欠落しています。 ユーザーは母国語でブログ投稿を作成します。 したがって、ユーザーが知らない言語で書かれた投稿に遭遇する可能性があります。 自動翻訳の品質は常に優れているとは限りませんが、ほとんどの場合、別の言語のテキストが何を意味するのかを基本的に理解していれば十分です。

これは、AJAXサービスを実装する理想的な機会です。 インデックスページまたは探索ページには複数の投稿が表示される場合があり、そのうちのいくつかは外国語である場合があります。 従来のサーバー側の方法を使用して翻訳を実装すると、翻訳リクエストにより元のページが新しいページに置き換えられます。 実際には、表示されている多くのブログ投稿の1つを翻訳するリクエストは、ページ全体を更新するのに十分な大きさではないため、翻訳されたテキストがソーステキストの下に動的に挿入され、ページの残りの部分がそのまま残されている場合、この機能は非常にうまく機能します。

自動リアルタイム翻訳を実現するには、いくつかの手順が必要です。 まず、翻訳するテキストのソース言語を決定する方法が必要です。 また、他の言語で書かれたメッセージに対してのみ「翻訳」リンクを表示するため、各ユーザーの優先言語を知る必要があります。 翻訳へのリンクが提供され、ユーザーがクリックすると、サーバーにAJAXリクエストを送信する必要があり、サーバーはサードパーティの翻訳APIに接続します。 サーバーが翻訳されたテキストを含む応答を送信した後、クライアントのjavascriptコードはこのテキストをページに動的に挿入します。 お気づきのように、いくつかの重要な問題があります。 それらを一つ一つ検討してください。

言語識別

最初の問題は、エントリが記述された言語を判断することです。 言語を明確に識別することは常に可能であるとは限らないため、これは正確な科学ではありませんが、ほとんどの場合、自動検出は非常にうまく機能します。 Pythonにはguess_language



と呼ばれる優れた言語登録ライブラリがguess_language



ます。 このパッケージの元のバージョンは非常に古く、Python 3に移植されたことがないため、Python 2および3をサポートする派生バージョンをインストールします。

 (venv) $ pip install guess-language_spirit
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

計画では、各ブログ投稿をこのパッケージにフィードして、言語を決定しようとします。 この分析には時間がかかるため、ページにメッセージが表示されるたびにこの作業を繰り返したくありません。 私がやろうとしているのは、メッセージの送信中にメッセージのソース言語を設定することです。 検出された言語は、[投稿]テーブルに保存されます。

最初のステップは、 language



フィールドをPost



モデルに追加することlanguage



。

app / models.py ：検出された言語を投稿モデルに追加します。

 class Post(db.Model): # ... language = db.Column(db.String(5))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

覚えているように、データベースモデルに変更があるたびに、データベースの移行を実行する必要があります。

 (venv) $ flask db migrate -m "add language to posts" INFO [alembic.runtime.migration] Context impl SQLiteImpl. INFO [alembic.runtime.migration] Will assume non-transactional DDL. INFO [alembic.autogenerate.compare] Detected added column 'post.language' Generating migrations/versions/2b017edaa91f_add_language_to_posts.py ... done
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、データベースに移行を適用する必要があります。

 (venv) $ flask db upgrade INFO [alembic.runtime.migration] Context impl SQLiteImpl. INFO [alembic.runtime.migration] Will assume non-transactional DDL. INFO [alembic.runtime.migration] Upgrade ae346256b650 -> 2b017edaa91f, add language to posts
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、メッセージを送信するときに言語を検出して保存できます。

app / routes.py ：新しい投稿の言語を保存します。

 from guess_language import guess_language @app.route('/', methods=['GET', 'POST']) @app.route('/index', methods=['GET', 'POST']) @login_required def index(): form = PostForm() if form.validate_on_submit(): language = guess_language(form.post.data) if language == 'UNKNOWN' or len(language) > 5: language = '' post = Post(body=form.post.data, author=current_user, language=language) # ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この変更により、メッセージが送信されるたびに、 guess_language



関数にテキストを渡して言語を決定しようとします。 言語が不明として返された場合、または予期しないほど長い結果が得られた場合、安全に再生し、空の文字列をデータベースに保存します。 割り当てられた値が空の文字列である言語を含むメッセージは、未知の言語を持っていると想定されるという合意に同意します。

翻訳リンクを表示する

2番目のステップは非常に簡単です。 現在のユーザーに対してアクティブになっている言語と異なるメッセージの横に「翻訳」リンクを追加します。

app/templates/_post.html



：投稿に翻訳リンクを追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これを_post.html



サブパターンで行うことで、ブログエントリを表示するページにこの機能が表示されるようにします。 翻訳へのリンクは、言語が検出されたメッセージにのみ表示され、この言語は、 localeselector



Flask-Babelで装飾された関数によって選択された言語に対応しません。 選択したロケールはg.locale



として保存されることを第13章から思い出してください。 リンクテキストは、Flask-Babelで翻訳できるように追加する必要があるため、 _()



関数を使用して決定します。

このリンクにはまだアクションを関連付けていないことに注意してください。 最初に、実際の翻訳を行う方法を理解したいと思います。

サードパーティの翻訳サービスを使用する

2つの主要な翻訳サービスは、 Google Cloud Translation APIとMicrosoft Translator Text APIです。 どちらも有料サービスですが、Microsoftの提供には、少量の転送のためのエントリレベルのオプションがあり、これは無料です。 Googleは過去に無料の翻訳サービスを提供してきましたが、今日では最低レベルのサービスでさえも支払われています。 費用をかけずに翻訳を試してみたいので、マイクロソフトのソリューションを実装します。

ご注意 Podvodchika：ミゲルが知らないように見えるYandexがまだあります。 最悪のAPIではありません！ Microsoftの場合、1か月あたり200万文字に対して、1か月あたり200万文字まで、1か月あたり10 Mまでの無料オプションがあります。

Microsoft Translator APIを使用する前に、MicrosoftのクラウドサービスであるAzureのアカウントが必要です。 登録プロセス中にクレジットカード番号を提供するオファー中に、無料のレベルを選択できます。 このレベルのサービスに滞在している間、カードは請求されません。

Azureアカウントを取得したら、Azureポータルに移動して、左上隅の[新規]ボタンをクリックし、[Translator Text API]を入力または選択します。 「作成」をクリックすると、アカウントに追加される新しい翻訳者リソースを定義するフォームが表示されます。 以下に、フォームへの記入方法を示します。

[作成]ボタンをもう一度クリックすると、インタープリターAPIリソースがアカウントに追加されます。 数秒待つと、パネルの上部の行に、トランスレーターがデプロイされたという通知が届きます。 通知の[リソースに移動]ボタンをクリックしてから、左側のサイドバーの[キー]オプションをクリックします。 「キー1」と「キー2」としてマークされた2つのキーが表示されます。 キーの1つをクリップボードにコピーし、ターミナルの環境変数に入力します（Microsoft Windowsを使用している場合は、 export



をset



に置き換えexport



）。

 (venv) $ export MS_TRANSLATOR_KEY=<paste-your-key-here>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このキーは、翻訳サービスを使用した認証に使用されるため、アプリケーション構成に追加する必要があります。

config.py：Microsoft Translator APIキーを構成に追加します。

 class Config(object): # ... MS_TRANSLATOR_KEY = os.environ.get('MS_TRANSLATOR_KEY')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構成値と同様に、それらを環境変数に設定し、そこからFlask構成にインポートすることを好みます。 これは、キーやパスワードなどのサードパーティサービスへのアクセスを提供する機密情報がある場合に特に重要です。 あなたは間違いなくそれらをコードで明示的に書きたくありません。

Microsoft Translator APIは、HTTP要求を受け入れるWebサービスです。 PythonにはいくつかのHTTPクライアントがありますが、最も人気があり、最も簡単に使用できるのはrequests



パッケージです。 仮想環境にインストールしましょう：

 (venv) $ pip install requests
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下に、Microsoft Translator APIを使用してテキストを翻訳するためにエンコードした関数を示します。 新しいモジュールapp / translate.pyを追加します。

app / translate.py ：テキスト翻訳機能。

 import json import requests from flask_babel import _ from app import app def translate(text, source_language, dest_language): if 'MS_TRANSLATOR_KEY' not in app.config or \ not app.config['MS_TRANSLATOR_KEY']: return _('Error: the translation service is not configured.') auth = {'Ocp-Apim-Subscription-Key': app.config['MS_TRANSLATOR_KEY']} r = requests.get('https://api.microsofttranslator.com/v2/Ajax.svc' '/Translate?text={}&from={}&to={}'.format( text, source_language, dest_language), headers=auth) if r.status_code != 200: return _('Error: the translation service failed.') return json.loads(r.content.decode('utf-8-sig'))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は翻訳対象のテキストを受け取り、ソース言語とターゲット言語は引数としてエンコードされ、翻訳されたテキストを含む文字列を返します。 アクションは、構成内の翻訳サービスのキーを確認することから始まり、キーが存在しない場合はエラーを返します。 エラーも文字列であるため、外部からは翻訳されたテキストのように見えます。 これにより、エラーが発生した場合に、ユーザーにエラーメッセージが表示されます。

requests



パッケージのget()



メソッドは、 GET



メソッドを含むHTTP要求を、最初の引数として指定されたURLに送信します。 URL /v2/Ajax.svc/Translateを使用します。これは、翻訳をJSONデータとして返す翻訳サービスエンドポイントです。 テキスト、ソース、およびターゲット言語はto



それぞれtext



、 from



およびto



という名前のURLのクエリ文字列引数として指定する必要があります。 サービスを使用して認証するには、構成に追加したキーを渡す必要があります。 このキーは、 Ocp-Apim-Subscription-Key



という名前のカスタムHTTPヘッダーで指定する必要があります。 このヘッダーでauth



辞書を作成し、 headers



引数でリクエストに渡しました。

requests.get()



メソッドは、サービスによって提供されるすべての情報を含む応答オブジェクトを返します。 最初に、ステータスコードが200（成功した要求コード）であることを確認する必要があります。 他のコードを取得した場合、エラーが発生しているため、この場合はエラー文字列を返しています。 ステータスコードが200の場合、応答本文にはJSONエンコードされた翻訳付きの文字列が含まれているため、Python標準ライブラリのjson.loads()



関数を使用して、JSONを使用可能なPython文字列にデコードするだけです。 応答応答オブジェクトの属性content



は、未処理の応答テキストがバイト文字列として含まれており、utf-8文字列に変換されてjson.loads()



送信されます。

以下に、新しいtranslate()



関数を使用するPythonコンソールセッションを示します。

 >>> from app.translate import translate >>> translate('Hi, how are you today?', 'en', 'es') # English to Spanish 'Hola, ¿cómo estás hoy?' >>> translate('Hi, how are you today?', 'en', 'de') # English to German 'Are Hallo, how you heute?' >>> translate('Hi, how are you today?', 'en', 'it') # English to Italian 'Ciao, come stai oggi?' >>> translate('Hi, how are you today?', 'en', 'fr') # English to French "Salut, comment allez-vous aujourd'hui ?"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

かなりクールですよね？ 次は、この機能をアプリケーションに統合します。

サーバーからのAjax

サーバー側の実装から始めます。 ユーザーがメッセージの下に表示される「翻訳」リンクをクリックすると、非同期HTTP要求がサーバーに発行されます。 次のセッションでこれを行う方法を示しますので、ここでは、サーバーによるこの要求の処理の実装に焦点を当てます。

非同期（またはAjax）リクエストは、アプリケーションで作成したルートと表示機能に似ていますが、唯一の違いは、HTMLを返すかリダイレクトする代わりに、 XMLまたはより多くの場合JSONとしてフォーマットされたデータを返すだけです。 以下に、Microsoft Translator APIを呼び出し、翻訳されたテキストをJSON形式で返す翻訳表示機能を示します。

app / routes.py ：テキスト翻訳ビュー機能。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、簡単です。 POST



リクエストとしてこのルートをたどりました。 GET



またはPOST



（または、まだ見たことのない他のリクエストメソッド）をいつ使用するかについての絶対的なルールはありません。 クライアントがデータを送信するため、フォームデータを表すリクエストに似ているため、 POST



リクエストを使用することにしました。 request.form



属性は、Flaskがビューに含まれるすべてのデータとともに提供する辞書です。 Webフォームで作業しているとき、flask-WTFは正常に機能するためすべてを実行するため、 request.form



を検索する必要はありませんでしたが、この場合、実際にはWebフォームがないため、データに直接アクセスする必要があります。

それでは、この関数で私がやっていることを見てみましょう。 前のセクションのtranslate()



関数が呼び出され、要求とともに送信されたデータから3つの引数が直接渡されます。 結果は、 text



という1つのキーでディクショナリに含まれ、ディクショナリはjsonify()



Flask関数に引数として渡され、ディクショナリはフォーマットされたJSONペイロードに変換されます。 jsonify()



からの戻り値は、クライアントに送り返されるHTTP応答です。

たとえば、クライアントが文字列Hello, World!



を翻訳したい場合 スペイン語では、このリクエストからの応答には次の有用なデータが含まれます。

 { "text": "Hola, Mundo!" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クライアントからのAjax

サーバーがURL / translateを介して翻訳を提供できるようになったので、ユーザーが上記で追加した「Translate」リンクをクリックすると、このURLを呼び出す必要があります。翻訳用のテキストとソース言語およびターゲット言語を渡します。 ブラウザでJavaScriptを使用することに慣れていない場合、これは良い学習体験になります。

ブラウザでJavaScriptを使用する場合、現在表示されているページは、ドキュメントのオブジェクトモデルまたはDOMのみとして内部的に表されます。 これは、ページに存在するすべての要素を参照する階層構造です。 このコンテキストで機能するJavaScriptコードは、DOMに変更を加えてページの変更を開始できます。

最初に、ブラウザーで実行されているJavaScriptコードが、サーバーで実行されている変換関数に送信する必要がある3つの引数を取得する方法について説明します。 テキストを取得するには、ブログ投稿の本文を含むノードをDOMで見つけて、その内容を読む必要があります。 ブログエントリを含むDOMノードの識別を簡単にするために、一意の識別子を追加します。 _post.htmlテンプレートを見ると、メッセージの本文を表示する行は{{post.body}}



ます。 このコンテンツを<span>



要素でラップします。 これは視覚的には何も変更しませんが、識別子を挿入できる場所を提供します。

app/templates/_post.html



：各ブログ投稿にIDを追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、各ブログ投稿にpost1



、 post2



などの形式で一意の識別子が割り当てられます。番号は各投稿のデータベース識別子に対応します。 すべてのブログ投稿にID値が指定された一意の識別子があるため、jQueryを使用してこの投稿の<span>



要素を見つけ、その中のテキストを抽出できます。 たとえば、ID 123のメッセージのテキストを取得したい場合、次のようにします。

 $('#post123').text()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、 $



記号はjQueryライブラリによって提供される関数の名前です。 このライブラリはBootstrapによって使用されるため、Flask-Bootstrapにすでに含まれています。 #



は、jQueryが使用する「セレクタ」構文の一部です。つまり、次は要素の識別子です。

また、翻訳されたテキストをサーバーから受け取った後に埋め込む場所が必要です。 「翻訳」リンクを翻訳されたテキストに置き換えるため、このノードの一意の識別子も必要です。

app/templates/_post.html



：翻訳リンクに識別子を追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、このpost<ID>



IDには、ブログ投稿のpost<ID>



と対応するtranslation<ID>



ノードがあり、「翻訳」リンクを受け取ったらすぐに翻訳されたテキストに置き換える必要があります。

次のステップは、すべての翻訳作業を実行できる関数を作成することです。 この関数は、入力および出力DOMノード、およびソース言語と宛先言語を受け入れ、3つの必要な引数を使用してサーバーに非同期要求を発行し、最終的にサーバーの応答後に翻訳リンクを翻訳されたテキストに置き換えます。 これは多くの作業のように聞こえますが、実装は非常に簡単です。

app / templates / base.html ：クライアント側の翻訳機能。

 {% block scripts %} ... <script> function translate(sourceElem, destElem, sourceLang, destLang) { $(destElem).html('<img src="{{ url_for('static', filename='loading.gif') }}">'); $.post('/translate', { text: $(sourceElem).text(), source_language: sourceLang, dest_language: destLang }).done(function(response) { $(destElem).text(response['text']) }).fail(function() { $(destElem).text("{{ _('Error: Could not contact server.') }}"); }); } </script> {% endblock %}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の2つの引数は、メッセージと翻訳ノードの一意のIDです。 最後の2つの引数は、ソース言語コードと宛先言語コードです。

この機能は素晴らしいタッチで始まります：翻訳リンクを置き換えるスピナーを追加して、ユーザーに翻訳が進行中であることを知らせます。 これは、jQueryを使用して行われ、 $(destElem).html()



関数を使用して、翻訳リンクを定義した元のHTMLを<img>



リンクに基づく新しいHTMLコンテンツに置き換えます。 スピナーには、小さなアニメーションGIFチックを使用します。これはapp / static / loading.gifディレクトリに追加し、Flaskは静的ファイル用に予約しています。 この画像を参照するURLを生成するには、 url_for()



関数を使用して、特別なstatic



ルート名を渡し、引数としてファイル名を指定します。 この章のダウンロードパッケージに load.gifイメージがあります 。

これで、「翻訳」リンクを置き換えるまともなスピナータイマーができました。ユーザーは、翻訳が表示されるまで待つ必要があることがわかりました。

次のステップは、前のセクションで定義したURL / translateにPOST



リクエストを送信することです。 また、このためにjQueryを使用します。この場合は、 $.post()



関数です。 この関数は、ブラウザがWebフォームを送信する方法と同様の形式でデータをサーバーに送信します。これは、Flaskがrequest.form



辞書にこのデータを含めることができるため便利です。 2つの$.post()



引数は、最初にリクエストを送信するURLであり、次にサーバーが期待する3つのデータ要素を含む辞書（またはJavaScriptで呼び出されるオブジェクト）です。

JavaScriptは、コールバック関数またはpromiseと呼ばれるより高度な形式のコールバックで多くの機能を果たすことをご存知でしょう。 ここでやりたいことは、このリクエストが完了してブラウザが応答を受け取ったときに何をするかを約束することです。 JavaScriptには何も期待するようなものはなく、すべてが非同期です。 代わりに、ブラウザが応答を受信したときに呼び出すコールバック関数を提供する必要があります。 すべてを可能な限り信頼性の高いものにする方法と同様に、エラーが突然発生した場合の対処方法を示したいので、2番目のコールバック関数はエラー処理になります。 これらのコールバックを指定する方法はいくつかありますが、この場合、promiseを使用するとコードが十分に明確になります。 構文は次のとおりです。

 $.post(<url>, <data>).done(function(response) { // success callback }).fail(function() { // error callback })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

promise構文を使用すると、コールバックを基本的に$.post()



呼び出しの戻り値に「フック」できます。 コールバックが成功した場合、私がしなければならないことは、翻訳されたテキストで$(destElem).text()



を呼び出すことです。 エラーが発生した場合も同じことを行いますが、表示されるテキストは一般的なエラーメッセージであり、翻訳可能なテキストとして基本テンプレートに入力されます。

したがって、ユーザーが「翻訳」リンクをクリックした結果として正しい引数を指定してtranslate()



関数を呼び出すだけです。 これを行う方法もいくつかあります。 リンクのhref



属性に関数呼び出しを埋め込むだけです。

app/templates/_post.html



：リンクハンドラーを翻訳します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

リンクのhref



要素は、 javascript:



プレフィックスがある場合、任意のJavaScriptコードを受け入れることができるため、これは翻訳関数呼び出しを行う便利な方法です。 クライアントがページを要求するとこのリンクがサーバーに表示されるため、 {{ }}



式を使用して4つの関数引数を生成できます。 . #



, post<ID>



translation<ID>



, , ID .

Now the live translation feature is complete! If you have set a valid Microsoft Translator API key in your environment, you should now be able to trigger translations. Assuming you have your browser set to prefer English, you will need to write a post in another language to see the "Translate" link. Below you can see an example:

! Microsoft Translator API , . , , "". :

, , , :

 (venv) $ flask translate update
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

messages.po , , GitHub.

, :

 (venv) $ flask translate compile
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに 戻る