👏

非coderが文書修正ができるようになるために

2022/11/14に公開

CSS

introduction-なぜこの記事を読んでほしいのか

この記事は、主にweb系の会社で働いている方に向けて書いたものです。
webサイトを作るときには、必ずdesigner、coder、director、writerが存在します(分割の仕方はそれぞれですが、この記事ではこの４つと仮定します)。僕はcoderの役割に回っているわけですが、coderにとって一番心理的負担のでかい作業が文書修正です。

それはcssやjsなどの頭の使う実装と異なり、html(php)の一部をちょこっと変えるだけ。coderは文書修正が来れば、そのためにvscodeを開いて、サーバーを立ち上げて、アップロードするためにcyberduckを開いて…。それも、別の作業で頭をフルに使ってたときに来てしまったらどうでしょう。　一度そっちに意識をむけ、もう一度頭のスイッチを入れることは作業効率が悪いように感じませんか。coderとしては、できるだけ自分の頭をフルに使える時間を有効活用して会社に最大の生産性をもたらしたい訳なのです。

また、修正を依頼される時は基本的にwriterやdirectorからだと思いますが、彼ら視点に立ってみても修正を伝えるのは負担なことなのです。なぜなら、修正文書をわざわざlineなどにうち、修正箇所を文字や写真で伝えなくてはならないからです。伝えたいことを完璧に伝えようとするのは得てして難しいのですから、writerやdirectorもその時間をほかに使いたいわけです。

じゃあ、writerやdirectorが自分で文書修正すればええやないかってなるのは自然ではないでしょうか？今回はそれを達成すべく、できるだけ明確に、かつ非coderに対してもわかりやすいように解説していきます。

目的

・非coderが自分で文書修正できること(wordpressサイトor非CMSサイトに限る)
・非coderがサーバー内ディレクトリの構造を理解し、サーバー内のファイルを触る恐怖心を取り除くこと

メリット

・writer、director、coderの全員の有効活用できる時間の増加
・修正を相手に伝える量が減るので、非coderはそこに頭脳を使う量が減り、別のところに頭脳を使えるようになる
・web系に務めるものとしても基礎教養を身につけられるので、全体としてレベルアップできる

デメリット

・非coderがファイルを触るので、少なからずバグが生じる恐れがある
・非coderはこの記事を読んで理解するという学習コストが生じる
・coderによってはサーバー環境を触ってほしくない人も少なからずいるので確認が必要

１つ目に関しては、この記事で紹介する対策を講じればある程度対処することが出来ます。２つ目に関してはきっとこの記事を読めばhtmlの構造理解の助けにもなりますし、何よりチームとしても作業効率が上昇しますので一度腰を上げて読んでくださると嬉しいです。3つ目は絶対必要です。この作業は、非coderとcoder間にある程度の信頼関係が成り立っていないと出来ないことなので、入念な確認はお願いします。

では、初めていきましょう。

概要

やりたいこととしては以下のようになります。

1. 自分のパソコンからサーバーのファイルにアクセスできるようにする
2. サーバーのファイルから適切に修正したいファイルを選択する
3. 修正したい箇所を特定し、適切に修正する

1はサーバーに関しての基礎知識が必要です。2は、wordpressのファイル構造に関する基礎知識が必要です(非wordpressのサイトもあるが、今主流でウチが主に扱っているので)。3は、htmlやphpの基本知識(文書関係)が必要になります。

前提

これはcoderさんが必ず準備をおこなってからやるものです。この前提は、coderさんのみ読んで下さい。
前提として想定されているのは、既にサーバーに本番環境がアップロードされており、サブFTPアカウントが作成されているかつ適切にディレクトリ設定ができていることを想定しております。接続先ディレクトリをどこまで上の階層で取るかは非coderの知識量などで自己判断をお願いします。基本的にはthemefileに直接つなげてもらえて入れば2の準備は必要ありません。

また、サイトマップを作ってあげていると３の内容が非常にやりやすくなると思います。3を見てからやっても良いでしょう。

事前準備

今回サーバーを扱うにあたって、いくつかのアプリケーションのインストールが必要です。それが以下の3つ。

・cyberduck
・vscode
・google chrome

