狠狠撸

狠狠撸Share a Scribd company logo

20180326 mt azure_handson_translation

?Download as PPTX, PDF?
?
Six Apart
Six Apart

2018年3月26日のハンズオン资料です

1 of 146
Download to read offline
Movable Type for Azure ハンズオンセミナー 2018年3月26日 シックス?アパート株式会社 長内 毅志 1
? 長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
本日のハンズオン内容 3 ? Movable Type とは ? Microsoft Azure のアカウントアクティベート –Microsoft アカウントの作成 –Azure アカウントの作成 ? 仮想マシンの立ち上げ ? Movable Type のセットアップ ? Azure AIサービスとの連携 ? 環境のクリーンアップ
Movable Type とは 4
Movable Type（ムーバブル?タイプ）とは サンフランシスコ生まれの 世界標準CMSパブリッシングプラットフォーム。 世界中のユーザーに使われ15年。 2001年 2016年 Movable Type 1.0 Movable Type 6.3 サンフランシスコのシックス?アパー ト創業者夫妻が自分たちの日記を書く ために開発したブログツール 国内導入実績 ナンバー１。ウェブに とどまらないコンテンツ管理が可能な CMSソフトウェアとして進化中。 Movable Type とは
? ブログから数万ページに及び大規模サイトまで 5万件以上の導入実績 ECサイト イントラサイト?WEB社内報 メディアサイト?企業オウンドメディア 会員制サイト?コミュニティサイト 実績 コーポレートサイト 5万件以上の導入実績 5万件以上！
ビジネスユーザーに絶大な支持 日経平均225社の 半数以上がMTユーザー
安全性?セキュリティについて 安全性 タグだけでセキュア なサイトを構築 CMSと公開サイト のパスを分離可能 不正ログインに対す るアカウントロック 細かな権限設定 で役割を明確に 安全性が高い 安全性が高い
サポートがある ? 開発拠点は日本 ? オンラインサポート ? 月曜日 - 金曜日 10:00 - 17:00 –（土曜?日曜?年末年始?休祝日を除く） ? サポート内容は以下 –http://www.sixapart.jp/movabletype/support/support_rules.html 安心なサポートがある
Movable Type の特徴 10
特徴 11 ? プログラムを書かずにタグだけでいろいろな出力処理が実 装できる ? CMSサーバーとコンテンツを分離可能 ? 不正ログインに対するアカウントロックやパスワード設定な ど、セキュリティ対策に関する機能が豊富 ? 国内に取り扱い可能な制作会社が多数存在する
12 ? 完成されたテンプレートエンジン ? デザインの変更が容易 ? Data APIによるデータ入出力の拡張性 ? 静的生成のためさまざまなサーバー構成に対応可能
? さまざまなプログラム言語からREST/JSON方式で Movable Type にアク セスし、データの取得や更新が可能。 ? CMSで管理しているデータを、サイト上で自由に呼び出したり、 独自の管理画面やアプリの開発、他のプラットフォームとの連携が 容易に。 Data API
ハンズオン 14
本日のシナリオ 15 Microsoft Azure 仮想マシン [CMSサーバー兼 ウェブサーバー] ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる部分があります。ご了承ください。
本日のシナリオ(詳細) 16 Microsoft Azure 仮想マシン [CMSサーバー兼 ウェブサーバー] http(80)、SSH(22) のみ通信可能なファイヤーウォール インターネットゲートウェイ (グローバルIP) NAT ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる場合があります。ご了承ください。 サブネット
Movable Type とAIサービスの連携シナリオ MTで認証を行う Microsoft Translator Text APIで日 本語=>英語に翻訳 翻訳済みの英語文章を MT経由でブログ記事として公開
Microsoft Azureアカウントの アクティベーション 18
19 ? やること –Microsoft アカウントの作成 =>サインイン –Azureアカウントの作成 =>サインイン
20 ? Microsoft アカウントをお持ちでない方は、アカウント作成を 行います。 ? Microsoft アカウントをお持ちの方は、少しお待ちください
21 Microsoft アカウントで利用するメールアドレス と、パスワードを入力し、「次へ」をクリック
22 入力したメールアドレス宛に、セットアップ用の メールが届きます。
23 最初の「下のリンクをクリックしてアカウントを確認してく ださい」をクリックして、MSアカウントを作成します
24 ? https://azure.microsoft.com/ja-jp/ へアクセス ? 検索エンジンから「Microsoft 础锄耻谤别」を検索
Microsoft Azure のトップ画面 25 「無料で始める」を クリック
26 「無料で始める」を クリック
27 Microsoft アカウントがある方はサインイン 無い方は「新しいアカウントを取得」をクリック
28 携帯電話の番号を入力して、テキストメッセー ジを受け取ります。電話でもOKです。
29 クレジットカード情報を 入力します。課金は、 無料枠を使い切るま で始まりません。
30 テクニカルサポー トが「ない」を選択 して次へ進み、ア カウント作成を完 了します。
31 入力が全て完了すると、 処理待ちの画面になります。
32 Microsoft Azure のポータル画面に移動します
仮想マシン (Virtual Machine) の立ち上げ 33
Virtual Machine(仮想マシン)とは 34 ? Azure上で利用できるサーバーイメージ ? Windows だけでなく、Linuxなども利用可能 ? マーケットプレースで様々なサーバーイメージを入手できる ? WebApps = 共用サーバーなら 仮想マシン＝VPS と考えると理解しやすい
35 「Virtual Machines」をクリックします。
36 「追加」をクリックします。
37 「Market Place」の検索欄に [movable type]と入力して 検索を行います。
38 [Movable Type 6]というVMが見つかります。 この仮想マシンを選択します。
39 画面に、仮想マシンの説明 が表示されます。 下部にある「作成」をクリック します。
40 名前を入力します。 半角英数字で指定し てください。
41 VMディスクの種類を 選びます。「SSD」でOK です。
42 ユーザー名を指定し ます。任意の半角英 数字を入力します。
43 認証の種類を選びます。 SSHなどでVMに接続する ときに使います。[パス ワード]を選び、半角英数 記号12文字以上を指定し ます。
44 サブスクリプションを 選びます。みなさんが 利用しているAzure の サブスクリプションを 選択します。
45 リソースグループを新 規作成します。名前 を任意で設定します。
? 設定したリソースグループの名前を控えておきます 46
47 仮想マシンを配置す る場所を選択します。 今回は[西日本]を選 びます。
48 すべての設定が終 わったら「OK」ボタン をクリックします。
49 「サポートされる ディスクの種類」 を[SSD]にします。
50 「すべて表示」を 選びます。
51 「DS1_ Standard」を選 び下部の「選択」ボタ ンをクリックします。
52 「オプション機能の選 択」画面に移動しま す。設定はそのまま で下部の「OK」ボタン をクリックします。
? 表示されている料金は、Movable Type for Azureを1ヶ月使 った場合の料金です。 ? Movable Type for Azure には1ヶ月間の無料試用期間があ るため、上記の金額は適用されません。 ? 今回のハンズオンでは￥10.5円程度／時間のVM料金の みかかります。 料金についての注釈 53
54 「オプション機能の構成」 画面が表示されます。 ここでは何も変更せずに、 下部の「OK」ボタンを クリックします。
55 「検証に成功しました」とい うメッセージが表示された ら、下部の「購入」ボタンを クリックします。
56 「デプロイを実行していま す」というメッセージが表示 されるので、少し待ちます。
57 作成した仮想マシンが実行 中になったら、クリックして 詳細を確認します。
58 [パブリックIPアドレス]という 値があります。IPアドレスを コピーして、ブラウザでアク セスします。
59 Movable Type の初期画面 が表示されます。「Start Movable Type」をクリックし て、初期設定を開始します。
60 「コンピュータ名」か「リソース ID」の入力を求められます。 今回はコンピュータ名を入力 することにしましょう。Azureの 管理画面に戻ります。
61 「コンピュータ名」が管理画面 に表示されています。この文 字をコピーします。
62 先程確認した「コンピュータ 名」を入力して[Continue]ボタ ンをクリックします。
63 「コンピュータ名」が正しく入 力されると、画面が切り替わ ります。 [Username][Display Name]を 入力しましょう。[Username] はMovable Type へサインイ ンするためのIDとなります。
64 [Email Address]にみなさんが 普段使用しているメールアド レスを入力します。 [Use this as system email addresss]へチェックを入れま す。
65 [Language]を日本語に変更し ます。[Password][Confirm Password]へ、利用したいパ スワードを入力します。
66 すべての設定が終わったら [Continue]をクリックします。
67 [Timezone]を「UTC+9」に指定 します。設定が終わったら [Finish Install]ボタンをクリッ クします。
68 Movable Type のインストー ルが始まります。終了した ら[Sign in to Movable Type] をクリックします。
69 Movable Type ダッシュボー ドが表示されたらインストー ル成功です。
リソースグループのサービス各役割 70 Microsoft Azure 仮想マシン+ ストレージサービス ネットワークセキュリティグループ パブリックIPアドレス ネットワーク インターフェース ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる場合があります。ご了承ください。 仮想ネットワーク
リソースグループ内サービスの各役割 71 Microsoft Azure 仮想マシン [CMSサーバー兼 ウェブサーバー] http(80)、SSH(22) のみ通信可能なファイヤーウォール インターネットゲートウェイ (グローバルIP) NAT ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる場合があります。ご了承ください。 サブネット
? サービスを提供するために構築した、サーバー構成一式( 各種サービス一式)をグループ化したもの リソースグループとは 72 ※本日の内容をわかりやすくするために文書化したものであり、 厳密には事実と異なる場合があります。ご了承ください。
Movable Type でウェブサイトを出力 ?更新する 73
74 ユーザーダッシュボードから「First Website」をクリックします
75 「First Website」の操作画面に移動します。 右上の丸矢印アイコンをクリックしてみま しょう。
76 再構築用ポップアップ画面が表示 されます。「再構築」とは、Movable Type で htmlを出力する処理です。 「再構築」ボタンをクリックしましょう。
77 「再構築」が始まり、 htmlの出力を行います。 しばらく待ちます。
78 再構築が終了したら、 「サイトを見る」をクリック します。
79 最初のウェブサイトが出力されているのが 確認できます。
80 いま出力したウェブサイトに新しい記事を追加してみま しょう。左メニューの [記事] => [新規] 、もしくは右上黄 色のボタンから [新規作成] => [記事] を選びます。
81 最初の記事編集画面に移動します。「タイトル」と「本 文」に適当な文字?文章を入力してみましょう。
82 入力が終わったら画面右 の「公開」ボタンをクリックし ます。
83 公開が終わったら、画面上部の「記事を見る」か、右上 の四角いアイコンをクリックしてみましょう。
84 入力?公開した記事が公開されて いることが確認できます。
Movable Typeの管理画面と 基本操作
管理画面 Movable Type の管理画面はユーザーダッシュボードを起 点に、3層構造になっています。
ウェブサイトとブログの違い ? ウェブサイト… 「サイト」「ホームページ」全体を管理する仕組み ? ブログ… ウェブサイトの中にある、更新頻度の高いコンテンツを管理する仕組み 「ブログ」「ニュースリリース」「IR情報」 「新製品紹介」など 参考リンク3： http://www.movabletype.jp/documentation/mt6/websites/
1つの奥别产サイトを构成する例
复数の奥别产サイトを构成する例
ダッシュボード 左上の三角アイコンをクリックして、操作したいモードを切 り替えながら、ウェブサイトやブログを管理していきます。
Cognitive Services と連携してみる 91
Cognitive Services のラインアップ 人間の「認知」機能をクラウド上で提供
Cognitive Services の一例 ? 画像解析(Computer Vision API)
Microsoft Translator テキストAPIとは ? Microsoft Azure のサービス [Cognitive Services]の一つ ? 多言語翻訳を行うAPI
Movable Type との連携シナリオ MTで認証を行う Microsoft Translator Text APIで日 本語=>英語に翻訳 翻訳済みの英語文章を MT経由でブログ記事として公開
Translator Text APIの有効化 96 「リソースの作成」を クリックして、検索窓 から「Translator Text API」と入力します。
97 「Translator Text API」 の作成画面が表示さ れます。「作成」をク リックします。
98 設定画面に移動します。 「Name」は任意に設定しま す。 「サブスクリプション」は、み なさんがお使いのサブスクリ プションを選択します。
99 「価格レベル」を設定します。 特に理由がなければ、F0(無 料枠含むプラン)を選んでか まいません。
100 「Resource Group」は「新規 作成」を選びます。名前を任 意に設定します。 「Resource Group location」 は西日本でokです。別な場 所を選んでも問題ありませ ん。
101 すべての設定が終了したら 「作成」をクリックします。
APIキーの確認 102 Trasnlator Text APIが有 効化されたら、コンソー ルを移動します。左メ ニューの「Keys」を選び、 APIキーをコピーします。 (1,2どちらでもかまいま せん)
? 以下のURLにアクセスしてZIPファイルを取得します。 ?https://goo.gl/KFvxk2 翻訳用テンプレートの取得 103
? sample.html ? sample-php.txt の2ファイルが有ることを確認します。 ダウンロードファイルの確認 104
? ウェブサイトのダッシュボード左 メニューから [デザイン]=>[テンプレート]を選 びます。
? 「インデックステンプレートの作 成」をクリックします。
? 「sample-php.txt」のコード をコピーして、貼り付けます 。 ? 名前を任意に設定します。 ここでは「sample-php」とし ています。 107
? コードの5行目に、Microsoft Translator テキストAPIと連携す るための、APIキーを定義する箇 所があります。 ? 先程控えておいた、Translator Text APIのAPIキーを記述します 。
? APIキーを記述します。前後のシ ングルクオートを削除しないよう に気をつけて下さい。
? APIキーの書き換えが終わ ったら、テンプレート名を「 sample.php」とします。 ? 「保存」ボタンをクリックしま す。 110
? 「保存と再構築」ボタンが表示 されるので、クリックします。 111
? 再度ウェブサイトのダッシュボー ド左メニューから [デザイン]=>[テンプレート]を選 びます。
? 再度「インデックステンプレート の作成」をクリックします。
? MTのテンプレート管理画面に戻 ります。 ? 上部にある[インデックステンプレ ートの作成]をクリックします。
? 「sample.html」のコードをコピー して貼り付けます。名前を任意 に入力します。 (ここでは「sample-html」として います) 115
? 出力ファイル名を 「sample.html」とします ? 「保存」ボタンをクリックしま す。 116
? 「保存と再構築」ボタンが表示 されるので、クリックします。 117
? 再構築が完了したら、右メ ニューから「公開されたテン プレートを確認」をクリックし ます。 118
? 再構築が完了したら、右メ ニューから「公開されたテン プレートを確認」をクリックし ます。 119
? 左図のような画面が表示されれ ば、正常に出力されています。 120
? Movable Type のダッシュボ ード右上から、みなさんのユ ーザー名をクリックします。 121
? ユーザー詳細の画面が表示 されます。 ? ページ下部の「Webサービス パスワード」の「内容を表示」 をクリックします。 122
? Webサービスのパスワードが ポップアップで表示されます ので、パスワードを控えます 123
? 先程作成したhtml画面を表示し ます。 ? 「サインイン」をクリックします。 124
? サインイン画面が表示されます。 ? 今回作成したユーザー名 (username)と、先程確認した「 Webサービスパスワード」でサイ ンインしてみましょう。
? 投稿用のフォーム画面が表示さ れます。 ? タイトルと本文に、適当に文字を 入力します。 ? 入力が終わったら、「英訳する」 ボタンをクリックします。
? Microsoft Translator テキスト APIを通じて翻訳された英語が、 下部のフォームに表示されます 。 ? 「登録する」をクリックして、英訳 した記事をMTに投稿します。
? 投稿が終わったら、ウェブサイト の画面を確認します。 ? 英訳した記事データが投稿され ていることがわかります。
? MTの管理画面に戻って、英語の 投稿が記事として登録されてい ることを確認してみましょう。
環境のクリーンアップ 130
131 ? 最後に、今日のハンズオンで作成した環境を削除して終了 します。 ? Microsoft Azure の管理画面に移動しましょう。
132 左メニューから「リソースグループ」 を選択し、本日作成したリソースグループをク リックします。
133 今回のハンズオンで 作成したサービスの 一覧が表示されます。
134 右画面上部の 「リソースグループの削除」を クリックしましょう。
135 削除の確認画面が表 示されます。入力欄 に、今回作成したリ ソースグループ名を 入力します。
136 正しいリソース名を入 力すると「削除」ボタ ンが選択できるように なります。 「削除」ボタンをクリッ クします。
137 削除中の処理画面が表示され、 今回の環境一式の削除を開始します。
138 左メニューから「すべてのリソース」を選択しま しょう。何も表示されていなかったら、環境のク リーンアップは終了です。
139 削除が完了したのに、リソースが表示されている 場合、ブラウザキャッシュの影響が考えられます。 画面上部の「更新」をクリックしてみましょう。
Microsoft Azureと Movable Type を より深く学びたい方のために 140
Microsoft Azure のセミナーもいっぱい「mstep」 141 ※Microsoft パートナープログラムへの登録が必要です mstep で検索
Azure のユーザーグループ「JAZUG」 142 JAZUG で検索
Movable Type 開発者のためのライセンス 143 MT 开発者ライセンスで検索
Movable Type のセミナー情報 144 MT セミナーで検索
Movable Type のユーザーグループ情報 145 MT ユーザーグループで検索
? ありがとうございました 146

More Related Content

20180326 mt azure_handson_translation

Editor's Notes

  1. サイト、デジタルサイネージ、印刷物……