PHPとかよくわかんない系WEBデザイナーでもShifterでいろいろできたよ! というお話。

Shifterオンラインミートアップでお話しさせてもらった、WEBデザイナー目線の経験談です。

Transcript

1. PHPとか
   よくわかんない系WEBデザイナー
   でもShifterで
   いろいろできたよ！
   というお話。
   　　Sourire web studio 今村真理子
   

   View Slide

2. 自己紹介
   今村真理子
   神戸でフリーランスのWEBデザイナーしてます。
   2児のオカンです。
   ここ数年はバイクツーリングにハマってます。
   デザインして構築して、サイト制作してます。
   PHPはおまじないだと思ってます。
   @kamesanzzz
   https://sourire-web-studio.com
   

   View Slide

3. こんなのとか
   

   View Slide

4. こんなのとか
   

   View Slide

5. こんなのとか 作ってます。
   ゴテゴテ装飾多めの女性子供向けのデザインが得意です。
   

   View Slide

6. デザイナーの
   Shifter悲喜こもごも話です
   

   View Slide

7. 　　わたしのShifterデビュー
   前知識ゼロで神戸のミートアップに参加
   Shifterは『なんか便利なやつ。らしい。』
   という程度の認識でした。
   

   View Slide

8. 　　うれしかったポイント
   WordPress簡単インストールよりも簡単
   

   View Slide

9. 　　ハマったポイント
   独自ドメインでハマる
   定番のやつです
   お約束のように独自ドメインの登録ができませんでした。
   

   View Slide

10. サポートがめっちゃ頼りやすい！早い！
    　　うれしかったポイント
    

    View Slide

11. 　　ハマったポイント
    メールアドレスが使えない
    Shifterに登録した独自ドメインのメールアドレス、どうしよう。
    AWSはちょっとハードルが高い
    

    View Slide

12. サイトはShifterへ、
    メールはエックスサーバーにDNSを設定
    Shifter エックスサーバー
    独自ドメイン.com
    

    View Slide

13. 　　ハマったポイント
    ContactForm7が使えない
    『WP Serverless Forms』を使いこなせなかった
    

    View Slide

14. Googleフォームを入れ込みました
    Googleフォーム
    

    View Slide

15. Generateしないよ！
    　　ハマったポイント
    

    View Slide

16. 修正したものの、再度試したGenerateも進まず。
    テーマにエラーがあるよ
    

    View Slide

17. 古くて更新されてないプラグインを削除
    プラグインにもエラーがあるよ
    

    View Slide

18. 無事にGenerateできました！
    

    View Slide

19. 　この時の学び
    テーマとプラグインの
    PHPチェックをきちんとする
    『PHP Compatibility Checker』でお手軽チェック。
    https://ja.wordpress.org/plugins/php-compatibility-checker/
    

    View Slide

20. FTPは使えない
    プラグインがエラーになったので止めたいんやけど・・・
    　　ハマったポイント
    

    View Slide

21. Safe Modeがありました
    プラグインを全部無効化した状態で無事にログイン。
    該当プラグインを削除して
    めでたしめでたし。
    　　うれしかったポイント
    

    View Slide

22. 続。FTPは使えない
    テーマ内の画像差し替えとかcssとかめっちゃ触りたい
    　　ハマったポイント
    

    View Slide

23. テーマとGitHubの連携
    GitHubと連携することで更新ができるプラグイン
    『Shifter Github Plugin/Theme Installer』
    

    View Slide

24. が、しかし。
    

    View Slide

25. Githubの超基本的なことがわかってないと
    説明書きの意味がわからない
    説明はとっても丁寧に書かれてます。
    https://www.digitalcube.jp/shifter/10479/
    

    View Slide

26. 例えば
    

    View Slide

27. 『.github/workflows/release.yml』
    のファイルを自分のリポジトリにコピーして・・・という手順
    『ファイルを新規で作ってコピペする』の
    やり方がわからない
    

    View Slide

28. FTPみたいに階層ごとにフォルダを作るのかなー？と思ってやってみたら違うし
    そもそもフォルダってどうやって作るんやろ？Create fileってフォルダやないよなあ。
    どこにコピペしたらええんやろ？？うーん管理画面意味がわからん・・・
    ※この時点でアップロードも新規追加も知りません
    ? ?
    ?
    これが初心者です。お恥ずかしい。
    一度こころ折れました。Shifter関係ないけど。
    

    View Slide

29. その他にも
    

    View Slide

30. GitHub Actionsも理解してなかった
    動作完了を待つために小休憩することで解決
    

    View Slide

31. 最初に更新通知を見た時の感動は
    言い表せません
    めっちゃ達成感。
    

    View Slide

32. テーマとGitHubの連携が
    Shifter最大の難関でした
    でも、なんとかクリア！
    

    View Slide

33. 　実際にサイトを運営してみて
    Shifter、サイト管理がめっちゃ楽ですね。
    

    View Slide

34. セキュリティとか気にしなくていいし。
    表示もめっちゃ早い。
    

    View Slide

35. トラブった時に
    サポートに気軽に相談できるという安心感。
    

    View Slide

36. デザイナーも、怖がらずに使ってみて欲しい
    エンジニアじゃなくても使えるよ！
    

    View Slide

37. ありがとうございました
    

    View Slide