cyberduckは、簡単に言うとサーバーにアクセスするために必要なアプリケーションです。もう少し詳しく言うと、FTP(File Transfer Protocol)クライアントとよばれる、サーバーと僕らとの連絡をつないでくれる、いわば恋のキューピットみたいなやつです(違う)。詳しく知りたい方は以下のサイトを参考にしてください。
https://tab-log.com/netshop-ftpclient

cyberduckのインストール方法は超絶簡単。以下のサイトに行けばすぐ分かる。やる。今。ここで。
https://cyberduck.io/download/

それが怖ければ以下のサイトから優しく教えてもらって下さい。
https://tab-log.com/ftp-cyberduck

vscodeは、よくcoderが開いているプログラミングのコードがずらーーーーって見れるやつありますよね。あれです。
今回vscodeを用いて、htmlをいじりやすくします。テキストエディタよりも色がついてどこに何があるかがわかりやすく、補完機能もありますので(今回はあまり恩恵は無い)、入れておいて損はないものです。

ここでvscodeのインストール方法を解説してもいいのですが、他の方がもっとわかりやすくまとめてくださっているので、今回はそちらに解説をゆずります。以下にサイトを貼っておきますね。めんどくさいわけじゃないよ。全然そんなこと無いから（；^ω^）

windows向け

mac向け

また、もしも持っていなければgoogle chromeもインストールしてもらえているといいですね。

1.自分のパソコンからサーバーのファイルにアクセスできるようにする

使うのはcyberduckです。先程も述べたように、cyberduckを使えばサーバーに接続することができるのですが、起動しただけでサーバーに繋がるなんてそんなうまい話はありません。どの目的地に行くにしても住所が必要なように、サーバーにつなげるためにはアドレスが必要になります。まずは最初からやってみましょう。
まずは以下に示している新規接続の部分を押してみて下さい。

そして開いて出てくるのが以下のような画面だと思います。ここでサーバーに接続するための設定を行います。

それぞれを簡単に解説します。

接続形式

サーバーにつなげるということは、自分のパソコンとサーバーの間でデータのやり取りを可能にするということです。サーバーとのやり取りを行う際、どのようにおくるの？という取り決めがこの接続形式、あるいは接続する際の約束事とも言います。これを難しい言葉で言うのならプロトコルといいます。郵便を送るのにも中身が割れ物なら割れ物ですよと分かるシールをはったり、速達ならば速達のシールを貼ったりする取り決めがありますね。あれとおなじです。

今回なぜこれが必要なのかというと、本来はサーバーとパソコン間でやり取りをする際、一度インターネットの海にデータはいきます。そこでパソコンやサーバーそれぞれの住所を特定して運びますが、たとえばそのデータがなにも暗号化されていない、つまり素っ裸で放り出されていたらどうでしょう。海にいるハッカーたちにとっては格好のカモですね。そんなハッカーたちにデータを盗まれないように、暗号化する必要があります。暗号化するよとサーバーに認識させるためには、お互いに分かるように共通の約束をしておくといいですね。だからプロトコルが必要なのです。サーバーと秘密の約束をするのです。青春を思い出しませんか？

まぁ実際は今回扱う約束はFTPかFTP-SSLの2種類なので、全然秘密じゃないですが。

サーバー名

これが、いわばサーバーの住所です。よくドメインドメインと言われますが、一度サーバーの住所であるサーバー名とドメインの名前の違いを明確にしておきましょうか。へーサーバーの住所なんだﾊﾅﾎｼﾞぐらいでいい人はこれを飛ばして次を読んで下さい。

まずドメインというのは、一言でいうとインターネット上の住所のことを言います。たとえばあなたが皇居に住んでいたとしましょう。皇居の住所は以下になります。

東京都千代田区千代田１−１

インターネットというのは、現実の世界のように無限に近い土地があって、縦横無尽に建物が建てられているようなものです。しかしもしも住所が分かれば、google mapをつかって誰だってそこへ向かうことが出来ますよね(絶望的に方向音痴な人は考えてません)。それと一緒で、例えばグーグルならば以下のドメインを指定してやればサイトに行けるはずです。実際にchromeのサイトをつかって、以下のドメインをコピペして見て下さい。googleに行くことでしょう。

