Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Shifter の基本を学ぼう! Shifter と Lightning テーマを使って WordPress で安全な静的サイトを作ってみよう! Seiji Aakatsuka
Slide 2
Slide 2 text
Who I am ● デジタルキューブ 赤塚誠二 ● カスタマーサクセスマネージャー ● SNS: @seijiakatsuka
Slide 3
Slide 3 text
Agenda ● デジタルキューブについて ● Shifter とは? ● Shifter Static で WordPress を使ってみよう! ● Demo ● Shifter Static の便利な機能
Slide 4
Slide 4 text
デジタルキューブについて
Slide 5
Slide 5 text
株式会社 デジタルキューブ ● AWS Advanced Technology Partner ● WordPress ホスティング, 制作, 保守, コンサルティング ● OSS への貢献とコミュニティへの参加・支援 ○ 提供 WordPress プラグイン:100+ ○ プラグインダウンロード数:200万+ ○ WordCampでの登壇:70+ ○ Shifter コミュニティイベント支援プログラム:16
Slide 6
Slide 6 text
Your success is our mission
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
● フルリモート ● コミュニティ ● ビール
Slide 9
Slide 9 text
Shifter Static WordPress サイトをHTMLに変換して安全・高速に公開
Slide 10
Slide 10 text
Shifter Static の特徴 ● Lightning など使い慣れた WordPress サイトをワンクリックでHTMLに変換 ● サーバーの知識がなくても強固なセキュリティと高い性能を持ったホームページ が作れる ● サーバーやWordPressのメンテナンスを自動化しているため、安心してホーム ページの運営だけに集中できます
Slide 11
Slide 11 text
高性能なWordPressサイトを全ての人に ● 世界100拠点以上の CDN ● HTTP/2 対応 ● IPv6 対応 ※ サイトが予めHTMLになっているので、都度ページを生成するよりも速度が速くなる
Slide 12
Slide 12 text
月額約1,700円($16)から利用可能 ● サーバーやCDNなどトータルの費用 ● クレジットカードによる日本円でのお支払 い(表記はUSドル) ● 無料プランはカスタムドメインなし
Slide 13
Slide 13 text
こんなサイトに最適 ● 会社, 店舗, 非営利団体, サークルなどのホームページ ● 商品カタログサイト ● 催事やイベント, マーケティングサイト ● 採用サイト 注:複数人で頻繁に更新が必要なメディアサイトなどは通常の WordPress の利用を
Slide 14
Slide 14 text
利用事例:コーポレートサイト SORACOM SmartHR https://www.soracom.io/ https://smarthr.co.jp/
Slide 15
Slide 15 text
利用事例:コーポレートサイト Cerevo OKWave https://cerevo.com/ https://okwave.co.jp/
Slide 16
Slide 16 text
利用事例:プロダクトサイト LIXIL MIKIHOUSE https://www.lixil.co.jp/square/ https://mikihouse.mikihouse.com/
Slide 17
Slide 17 text
利用事例:ランディングページ・マーケティング・採用サイト MonstarLab Uhuru https://testar-lab.com/ https://www.enebular.com/ja/
Slide 18
Slide 18 text
利用事例:ランディングページ・マーケティング・採用サイト HENNGE https://recruit.hennge.com/ お客様事例はShowcaseで掲載中! https://www.getshifter.io/ja/showcase/
Slide 19
Slide 19 text
Shifter Static で WordPress を使ってみよう!
Slide 20
Slide 20 text
Shifter Static の利用開始方法 1. Shifter サイトに アクセス https://www.getshifter.io/ja/ 2. 無料アカウントを作成 3. サイト(WordPress 環境)を作成
Slide 21
Slide 21 text
Shifter Static を使ったサイトの公開方法 1. Shifter 管理画面にログイン 2. WordPress を起動 3. 記事を投稿 4. サイトの静的化 (Generate)を実行 5. 静的化されたサイト (Artifact) を公開
Slide 22
Slide 22 text
Lightningテーマを使ったDemo
Slide 23
Slide 23 text
Shifter Static の詳細
Slide 24
Slide 24 text
Shifter の管理画面 1. アカウント管理 2. サイトごとの設定メニュー 3. WordPress の起動・停止やアクセス 4. サイトの URL や基本情報 5. PHP エラーの管理 6. PHP エラーがある場合の確認画面 7. WordPress サイトの静的化メニュー
Slide 25
Slide 25 text
Shifter Static の仕組み PHP, MySQL, Web Server HTML, CSS, JavaScript テーマやプラグインの問題で PHP エラーがあってもサイトはダウンしない サイト訪問者
Slide 26
Slide 26 text
これまでのWordPressと違う点 1. WordPress は普段停止している(静的 HTML のみを公開) 2. 公開は投稿単位ではなくサイト単位 3. 静的 HTML 側では PHP が動作しない (JavaScriptを活用)
Slide 27
Slide 27 text
サイト制作時のポイント ● PHP の動作が必要な機能は JavaScript で動作するよう置き換え ● お問い合わせフォーム -> Google フォームなどに置き換え ● サイト内検索 -> Algolia などを活用 SaaS活用でサーバーや個人情報の管理を不要にし、ユーザー体験を向上
Slide 28
Slide 28 text
Shifter Static の便利な機能
Slide 29
Slide 29 text
便利な機能 1. 静的サイト (Artifact) のプレビュー機能 2. Artifact の切り替え機能 3. 自動バックアップ 4. 予約公開機能 5. チーム機能
Slide 30
Slide 30 text
静的サイトのプレビュー機能 ● 静的化した結果のチェック ● 簡易的なステージング環境
Slide 31
Slide 31 text
Artifact の切り替え機能 ● 静的化した内容を確認後に公開 ● 過去のバージョンへの切り替え
Slide 32
Slide 32 text
自動バックアップ ● WordPress のバックアップを10 世代 (10 Artifact分) まで自動で 取得 ● All-in-One WP Migration プラ グインで復元可能
Slide 33
Slide 33 text
予約公開 ● 指定した日時に Artifact を公開
Slide 34
Slide 34 text
チーム機能 サイト1 サイト2 サイト3 チーム1 チーム2 ● チームを自由に作成して社員や 外部の制作会社と協業 ● Shifter アカウントを持たない人 も無料アカウントとして招待可能
Slide 35
Slide 35 text
頼れるパートナー
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
課題解決を強力サポート!
Slide 38
Slide 38 text
Next Event
Slide 39
Slide 39 text
オンラインイベントを定期開催
Slide 40
Slide 40 text
Thanks!