話題のChatGTPの登場でいろいろな仕事がAIに置き換わると言われ、コーディングもAIにできるという主張も見かけますが、はたしで何処まで可能か。

先日、とある案件で一部、ChatGTPを使用してコードを書いてみました。

内容的にはvideoタグの再生において条件がいくつかあり、それをjavascriptで動かすようなものでした。

ChatGTPに条件を記入し、HTMLでコードを書いてと指示を出すと、HTML（インラインでCSSとjavascriptも記載）されました。

AIに指示を出す際は詳細かつ正確に

AIに指示を出す際は詳細かつ正確なほうがうまくいきます。プログラミングなので当然ですが。ただ、いざ書くと細かい指示を考えるのは難しいので、要件をけずって簡潔な指示をしました。

出てきた結果をみて、不足する条件を書き足して何度か繰り返すと、かなり理想に近いコードが出来上がりました。

その後は出来上がったコードに対して、直して欲しい条件を支持して、より条件に合う挙動を実現してもらいました。

最終的にはそこから、デザインにあわせてコードを修正したり、バグをなおしたりしたので、結構自分でコードを書く必要はありましたが、htmlもcssもすべてコードが出来上がるので、やりたいことが動くものを素早く作り確認するまでであれば、人手よりはるかに早くできそうです。

今回はデザインがすこし複雑なのでChatGTPに言葉で説明することがむずかしいので、そこは自分で書いたのと、videoの自動再生には、muted playsinlineが必要なのですが、それは書かれないという結果だったので、自分で直す必要がありました。

また、バグを生んでしまうところがあったのですが、原因を自分で特定しなくてはならず、デバックで1日かかってしまったりと、完成させるまでにはそれなりの作業をしました。

とはいえ、素早く動くものが作れるのと、よく使うコードなんだけど、いざ書くと時間がかかるようなところはChatGTPでささっとできるので、セキュリティに関わることや、外部に出してはいけない情報を含まない範囲で使うなら、大幅な短縮ができるツールになりそうです。

先日おこなった静的html案件で、途中から数カ国語に展開することがわかり、言語分の変更をどうするか悩みました。

特設サイトで基本的に文字が画像なで、タイトルなどは英語ということもあり、ほとんど変えることはないのですが、HTMLタグのlang属性を変えておきたいところ。

ページ数は10ページほどですが、８言語あるので修正が起きた時に全部直すのはちょっと手間がもったいない。phpならブラウザの言語設定をもとに自動で変えられるのでphpにするかなとも思ったのですが、ローカルのphp対応がうまくいかなかったので他の方法を探すと、htaccessファイルにhtmlをphpとして実行するように設定させることができるという方法があることを知り、無事コードを共通して使えることができました。

あまりないケースですが、ちょっと動的処理を入れたい時に重宝しそうです。

サーバーによってはうまく動かないらしいので、事前確認は必要です。

先日、プロジェクト用の新規サイトをアップするサーバーにおいて、既存の本社データベース内に作成して欲しいという依頼がありました。

接頭語を変更すれば、同じデータベースでもインストール可能ではあるものの、データベースを一緒にするというケースがこれまでになかったのと、そもそもデータベースを一緒にして、今後問題ないのだろうかという不安がよぎりました。

何度か担当者の方とやりとりしながら進め方をつめて行きましたが、何かあった際のバックアップをどうするのかというところで纏まらず、別サーバーに入れることになりました。（データベースだけ別にすればよかったのですが、そこもいろいろと話が纏まらず）。

さて、ローカルからの移行はプラグイン「All-in-One WP Migration」を使用して行いますが、あらためてデータベースについて考えてみると、「All-in-One WP Migration」を使用するとデータベースを上書きするので、前からあった別のサイトを消してしまう可能性があることに気がつきました。

このようなケースがないので、語っているBlogなどが無く、同じデータベースで進めていたら危ないところでした。また、バックアップ系のプラグインもデータベースをサイトごとに書き直すので、データベースに複数サイトいれると使用ができないかと思われます。

別サイトのデータベースを同じにするメリット自体ないのであまり無いケースですが、改めて分ける必要があると確認できた案件でした。

店舗情報のように、入力項目をあらかじめ定義しておくことで、入力のばらつきを無くすのに必須のカスタムフィールド。

基本的にはプラグインでフィールドの設定をしますが、WordpressのカスタムフィールドはAdvanced Custom Fieldsがもっとも有名で、カスタマイズ方法も多く見つかるので安心して使用できるのですが、「繰り返しフィールド」を使うためのアドオンが有料で、金額も年払いなので、なかなか使いづらいところです。

Smart Custom Fieldsは、「繰り返しフィールド」が無料で使えますが、wysiwygエディタのカスタムができないので、入力にすこし難あり。テキスト色の選択肢が決まっていたり、表が無いなど、最低限欲しい要素が不足しているのが特に痛いところです。

主にこの2つのプラグインが有名なので、たびたび悩むカスタムフィールドですが、Custom Field Suiteというプラグインがあるということを最近知りました。

今まで全然聞かなかったので、最近出たプラグインかと思っていたのですが、開発記録を見るとかなり10年前からあるようで、なぜ最近まで知る機会がなかったのかと、驚いてしまいました。

無料のまま「繰り返しフィールド」が使えて「wysiwygエディタのカスタム」もできるということで、上記2つのプラグインの欠点を補っています。

いろいろとカスタムしたい時に「Advanced Custom Fields」ほど応用が効くのか不明なのですが、次の機会に使ってみたいです。

フォントサイズやwidth、heightをレスポンシブルにあわせて可変する方法としては、vw、vhなどを使用するのがオーソドックスですが、デザインはイラストレーターやXDのようなツールで作成されるため、単位がpxになっています。

そのため、これを置き換える計算が面倒であったり、もし自動化できたとしても、デザインと比較する時に単位が違うと面倒であったります。

ここで、clampを使うと最大値、最小値をpxで指定できるのでデザインとの比較がしやすくなります。

font-size: clamp(14px, 16 / 1365 * 100vw, 16px);

左の 14px が最小値。右の 16px が最大値になります。 16 / 1365 * 100vw でvwに変換する計算がおこなわれて、かつ最大値が適用される幅を規定します。この場合は1365px以上ウィンドウ幅を広げても16px以上大きくなりません。

clamはwidth、heightのほか、top、right、bottom、leftなどにも使えるので非常に使い所がおおいです。

width: clamp(14px, 25 / 1365 * 100vw, 25px);
height: clamp(17px, 18 / 1365 * 100vw, 18px);
bottom: clamp(24px, 28 / 1365 * 100vw, 28px);

若干、記述が長くなるので使用箇所が増えてくると、入力するのがすこし面倒になってきますが、どこかにコピーしておいて、必要な時にペーストするなどすれば手間を短くできそうです。