google.com

このように、ドメインを指定してやれば(前にhttpなどのプロトコルの設定は必要ですが)、簡単にそのサイトへ飛んでいくことが出来ます。さて、私達はそれぞれ、ある郵便番号を持った家にすんでいますね。郵便番号を指定しなくても住所にたどり着くことが出来ますが、郵便番号を指定すればある程度住んでいる範囲は特定できます。これ、実はサーバーとドメインの関係と非常によく似ているんです。ドメインを指定してやればそれぞれのホームページに行くことが出来ます。しかし、どのドメインも結局はサーバーの中にある住所ですから、サーバーを指定してやればいくつかのドメインが住んでいる範囲を指定することが出来ます。実際にサーバーを指定してホームページに行くことはないですが、サーバー名を用いればそのサーバーの住所を指定でき、そこからドメインとやり取りができます。つまりサーバー名はドメインで言うところの郵便番号に相当すると考えても良いでしょう。

また、サーバーはもともとIPアドレスという数字の羅列によって、それぞれのサイトの住所が割り当てられています。つまりその数字の羅列を用いれば(本当はもっと複雑ですが)、そのサイトに訪れることが出来ます。しかしサイトに訪れるのは数字が大好きなロボットではなく我々人間なので、認知しやすい名前をその数字に対応させることによって、ネットの回遊性を向上させています。この数字に名前を割り当てるシステムをDNS(Domain Name System)と呼びます。もっとドメインについて知りたければ以下のサイトが微妙に参考になります。

ポート番号

パソコンには、データをやり取りする際、その役割の違いによって処理するプログラムは異なります。たとえば、メールを受信するプログラムとweｂを閲覧するプログラムは全く異なりますね。そこで、それぞれのプログラムに適切にデータを届けるために、ポート番号というものを用いてプログラムごとに番号を割り当て、適切なデータを贈りやすくしているのです。ポートというのはもともと港という意味ですが、港ではデータを輸入してプログラムによって処理されているわけですね。もっと詳しく知りたい方は以下のサイトへ。
https://it-biz.online/it-skills/port/

ユーザー名・パスワード

サーバー名を指定すれば誰でもファイルをいじれるようじゃこれまたハッカーのカモになってしまいます。そこで、みなさんがよくするようにサーバーにロックを掛け、アカウントを知らない人は入れない仕組みを作っているのです。

SSH private key

SSH private keyに関しては今回は扱いませんので無視で大丈夫です。

実際に接続してみる

今回はxserverで接続するので、以下のサイトを閲覧してみて下さい。わからなかったらcoderさんに聞きながら、一旦ファイルに入れることを確認してみて下さい。

すると、以下のようにディレクトリが表示されると思います。
(ディレクトリとはフォルダと意味は同じです。プログラミングの文脈において多用されます。)

2. サーバーのファイルから適切に修正したいファイルを選択する

wordpressの構造

基本的に今主流なのはwordpressなのですが、パット見複雑なファイル構造をもっているために非coderの方にとってはこの中から自分の修正したいファイルを特定したいと言っても難しいのではないでしょうか。wordpressのファイル構造は一度わかってみるとそんなに難しくないのですが、それを理解するためにはそもそもwordpressというソフトウェアを使って何をしているのか？という根本的問いにうまく答えられなくてはこのファイル構造は理解できません。

wordpressとは

実は、wordpressとはもともとブログを簡単に書くために使われたブログツールだったのです。この使い方は今も受け継がれ、wordpressで動いているサイトは基本的にブログのサイトであることが多いです。ブログを単に書きたい人はデザインを１から考えてらんないんですから、テンプレートデザインを用意してもらって、そのデザインの元できれいなブログサイトを作っていくのが簡単な方法だとは思いませんか。それをwordpressは実現してくれました。そのため、今でもwordpressにはテンプレートデザインが１万以上存在してると思います(適当にいってるだけ)。ではwordpressは固定のデザインしか作ることが出来ないのでしょうか？いやいや、そんなことはありません。多くのサイトはdesignerさん達が1からデザインを考えてくれて、1から僕らcoderがcodingしているではありませんか。じゃあ、一体僕らは何をしているのか？答えは、
1からテンプレートデザインを作っている
のです。そう、固定のデザインから抜けるためには、自分から作ればいいじゃない。そうして作ったデザインが今の多くのサイトになります。

