Download to read offline
More Related Content
Similar to 20151206 hamamatsu handson
20151206 hamamatsu handson
- 1. 2015年12月6日 シックス・アパート株式会社 長内 毅志 Movable Typeクラウド版 ハンズオンセミナー
- 2. •長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ディベロッパーリレーションマネージャー –ダンス、ジョギング、家族が大好きです。
- 3.
- 4. アジェンダ • Movable Typeの特徴 • 環境構築に関する参考情報 • 管理画面と基本操作 • Movable Type のテンプレート • テーマを作成する • クラウド版独自の機能を理解する • プラグインとテーマ
- 5.
- 6. Movable Typeとは • 10年以上利用されているブログ・CMS(通称MT) •MTタグ組み合わせでロジック生成 • テンプレートとDBが完全に分離している (MVCライク) • プラグインで拡張可能 • どんなコードも生成可能
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. Data API を利用したアプリ例:MovableType for iOS
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. クラウド環境 –CMSサーバーをVMイメージで構築(Amazon EC2など) –公開ページはコンテンツサーバーで構築 –AmazonS3 (AzureWebサイト) など VMサーバー AmazonEC2など Amazon S3など
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 44.
- 45. テンプレートの説明 • インデックステンプレート –自由にどこでも単一ページを出力 • アーカイブテンプレート –特定のルールに従い複数ページを出力 •テンプレートモジュール –パーツ化して様々な形で共有使用 • システムテンプレート –付属システムの出力部分を調整
- 46.
- 47. アーカイブテンプレート • 更新ごとに増加するデータページをまとめるテンプレート。 • 出力ルールを設定できる(カテゴリ一覧ページを作る、月別 ページを作る、など) •1テンプレートで複数の種類のファイルを出力できる
- 48.
- 49.
- 50.
- 51.
- 52. •設定 => 投稿=> 表示される記事数
- 53. • デザイン =>テンプレート => インデックステンプレート => メインページ • <mt:Entries limit="5" search_results="1"> –値を5に変更
- 54.
- 55. ハンズオン • テンプレートモジュール =>記事の詳細 3行目付近 <$mt:EntryTitle$>を、以下のように書き換えてみましょう – <$MTEntryTitle$> – <mt:EntryTitle> • 書き換えたら、保存=>再構築を行い、出力データを確認してみまし ょう
- 56.
- 57. 解説 • デザイン =>テンプレート => モジュールテンプレート => 記事の概要 <MTIgnore> <div class="asset-content entry-content" itemprop="articleBody"> <$mt:EntryBody$> </div> <div class="entry-more-link"> <a href="<$mt:EntryPermalink encode_html="1"$>" itemprop="url">ブログ記事を読む</a> </div> </MTIgnore>
- 58.
- 59. • <div id="index-main"class="main" role="main"> <MTSetVarBlock name=“num”> <MTBlogEntryCount></MTSetVarBlock> <MTIf name=“num” ge=“10”> 記事数:10件以上 <MTElse> 記事数:10件未満 </MTIf>
- 60.
- 61.
- 62. <MTSetVar name="first" value="10"> <MTGetVarname="first" value="3" op="+"> <MTGetVar name="first" value="3" op="-"> <MTGetVar name="first" value="3" op="*"> <MTGetVar name="first" value="3" op="/">
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 73.
- 74. • デザイン =>テーマ から ハンズオン用テーマを適用する
- 75.
- 76.
- 77.
- 78. タイトル • テンプレート =>インデックス => メインページ <article> <h2>Introduction to respo </h2> => <article> <h2><MTEntryTitle></h2>
- 79. 日付と著者名 <div class="article-info">Posted on2013/05/14 by Joe Bloggs</div> <div class=“article-info”>Posted on <MTEntryDate format=“%Y/%m/%d”> by <MTAuthorName></div>
- 80.
- 81. 本文 <p>Lorem ipsum dolorsit amet, consectetur adipisicing elit, sed do eiusmod ……</p> => <p><MTEntryBody></p>
- 82. 続きを見る(Read More) <a href="#"class="button">Read more</a> => <a href=“<MTEntryPermaLink>" class="button">Read more</a>
- 83.
- 84.
- 85.
- 86. タイトル • テンプレート =>アーカイブテンプレート => 記事 <article> <h2>Introduction to respo </h2> => <article> <h2><MTEntryTitle></h2>
- 87. 日付と著者名 <div class="article-info">Posted on2013/05/14 by Joe Bloggs</div> <div class="article-info">Posted on <MTEntryDate format=“%Y/%m/%d”> by <MTAuthorName></div>
- 88. 本文 <p>Lorem ipsum dolorsit amet, consectetur adipisicing elit, sed do eiusmod ……</p> => <p> <MTEntryBody> <MTEntryMore> </p>
- 89.
- 91. • テンプレート =>インデックス => メインページ • テンプレート => アーカイブテンプレート => 記事 <h1><a href="<mt:BlogURL>">CompanyName</a></h1> => <h1><a href="<mt:BlogURL>“><MTBlogName></a></h1>
- 92.
- 93. • テンプレート =>インデックス => メインページ <title>respo - Free CSS Template by ZyPOP</title> => <title><MTBlogName></title>
- 94. • テンプレート =>アーカイブテンプレート => 記事 <title>respo - Free CSS Template by ZyPOP</title> => <title><MTEntryTitle> - <MTBlogName></title>
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104. nginxとは • ロシアで開発されたウェブサーバー • Apacheに続く第二位のシェア(netcraft社、2012/03) •軽量、高速。メモリ使用量が少ない • デメリットもある(.htaccessが使えないなど)
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116. 設定例 設定例 認証設定したいURL 設定内容 サイト全体にBasic 認証を設定したい http://www.example.com/ / 一部のディレクトリに Basic 認証を設定した い http://www.example.com/secret/ /secret/ 一部のファイルに Basic 認証を設定した い http://www.example.com/secret/file.ht ml /secret/file.html 利用しているMTクラウドのドメインが 「www.example.com」の場合
- 117.
- 118.
- 119. HTTPリダイレクト • システム => クラウドサービス=> HTTPリダイレクト
- 120.
- 121.
- 122.
- 123. 環境のリストア •システム => クラウドサービス=> 環境のリストア
- 124.
- 125.
- 126.
- 127. •システム => クラウドサービス=> セキュリティ
- 128.
- 129.
- 130.
- 131.
- 132. •システム => クラウドサービス=> MT環境変数
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152. 例 •MT5のサイトデータ移行 1. MT5のバックアップデータをMT5でバージョンを合わせて復元 1. バージョンに注意(5.13=>5.13など) 2.MT5からMT6へバージョンアップ 3. MTクラウドへ投入
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161. 購入方法 1. ECバイヤーズ(ECサイト)からの購入 2. 既存の取引先からの購入 3.UNIBaaS参加企業からの購入
- 162.
- 163.
- 164. 既存の取引先からの購入 • MTクラウドは、ソフトバンク コマース＆サービス株式会社を経由し て、一般に流通していますので、ソフトバンクコマース＆サービス 株式会社と取引口座を持つ販売会社から購入可能 • 販売価格は各販売会社へご確認ください
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174. 人気のあるプラグイン(Movable Type プラデミー賞) •http://www.movabletype.jp/blog/pludemy-goes-to.html
- 175.
- 176. Data APIとは •Movable TypeのデータをREST形式で取得 •言語問わずデータ表示、更新、追加などの操作が可 能
- 177.
- 178.
- 179.
- 180.
- 181.
- 182. DataAPI • 以下のファイルを取得、保存 –https://goo.gl/BPwjBe –デザイン =>テンプレート => インデックステンプレート => datalist (新 しくテンプレートを作る) • 「datalist.html」などの名前をつけ、保存・再構築
- 183. Data APIの操作 • ヘッダー内でJSライブラリを読み込み <scripttype=“text/javascript” src=“MTのスタティックパス/data-api/v2/js/mt-data-api.js"> </script> • DataAPIのオブジェクトを生成 • エンドポイントをつかってデータを取得、加工
- 184.
- 185.
- 186. • MT蝦夷 • MT東北 •MT東京 • MTなごや • MT愛媛 • MT鹿児島 • MT関西 • MT広島 • MT福岡 • MT長野 • MT ∗/ NIIGATA(新潟)
- 188. MTDDC Meetup TOHOKU2015 •6月6日(日) 仙台で開催
- 189. MTDDC Meetup TOKYO2015 開催！ •2015年11月28日（土）東京・品川
- 190.