ホーム > blog
  • WordPress 誕生20周年おめでとうございます!

    なおさんの投稿を見て、私もブログを書いてみようと思ました。
    After reading Nao’s post, I decided to write a blog.

    2008年のWordCamp TokyoではじめてWordPressのコミュニティーに参加して、社会人になって初めて社外のコミュニティーというものを知りました。
    I knew about WordPress community when I join WordCamp Tokyo 2008.

    そこから気がついたら、フリーランスになったり、経営者になったりして、今も色々経験が出来ています。
    After that, I realized that I became a freelancer and a manager, and I still have various experiences.

    世界中で現在進行系で動くWordPressのプロジェクトからは学ぶことがたくさんあり、日々勉強出来て嬉しいです。
    There are many things I can learn from WordPress that are currently in progress around the world, and I am happy to be able to learn every day.

    そして昨日今日と世界中でWordPress20周年をお祝いする投稿が見られますが。こんなに世界中の沢山の人が参加していているプロジェクトに一緒に参加できていることをとても嬉しく思います。
    And yesterday, today and around the world, we see posts celebrating the 20th anniversary of WordPress. I am very happy to be able to participate in a project with so many people from all over the world.

    20周年おめでとうございます。そしてこれからもどうぞよろしくお願いいたします。
    Congratulations🎉 on 20th anniversary.

    来月のWordCamp Euro 2023もとても楽しみにしています。
    I am looking forward to joining WordCamp Euro 2023. See you in Athena!

  • Block Themeにしてみましたので、とりあえず第一印象の共有など。

    もともと、それほど凝ったデザインでもなかったので、今回WordPress6.2において、ベータの表記が取れることとなった、テーマエディター部分を使う目的で、オリジナルのブロックテーマにしました。

    主なリソース

    作り方の参考には、以下を参考にしました。

    • 作って学ぶ WordPress ブロックテーマ (Compass Web Development)

    また作る際には、大本としてCreate Block Theme を利用しています。

    具体的な作り方

    作り方としては、プラグインを利用して、雛形となるテーマを作成し、そこからWordPressの管理画面で設定を追加し、一区切りごとに、プラグインを利用してテーマを上書きするという流れになります。

    主には、WordPressの管理画面でテーマに変更を加えていくだけでどんどんテーマが作れるわけで、とても驚きが大きいものでした。

    条件分岐などについては、都度テンプレートを分けるべきなのか、それとも条件分岐が利用できるブロックが今後デフォルトにも追加されるのか。そういったことが気になるところでありますが。とりあえずここまではできまして、一旦満足です。

    この制作手法の主となる Create Block Theme プラグインについては WordPress.tvにビデオがあるのでまだ知らない人はぜひ見てみてください。

    特にイケていると思った機能

    useRootPaddingAwareAlignments というtheme.jsonに追記できる機能がとてもイケていました。

    詳しい説明はこちらのHamanoさんの記事の該当箇所を読むのがわかりやすいと思います。

    https://qiita.com/AkiHamano/items/4c1576131a71fc41ef41#settingsuserootpaddingawarealignments 

    こちらは、サイト全体で画面幅に対して余白をもたせたいが。ヘッダーやフッター、コンテンツの途中などに、全幅で背景や画像を入れたい場合に、そのときは左右に余白をもたせたくない。しかし、その背景内では、余白を他と同じ様にもたせたい。

    みたいなちょっとなにいってるんだ?となるかもですが、おそらく一度でもブロックエディタでサイトを作ったことがある人ならピンとくるあれが解決できる設定です。

    こういうのが徐々に整えられていくのは大変助かりますね。(これまでテーマを提供されていた方が、独自にこういう問題に対応されていた場合に、その互換性を保ちつつ。新しい機能に対応しなければならないことが大変だ。ということも容易に想像がつきます。ありがとうございます。)

    一応 このテーマのリポジトリのURLをはっつけておきます。とはいえほんとほとんど何もしてないので、ファイルのすくなさと、コレまでのテーマ(クラシックテーマ)との違いに、初めての人はびっくりしてもらうだけもらって、それだけで十分かと思います。

    https://github.com/megane9988/block-theme-megane

    ブロックエディターの今後について

    WordPressではブロックエディターの次のフェーズとして共同編集が予定されています。コレまでに実装されたテーマ編集機能と組み合わさると、今後は画面を見ながら一緒にサイト作りをするといった、新しい体験ができるかもしれません。

    わたしはそのことについて、とても楽しみにしています。ではまたいつかおあいしましょう。

  • 認識してなかったことが認識できるようになるとき。を今後も増やしたい。

    どうも。わたしです。最近まで直毛だと思っていた私は、髪の毛を伸ばせば真ん中で分けてサラッと下に落ちるようになる。と思っていたのですが、実はそうならない。ということわかりました。妻に教えてもらって。美容師さんにも確認して、全体で癖のある髪質だということに、つい先日気が付きました。

    このように。「実はそうだったのに、全く気が付かずに過ごしている。」そんなことが多い私です。どうもこんにちわ。今日のアドベントカレンダーはそういう、内面的なお話です。

    こういう体験は皆さんにもあるのか。無いのか。そのあたりがよくわからないのですが。私はこういうことがよくよくあります。おそらく子供の時から、周りに比べてボーッとしていたので、そのあたりが今も影響しているのかなと思っています。

    これまでの気づいてなかったことに、後から気がついた例

    小学校の時で言えば、どういう仕組で成績表の評価がついているのかよくわからずに過ごしてました。テストってそのためにあったんですね。というかテストってものがあったんですね。授業の一環で、「今日はプリントの問題を解く日かー。」ぐらいにおもってました。

    就職活動時は、就職活動中にすべての会社の入社試験を受けられると思っていたのですが、実は数十社ぐらいしか受けられないということに途中で気がついてびっくりしました。エントリーシートをWebから200通ぐらい送ったのですが、それでも全く全体の企業数に届くわけ無く。さらに200社からの返信や、説明会参加だけでも無理なんだなと体験しました。

    大人というのは、だいたい全部のこと知っていて、正しく判断できるものだと思っていましたが、今大人の年になって全然そうではない自分がいますね。こんなに中身がかわらないまま月日が過ぎるのだとは思ってませんでした。

    最近まで、どこかしらに正解があり、達成は難しいとしても、全体としてそこに向かっていけばいいと思ってたのですが、実は正しいことや正解というのは立場や状況によって変わることであり、そもそも正解はあってないようなものということを知りました。結構ショックでした。

    お洒落の感じの真ん中は酒では無い。というのは今日知りました。

    Webサイト制作を長くやっていますが、制作の前の工程として調査や設計部分だけでも、大変に多くの作業があることに気が付き、全部見つかるどころか、どんどん広がって増えていってます。これからもどんどんと広がるだろうなと感じています。

    どうしたらこの体験を増やせるか

    このように、割と身近にあるにも関わらず、全然そのものが見えて無く、やっと気づいてから「そうだったのか!!言ってよー!」的なことが見つかると、視野の解像度が上がったような気になりますので、今後も増えていくといいなと思います。

    どんなときに、こういう体験ができるのかと考えてみたのですが、以下のような感じでしょうか。

    • なにかしら、新しいことを初めた時
    • だれかと話をしている時
    • 本などを読んだ時

    なるべくこういった事ができる時間を減らさないようにしたいところです。

    そのためのデザイン

    これが自然にできるように日々の暮らしがデザインされていると良い気がしますね。あ、そうそう、最近は自然とそうしてしまうように生活をデザインするといい。ということにも気が付きました。

    私は特性上、目の前に有ることに飛びつく事が多いので、何かを継続して続けたり、覚えておくようなことが苦手です。なので、あまり努力しなくても行動できるようにデザインしておくわけです。

    このアドベントカレンダーもその一環ですね。なにかしら情報を発信したほうがいいだろうと思いながら、炎上のリスクや、そもそも時間が取れるない。などを理由にだいたい書かないので、アドベントカレンダーとしてしまって、しかもTwitterにとりあえずそれを書くことで、なんとなく強制感をもたせつつ、一応サボってもOKとする。的なところを作っています。

    他にも会社に所属すれば、仕事をする。ということがデザインされますね。会社の営業活動では社内外問わず様々な人と話して、常に発生するいろんな問題に取り組む必要があります。出来る出来ないはさておいて、日々複雑な問題取り組むということが会社では自然と出来るようにデザインされている気がします。

    このような、装飾以外でデザインという言葉を利用することも、これまではなかったことで、最近知りました。未だにこういう活用法が正しいかどうか自信はありませんが。

    というわけで、みなさんはどうですか?

    こういうふわっとした、内面的な記事を書くとなかなか、心配になります。捉えられようによっては、まちがってつたわらないかな。とか、誰かを不快にさせないかな。とか。

    そうそう、何かしらブロクを書いたり、発信したときに評価を気にしてしまうことについても気がついたことがありました。

    賛成の意見があっても、反対の意見があっても、あっただけと受け止めるようにする。です。あまりにどちらの評価も気にしなくなると、それはそれで孤独になるような気もするのですが。褒められて嬉しいということと、反論されて悲しい、腹が立つ。というのはきっと同じように他者からの評価における反応なので。片側だけ取るというのは出来な気がしています。

    とはいえ、全く分けのわからない、独りよがりな文章を書いても仕方ないので、難しいところですね。

    でも自分アドベントカレンダーですからね。とりあえず良しとしましょう。

    では!また次回。

  • Snow Monkeyの記事詳細下の次前のリンクをシンプルにする

    Snow Monkeyの記事下にある、次前のリンクはもともと素敵なのですが、もっとシンプルにしたいときもあります。そんなときは既存のをはずして、新たに取り付けます。

    既存の次前を外す

    まずは外します。__return_false関数はとにかくfalseを返すWordPressの関数です。なにかしらフィルターを使ってある箇所を、なくしたい場合はこの手法をよく利用します。

    /**
     * デフォルトのページネーションを非表示
     */
    add_filter(
    	'snow_monkey_pre_template_part_render_template-parts/content/prev-next-nav',
    	'__return_false'
    );

    新たにシンプルな次前を取り付ける

    次に記事の下にある、Snow Monkeyのアクションフック snow_monkey_after_entry_content を利用し、ここに独自のシンプルな、次前のリンクを追加します。

    このときについでに一覧へのリンクも追加しました。
    $post_typeの中身を変えることで、カスタム投稿タイプにも利用できます。

    if ( get_previous_post_link() ) などとすることで、次や前の記事がない場合には非表示もしています。

    最後の行に無理くり、CSSをつけてますが。実際にはStyle.cssなどに入れるようにします。

    /**
     * カスタム投稿タイプの最後の次前一覧
     */
    function megane_single_pagenation() {
    	$post_type = get_post_type(); // 投稿タイプを取得.
    	if ( is_singular( $post_type ) ) {
    		$content  = '<ul class="singlular-nav">';
    		if ( get_previous_post_link() ) {
    			$content .= '<li class="go-previous">' . esc_attr( get_previous_post_link( '%link', '< 前へ' ) ) . '</li>';
    		}
    		$content .= '<li class="go-archive"><a href="' . esc_attr( get_post_type_archive_link( $post_type ) ) . '">一覧へ</a></li>';
    		if ( get_next_post_link() ) {
    			$content .= '<li class="go-next">' . esc_attr( get_next_post_link( '%link', '次へ >' ) ) . '</li>';
    		}
    		$content .= '</ul>';
    		$content .= '<style>.singlular-nav{display:flex;justify-content:center;gap:20px;}.singlular-nav li{list-style:none;}</style>';
    		echo $content;
    	}
    }
    add_action( 'snow_monkey_after_entry_content', 'megane_single_pagenation' );

    ということで、ここでは次前のリンクを設定しましたが、このように既存のものを消して、新たな内容を追加するという手法も、割とよく使います。

    できれば、そのまま既存のものを利用したいところですが、臨機応変にというところでしょうか。

  • WordPressなどでCSVを扱い一括操作を実施するときにおすすめのプラグインとPHPのライブラリ

    色々あって3日ほどあきました!が、なんとか続けてきましょう。今日は表題の通りWordPressでCSVを扱うです。WordPressでCSVを扱う理由としては、一括してインポートしたりエクスポートしたりと言うのがあります。

    例えば

    • WordPressのデータを別のCMSやECサイト用にエクスポートする
    • WordPressからWordPressへの移行時に、投稿タイプを変えたり、データのもたせ方を一部変える
    • 全く異なるCVSからデータを整形して、WordPressに一括インポートする

    などです。とりあえず色々プラグインがあると思いますが。私はこちらをおすすめしたいです。

    WP All ImportとWP All Export

    どちらもマウス操作で項目を選んで利用でき、且つアドオンを利用するとACFやUser関連の操作も可能ということで、重宝しています。

    双方合わせて、アドオンもついて299ドル買いきり(2022-12-11現在)のようなので。高いか安いかは案件によりけりだと思いますが、

    Lifetime Updates
    Pay once and get free product updates for life.

    ということで、買い切りとなっているので。おすすめです。「有料かー。」と言われそうですが、一括操作で多くの時間が短縮できるので、予算として入れられる案件があるといいと思います。

    CSV自体を操作するときはLeague\Csv

    AのCSVの形を変えてBのCSVにしたいときはPHPで操作が可能なLeague\Csvを利用しています。

    • https://github.com/thephpleague/csv
    • https://csv.thephpleague.com/

    こちらはComposer経由でインストールして利用するものでWordPressからは外れますが、いろんな条件で内容を変えたり、列を増やしたりして使います。

    インポート先の仕様で、Shift−JISに変換しないといけなかったり、WPの仕様とは異なる、条件で行や列を増やしたりするときにも便利ですね。

    これで操作した結果のCSVをWP ALL Importから取り込んで一括記事生成などを行います。

    ということでCSVの操作でした!

  • Webサイト制作の仕事が始まったぐらいのときのこと

    • テーブルレイアウトからCSSレイアウトへの移行期
    • CMSの導入が一般にも広まる直前
    • Webの情報はいまよりずっと少なかった。

  • 原付きで神戸から上京したこと

    • 「来週から店長に。」と言われたので、安心して退職した。路面のカジュアル洋服店でした。
    • 高校の同級生がバンドをしていたので参加した。
    • 原付きがあったほうがいいだろうと考え。原付きで上京した。
    • 11月の箱根はたいへん寒かったため、寝袋を体に巻きつけて走った
    • やっとの思いで、新居に着いたがお湯も出ず、ガスも出ずで凍えながら朝を待った。

    このあたりの動画はこちら

    2020年に行ったイベントでこの内容を話しております。お時間があれば、ご覧くださいませ


  • AIツールとWeb制作の今後について少しだけ考えました。

    昨日深夜までサッカーの応援をしていました。選手の皆様お疲れさまでした。応援出来て嬉しかったです。今度近くのスタジアムのJリーグの試合に行きたいと思いました。

    さて、ということで、ちょっと今日は軽めです。こうして自分のペースで書けるのも、自分アドベントカレンダーのいいところ!ということでお願いします。

    昨日紹介した、AIツールが早速仕事で活躍し始めました。今日はPHPで配列の2つ目だけを削除することがしたかったです。

    こういった基礎のこともしっかりと覚えてない私は、だいたいの場合、この内容を検索で調べてPHPのサンプルを探し、該当する関数を見つけた後に、ドキュメントも確認しつつ実装するという流れが私は多いです。

    それとほぼ同様のことが。AIに聞くだけで出来ました。このほうが柔軟な回答で使いやすい部分もあると思いました。

    https://twitter.com/megane9988/status/1599770854254333953

    もちろん、もっと良い方法があったり、異常系の処理をどうするか等々、追加で考えることは有ります。しかし、それはどのみち考えることなので、AIがアシスタントの役割として、早く直感的に答えを返してくれるのはとても便利だなと感じました。

    反面、AIが間違った結果を、さも正しいように返してくれる可能性も有るわけで、そのあたりをどう判断するかがポイントになるとも感じました。

    実際に下記の質問の答えは望んでいるものとは違って間違いと感じれますが、調べるまで全然わからなかったです。(実際には1984年に入学となるはず。)

    とはいえ、おそらく今後すぐにエディターと統合されるようなプラグイン等が出るような気がしています。そうなると、サジェスト機能でコードを書く助けをAIがかなりの割合でしてくれるのだろうなと感じています。

    また、だんだんAIへの問い合わせの方法も上手になってきそうな気がします。そして使う人が増えれば増えるほど、AIの制度も上がるっていくと考えられます。すごい、時代ですね。

    じゃあそれで我々のようなWebサイトを作る仕事が無くなるか。というとそれはそれで別の話だとも感じています。Webサイトを作るという中にはもちろんコードを書くという部分も含まれるのですが、それ以外の部分もたくさんありますからね。今後はそちらもより重要になってくるだろうなと言う気持ちでおります。

    ということで、また明日!