自分からテーマを作ること-なぜ文書修正はwordpress内でできないのか

テンプレートデザインは正式にはテーマとよばれ、自分たちが作ったテーマはオリジナルテーマとよばれます。多くのサイトが作るオリジナルテーマと、世に公開されているテーマの大きな違いは、文書修正をwordpress内でできないことが多いことではないでしょうか(これはdirectorやwriterの方はよくわかっているかもしれません)。それは、実は理由があります。オリジナルテーマをつくるには様々な工程が必要なのですが、世に出回っているテーマと同じように、wordpress内ですべての文章を修正できたり、デザインをwordpress内でいじれるぐらいのシステムを作ろうとするとめちゃくちゃ労力がかかります。また、そもそもそこまでしなくてもhtml内に直接文章を書き込めばサイトに表示されるので基本的にはサイトにきれいに表示されることをサイト作成のゴールにします。そのため、文書修正はhtmlやphpでおこなう必要があるのですね。

ファイル構造の理解-修正したいファイルはどこに存在するのか

結論から申しますと、すべてのテーマは"theme"という名のテーマファイルに格納されております。かなり深い層にねむっているので、一緒に起こしに行きましょう。以下に重要だなと思うファイル構造をピックアップして載せました。public_htmlというファイルが先程のディレクトリにあると思いますが、そこから如何に下層に入っていくかが問題になります。１ディレクトリずつ丁寧に解説しながら目的のファイルを特定していきましょう。

public_html
 ┠ wp-includes
 ┠ wp-admin
 ┠ その他のファイル
 ┗ wp−content
       ┠ uploads
       ┠ upgrade
       ┠ plugins
       ┠ mu-plugins
       ┠ languages
       ┠ index.php
       ┠ ai1wm-backups
       ┗ themes
	   ┠ テーマファイル

public_htmlとその他のファイル

まず初期画面にあるpublic_htmlについて、そして他のファイルに関して解説します。

public_htmlは、基本的にサーバーがこの中のファイルを公開してやるから、こんなかに公開したいファイルを入れてくれよとサーバーが指示しているファイルです。wordpressのないサイトは、このファイルの中に修正したいファイルがすぐ入っていることが多いです。今回はwordpressがココに入って、公開したいファイルを制御していると考えて下さい。

他のファイルはメールサーバーやログサーバーです。メールを送受信するためであったり、バグをログとして残すためのファイルなので、非coderの方は気にする必要のないフォルダです。

public_htmlの中に入る

中に入ると、wpという接頭辞がほとんどのファイルに付いていると思います。これがすべてwordpressという一つのソフトウェアを構成するファイル群です。サイトにwordpressを設置するためには、このようにpublic_htmlの中にwordpressのソフトウェアごとインストールする必要があります。この中のファイルはloginやload、signupなどのファイルが見えると思いますが、これはwordpressのバックで行われているlogin制御、loadのための処理が記述されているファイルです。特に、フォルダになっているものが3つあると思います。

まずwp-adminですが、この中にはwordpressの管理画面のデザイン、機能、文書構造を作り上げているファイルが収納されています。また、wp-includesには、wordpress内の機能が入っています。投稿を自動的に表示してくれるプログラミングなどは全てここにつまっているのですね。つまりwordpress内のプログラム系を担っているものです。

最後に見るのがwp-contentです。これがwordpressの内容になります。ココに入ってみるともっと本質的なものが見えてきます。

wp-contentの中に入る

ココにはたくさん入っていますが、基本的にはユーザーのwordpress内の編集がココに含まれています。例えばサムネイルの変更やwordpressのエディタにより編集された文書のログ、導入したプラグインなどなど、、、とりあえずユーザー側の操作の内容が全てココに入ります。例えばuploads内にはアップロードされた写真類、pluginsにはプラグインが入っています。lnaguagesには日本語で表示するのか、フォントは。、、、？のように。
もしかするとお気づきの方もいるかも知れませんが、themesが今回も目的となるファイルです。ココにはテーマファイルが収納されています。ココに入ってみると、やっとテーマを操作できるようになります。基本的には僕らcodeｒでさえこのテーマファイル以外を触ることはほとんどありません。

themesに入る

themesに入るとこのように、twentytwentytwoのようにファイルが表示されます。wordpressではデフォルトのテーマファイルが一年ごとに追加されるので、このように202２年のデフォルトテーマファイル、2021年のデフォルトテーマファイル、、、が追加されていっています。該当のファイルに入り(各々違うと思います。テストの場合はtwentytwentytwoに入ってみましょう)、中身を確認してみて下さい。そこにあるindex.phpが初めに表示されるファイルです。

3. 修正したい箇所を特定し、適切に修正する-theme内におけるそれぞれのファイルの役割について

2まで読んでくださった方は、きっとthemeファイルの中にまで侵入することが出来たかと思います。(以下のようになっているはず)
ここからはcoderさんの助けが必要です。どこに何があるのかは、coder自身が可視化してあげないと非coderには何もわからないからです。しかし、coder側にもどのファイルをどこに収納するかとか、cssがどんな役割をしているのかなどは一般論としてあり、それを解説しておくことは価値のあることでしょう。

htmlの役割

まずはhtmlの役割から。html(Hyper Text Markup Language)は、主にサイトの文書構造を示すところになります。htmlはもともと、誰に対しても読みやすいユニバーサルな文書を作成しようとの目的で作られました。それは老若男女問わず、耳の聞こえない人、目の見えない人、あるいは人以外のコンピュータに対しても理解のしやすいものとなっています。人だけでなく、コンピュータに対しても理解のしやすいものとなるように考えられているので、このように一見プログラミング言語のように見えるのです。もしもhtmlについて理解したければ以下の動画やサイトを閲覧してみると良いかもしれません。どちらも僕が初めて勉強した時に参照したものです。

https://youtu.be/WYDzyIgOezQ

基本的にはhtmlはタグという概念を用いて文書を構成していきます。タグとは、その中の要素がどのような役割を持っているのかを示したものです。例えば上のtitileタグは中身の要素がタイトルであることを示しています。また、divというタグにclassがついているかと思いますが、このクラスは基本的にcssのデザインを当てる時に、どこに当てたい要素があるのかを示す助けになる、いわば二つ名のようなものです。

htmlの基本構造は、headタグとbodyタグの２つから形成されます。headタグはデザインを作るcssファイルはどのファイルとか、titleはどんな表示をするとか、ようは裏側(詳しく言うとブラウザに要求する操作のオプションみたいな感じです)の話です。基本的には文書修正においてここを変更することはありません。

みなさんが気にするべきはbodyタグです。ここに書いた文章が基本的には表示されることになります。ここの中に様々なタグがあると思いますが、divはデザイン用のタグ、pは文章用のタグ、h1,h2..は見出し用のタグであることをおさえておけばよいです。

phpの役割

htmlが文書構造を担っているのか、、、とおもってフォルダの中を探してみても、どこにも.htmlのファイルはないと思います。これは、htmlがphpファイルに置き換わっているため起きる現象です。ではphpの役割について解説しましょう。

phpはhtmlにプログラミング的な処理を求めて新たにできた言語です。簡単な例で言えば、ブラウザごとに文書の表示を変えたい、同じような文章を3回繰り返し表示させたいといった場合に、プログラミングによって簡単に実現することが出来ます。特に後者の場合は、htmlファイルに同じ文書を3回繰り返して書くよりもプログラミングを用いてこの文書を3回繰り返してくれよ、と命令したほうが圧倒的にコードが短くなります。このような理由からhtmlよりもphpを用いることが増えました。

wordpressはユーザー側の操作をhtmlに実現するためにプログラミングを使う必要があるため、phpを用いています。wordpress側もそれを前提としているため、htmlファイルをthemeファイルに埋め込んでも簡単には表示してくれません。

ちなみに、phpはプログラミングの操作を行うため、htmlとは少し違った処理を行います。
htmlはサーバー内にあるhtmlファイルをそのままブラウザ(safariなど)を通して表示してくれよということになるのですが、phpファイルはまずユーザーからhtmlファイルがほしいという要求をもらったとき、phpファイルからhtmlファイルをプログラミングに従って生成します。それでブラウザを通してhtmlを表示してもらいます。phpの場合は、一旦プログラミングをhtmlファイルに翻訳する必要があるのです。この翻訳作業のことをコンパイルと呼びます。

phpは略さずに言うとHypertext Preprocessorといいます(PはどこいってんPは！ってなるかと思いますがそれは僕にもわかりません、おそらく性格のいい人にしか見えない設計になっているのでしょう)。Hypertextはhtmlのことを指し、preprocessorは前処理を行うという意味の単語ですが、htmlファイルを生成する前段階でプログラミング処理を行っている、という意味で名前通りのことをしていると納得して頂けるのではないでしょうか。

css,jsの役割とassetsの中身

cssはまずデザインを作るファイルです。また、jsはjavascriptの略で、基本的にはタブメニューやハンバーガーメニューなど、ユーザー側からサイトを操作できるものを作成するファイルです。これらは基本的には触ることはありません。

assetsの中身は基本的にはimageやvideoなど、画像や動画素材を入れています。これも余り触ることはないと思います。画像の名前をかってに変更されると、htmlで指定した名前とことなってしまうので無断で名前を変更することはないようにしましょう。

scssの役割

scssとは、Syntactically Awesome Stylesheetsの略です(ほなSASSやないかい！と感じた方は正解です。本来はsassなのですが、scssの方がポピュラーな呼び方になっています)。Syntacticallyは構文的にという意味で、cssよりも見やすい構文を形成しています。Awesomeはすごい！って意味です。馬鹿にしてるわけじゃなくてマジでそうなんです。んで、なんでscssを使うかというと、cssよりも保守性が高い(修正しやすいから)です。詳しく言うとめちゃくちゃ難しくなるのですが、以下のようにcssのコードが、scssになるとコードが短くなっていることからも修正のしやすさは読み取れるのではないかと思います。

css


div{
    background-color: aqua;
}

div div{
    color: red;
    font-size: 30px;
}

scss

div{
    background-color: aqua;
    div{
        color: red;
    }
}

ちなみにscssはphp同様に、コンパイラの部類に入ります。phpのように、scssもコンパイルによってcssファイルを生成します。しかしphpと異なるのは、コンパイルのやり方が異なるということです。phpはサーバー内に存在しており、ユーザーからのリクエスト時にコンパイルを行います。しかしscssは、ローカル環境(サーバーではなくcoderの持っているパソコンのこと)にコンパイルするための別アプリケーション(モジュール)を用意し、そこでコンパイルを行います。つまりブラウザがコンパイルを行うのではなく、ローカルのパソコンがコンパイルを行うのです。つまり非coderさんはcssファイル同様、このファイルを触りません。

min.css、min.js(発展的内容)

おそらくhtmlの中身を見たことがある方や、今実際に見ている方の中には、min.cssやmin.jsの存在が目についたのではないかと思います。minというのはそのファイルを更に軽くしたファイルですよという意味で、ファイルを見てみると改行やスペースを削減した形のファイルがあります。coderはサーバーに負担をかけないように、min化することによってファイルを軽くしているのですよ。

phpを修正する

基本的には、実際のサイトと照らし合わせながら編集をしていきます。基本的にはphpのプログラミングは以下のように、<?ではじまり?>でおわります。なのでそれ以外は基本的にはhtmlファイルと構造は変わりません。

編集のやり方は簡単です。特定のファイルを右クリックして、エディタで編集→codeを選択してファイルを開きましょう。これでファイルをvscodeで簡単に編集することが出来ます。これはサーバーのファイルを直接触っていることに注意しましょう。

例えばdiv内のこんにちは→こんばんはに変更してみましょうか。するとサイト内でこんばんはに変更されると思います。他にも、サイトを見ながら変更内容を確認していきます。
ここからは各々の会社やチーム内で、実践的にphpを修正していって認知負荷を下げて頂ければと思います。

coderが負担にならないように-実践に入る前にセーブ方法をしる

先述したように、coderが触ってもファイルにはバグが生じるのですから、非coderがファイルを触るともっとバグの生じる確率が高まります。みなさんはゲームなどをしているとき、変なことが起こったり、自分の都合の悪いことが起こった場合に備えて、セーブデータをいくつか用意しませんか？それがバックアップという作業です。それと同様に、作業前に自分の操作した事によるバグからもとに戻せるような処置をとっておきましょう。

バックアップのやり方

基本的には、自分の操作する前のファイルを自分のパソコンに一旦置いて、それをバックアップとしてもしもバグった場合はそれをアップロードすることによって対応します。以下のように、テーマファイルごと選択して、右クリック→指定の場所にダウンロード→自分のわかり易い場所にバックアップとしておいておきましょう。僕はdesktop内にbackup用フォルダを作成してその中に入れることによって管理しています。

これは一旦実践しておきましょう。

coder側もgithubでの管理を

上のバックアップは非coderに最新のバックアップを保持してもらうような形になります。もしも不安ならば、githubなどで定期的にバックアップは作成しておくと良いと思います。今回は非coder向けの記事なので、githubの管理は語りません。

php実践編

実際にどんな修正があるのかわからない非coderさんのために、いくつか例を提示しました。まずは一つ目に簡単な内容から。

実践01:簡単な文書修正の場合

見出しに関しては注意が必要ですが(これは後々解説します)、本文に関しては基本的に位置調整のcssがあたっておりません。そのため、簡単に修正することが出来ます。どこを修正するかを特定するために一番簡単なのは、"developer tool"を用いることです。developer toolの解説はココでは省略しますが、coderは基本的にこのtoolを用いて修正箇所を特定しております。

実践01

<div class="p-about__test">
    <p>コメントが入りますコメントが入りますコメントが入りますコメントが入りますコメントが入りますコメントが入りますコメントが入りますコメントが入ります</p> 
</div>

実践02:見出しの文書修正(spanタグが中に入っている場合)

見出しには、spanタグが入っている場合が多いです。spanタグというのは、文字のデザイン変更に用いられます。例えば以下のようになっています。

実践02-1

<div class="p-about__content">
        アンパンアンパン<span class="br"></span>
        アンパンアンパン<span class="br"></span>
        アンパンアンパン<span class="sp-br"></span>アンパンアンパン
</div>

実践02-2

<span><span class="p-plan__fgreen">テス</span>テス<br><span class="p-plan__fgreen">テス</span>テス</span>

実践02-3

<p class="sub1-message">あ<span>い</span><span>う</span><span>え</span><span>お</span>ああ</p>

こういった文章は、spanで位置調整がなされていたりする場合が多いです。文書を一旦変えてみて、それが修正できる文章なのかを見てみましょう。もしもそれでレイアウトが崩れたりしたらmacbookの場合はcommand+zを用いて修正することが出来ます。また、command+Fでページ内検索をすることができますので、これを活用するのもありです。

実践03：imgタグのaltについての修正

directorにとっては、alt属性の修正というのはつきものでしょう。例えばwordpressになれば以下のようになります。

実践03

<img src="<?php echo get_template_directory_uri() ;?>/img/arrow_for_solution.svg" alt="矢印" class="arrow_solution">

ここでget_template_directory_uri()という関数がありますが、あまり気にしなくて大丈夫です。これはwordpressの関数で、自動的にテーマファイルのurlを取得してくれる関数です。
esc_urlなどの関数もありますが、基本的にwordpressの関数は文字の出力の関するものですから、その都度調べたりcoderさんに聞けば容易に理解することが出来ます。

command + Fでaltを検索することによって、簡単に特定のimgタグを見つけることができます。

実践04:phpのforeach関数に対する修正

実践04

<div class="p-about__cards">
        <?php 
        $cards = array(
            array(
                'maintitle' => 'aaaa',
                'tag' => 'aaaaaaa',
                'content'=>'テストテストテストテストテスト・テスト',
            ),
	    array(
                'maintitle' => 'aaaa',
                'tag' => 'aaaaaaa',
                'content'=>'テストテストテストテストテスト・テスト',
            ),
	    array(
                'maintitle' => 'aaaa',
                'tag' => 'aaaaaaa',
                'content'=>'テストテストテストテストテスト・テスト',
            ),
	    array(
                'maintitle' => 'aaaa',
                'tag' => 'aaaaaaa',
                'content'=>'テストテストテストテストテスト・テスト',
            ),
            
        )?>
        
        <?php foreach($cards as $key => $value): ?>
            <div class="<?php echo "p-about__cardinner p-about__cardinner0".$key;?>">
                <figure class="p-about__figure p-about__figure　<?php echo "p-about__figure--0".$key;?>"></figure>
                <div class="c-aboutcard">
                    <div class="c-aboutcard__inner">
                        <h3 class="c-aboutcard__maintitle">
                        <?php echo $value['maintitle'] ;?>
                        </h3>
                        <p class="c-aboutcard__tag">
                        <?php echo $value['tag'] ;?>
                        </p>
                        <p class="c-aboutcard__content">
                        <?php echo $value['content'] ;?>
                        </p>
                    </div>
                </div>
            </div>
        <?php if($key==1):?>
            <?php 
            echo <<< profile
        <div class="p-about__profile">
            <div class="p-about__prowrapper">
                <div class="p-about__proabove">
                    <img class="p-about__proimage" src="https://placehold.jp/130x182.png" alt="">
                    <div class="p-about__proname">
                        <h3 class="p-about__proteam">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                                <defs>
                                <text dy="0.4em" id="outTextx"><tspan>あああ</tspan>あああ</text>
                                </defs>
                                <use x="50%" y="50%" xlink:href="#outTextx"></use>
                            </svg>
                        </h3>
                        <p class="p-about__pro">
                       あああああああ
                        </p>
                    </div>
                </div>
                <div class="p-about__probelow">
                    <p>ああああああああああ</p> 
                </div>
            </div>
            <div class="p-about__prolink">
                <div class="p-about__prolinkinner">
                    <p class="p-about__prolinkcontent">
                        ああああああああああああああああ
                    </p>
                    <div class="p-about__more">
                        <div class="c-arrow__BtoR"></div>
                        <div class="p-about__moremore">
                            ああああああああああああ
                        </div>
                    </div>
                </div>
            </div>
        </div>
        profile;?>
        <?php endif;?>

        <?php endforeach; ?>
    </div>

foreachという関数について、もう少し詳しく説明しましょう。これは、ほとんどfor文と変わりはありません。
例えばpythonでfor文を用いる際は、

for文

 for i in range(10):
	 print(i)

とすると、0~9までの10この数字が出力されます。今回の場合は、以下のコードから下が核になっています。

<?php foreach($cards as $key => $value): ?>

これをすることによって、先の$cards変数の中の配列をすべて取り出して、一個ずつ出力できます。
そして、以下のコードによって、対応する値を出力しています。

<?php echo $value['tag'] ;?>

文章を変更する場合は、$cards変数内を変更すればいいわけですね。

実践05:phpのif文内に対する修正

foreachの中に、if文を用いる場合がよくあります。if文内では僕は基本的にヒアドキュメントという手法を用います。以下のように <<<　ｘ(xはなんでもいい)　という記号があれば、次にｘが登場するまでは全て文字列にしてくれるメソッドです。この中においても、文書自体の構造は変わりないので、その中を実践01と同様に修正すればよいです。

実践05

 <?php if($key==1):?>
            <?php 
            echo <<< profile
	    <div class="p-about__more">
                        <div class="c-arrow__BtoR"></div>
                        <div class="p-about__moremore">
                            もっとみる
                        </div>
                    </div>
	 profile;?>
<?php endif;?>

最後に

これで一旦の修正ができる様になったとは思いますが、まだreactの修正やwordpress以外の修正に関しては難しいかと思います。もしも実際に文書修正を行う場合に不安になるのであれば、coderさんに遠慮なく聞くといいかと思います。coderさん側も長い目で見れば効率化につながると思いますので、是非快く質問に答えてもらえると幸いです。非coderにとってもこの記事に書いたようなファイル構造やそれぞれのファイルの役割を理解すると、web系企業としてのレベルアップに繋がると思います。