スタッフブログ Staff Blog

スタッフの誕生日会。

3月12日はスタッフの誕生日でした。
この頃少々慌ただしくしていて、気づけばあれから2週間も経ってしまいました。

今回は本人の希望で会社焼肉。
脂肪の少ない赤身のお肉を中心にいろいろ揃えてみました。

焼肉準備中

みんながどのくらい食べるのかがわからず、多めに買ったら1パック丸々余ってしまったので主役にプレゼント。
(写真に写っているものは完食)

彼は、去年から続く大きめの案件を地道にコツコツこなしてくれていて、今月が山場を迎えることもあり、しっかりお肉を食べて無事に乗り切ってほしいという想いも込めて。

ホットプレートで焼肉

ホットプレートで焼肉

気になるにおいの方は、2日ほどうっすら残っていましたが、思ったほどではなかったです。


誕生日ケーキはパティスリー・ノワさんの「パティシエの焼きチーズ」。

チーズケーキ

レモンの風味が爽やかに香る軽めの食感で、みんな「美味しい美味しい」と、あっという間に食べてしまいました。

以前ノワさんのベイクド・チーズをオーダーしたことがあって、過去の記事を遡ってみたら、2年前の誕生日も会社焼肉とノワさんのケーキという同じ流れでした。

今年も無事にお祝いできて良かったです。

と、2年前にも書いていましたが、会社を立ち上げてからいろんな場面で、心からそう思うようになりました。
歳でしょうか。


誕生日おめでとう。


集合写真は撮り損ねたのでまた次回に。

WordPressにおけるtype属性の省略

コードの品質管理の際によく利用される下記サイトですが、今回はその中でもtype属性エラーへの対処法をご紹介します。

Nu Html Checker
https://checker.html5.org/

type属性の省略

HTML5では 'script' にtype属性は不要であり、構文チェックの際にエラーが表示されます。

Warning:The type attribute is unnecessary for JavaScript resources.

静的ファイルならば、そのままtypeの記述を削除すれば良いのですが、WordPressでは 'enqueue'系の関数を使用するのが一般的な手法です。("wp_enqueue_script")

'enqueue'系の関数で付与されたtype属性を削除するために、フィルターフックを使ったコードがあります。

function remove_script_type($tag)
{
    return str_replace("type='text/javascript'", '', $tag);
}
add_filter('script_loader_tag', 'remove_script_type');

このコードで多くは対応できますが、Contact Form7などのプラグインで付与されるコードには効かない場合があります。

そこで、テンプレートが読み込まれる前にアクションフックを使い、type属性を削除する方法があります。 それが下記のコードです。

add_action('template_redirect', function () {
    ob_start(function ($buffer) {
        $buffer = str_replace(array('type="text/javascript"', "type='text/javascript'"), '', $buffer);
        return $buffer;
    });
});

WordPressのフックは利用する場面も多く、覚えておいて損はありません。
公式のリファレンスをよく読んで理解しておくことが重要です。

スタッフの誕生日会。

2月4日に当社の最年少スタッフ 吉田くんの誕生日会をしました。

今回のケーキは、縁あって引野にあるル・ロックルさんにお願いしました。
いちごと生クリーム多めでオーダーしたら外も中もいちごたっぷり!

小さなお花とてんとう虫のチョコレートも載っていました^^
(あまりに美味しそうで早く食べたかったせいか、細かいところまで写真撮るのを忘れていました。。。)

生クリームの甘さに負けないくらいとても甘いいちごでした。

ル・ロックルさんは半分がケーキ屋さんで半分がパン屋さんなので、ランチはパン祭りにしました。

パンもボリュームたっぷりで、どれを食べても美味しかったです!

誕生日おめでとう!

PowerCMS 5でリッチテキストエディタの「書式」プルダウンを調整する

先日PowerCMS 5の案件で実装作業を進めていたところ、リッチテキストエディタ(WYSIWYGエディタ)の「書式」プルダウンにクラスが自動で追加されていることに気付きました。
画面キャプチャ:クラスが自動追加された書式プルダウン

なぜクラスが自動追加されるのか調べてみると、TinyMCEの「Import CSSプラグイン」によりPowerCMS設定にあるTinyMCEの設定の「コンテンツCSSファイル」に指定されたCSSの内容が反映されているようです。クラスを選択するとspan要素のclass属性値に選択した内容がセットされるのですが、正直なところあまり有用ではないように思います。(CSSによっては有用なのでしょうか...?)

クラスの自動追加を止める

クラスの自動追加を止めるには、TinyMCEのImport CSSプラグインを無効にします。無効にするには、PowerCMS設定にあるTinyMCEの設定の「plugins:」からimportcssを削除します。これだけでCSSからクラスが自動追加されなくなります。
画面キャプチャ:TinyMCEの設定

独自のクラスを追加する

独自のクラスはTinyMCEの設定の「高度な設定」で指定できます。

例えば<em class="danger">[入力したテキスト]</em>のようなマークアップを書式プルダウンで実現するには以下のように記述します。

tinymce_editor.init['style_formats'] = [
  {title: '強調(警告)', inline: 'em', classes: 'danger'},
];

あまり拡張しすぎるとHTMLにあまり詳しくないユーザーさんはつらくなる可能性がありますが、以下のように記述をするとh2要素をdiv要素で囲むことができます。スタイルの都合上div要素で囲むことが必要な場合もありますよね。

tinymce_editor.init['style_formats'] = [
  {title: '見出し2(枠囲み)', block: 'div', classes: 'hdg-lv2-01-container', wrapper: true},
];

また、以下のようにタイトルを付けてスタイルを並べると、分類ごとにクラスが表示できるようになります。

tinymce_editor.init['style_formats'] = [
  {title: '見出しスタイル', items: [
    {title: '見出し2(枠囲み)', block: 'div', classes: 'hdg-lv2-01-container', wrapper: true},
  ]},
  {title: '強調スタイル', items: [
    {title: '強調(注意)', inline: 'em', classes: 'warning'},
    {title: '強調(警告)', inline: 'em', classes: 'danger'},
  ]}
];

画面キャプチャ:分類ごとにクラスが表示された様子

書式(style_formats)の拡張については「TinyMCE | Content Formatting」に解説があります。「書式」プルダウンを上手く使いこなし、ユーザーさんが使いやすいエディタを作って下さい。

PowerCMSでイベントカレンダーの実装

今担当しているPowerCMS案件で「イベントカレンダーを実装したい」との要望がありました。1日1記事であればシンプルですが、繰り返しの予定に対応させる必要があり、まずはテンプレートタグの設計だけで実現できるのかを探りました。

繰り返しの予定の登録は以下のように2通りの条件があります。

  • 予定の終了日まで毎日繰り返し予定を表示する(カスタムフィールドEntryEndDateに終了日を指定する)
  • 予定の終了日までの間のうち、指定の曜日だけ繰り返し表示する(カスタムフィールドEntryTargetDayOfWeekで該当の曜日にチェックを入れる)

カレンダーは今回MTCalendarタグと月別アーカイブテンプレートを用いて静的に出力しました。(最近だとJSONで予定を出力して、JavaScriptで表示処理をするというのが多いかもしれませんね。)

結論としては、以下のようなテンプレートで予定のHTMLを組み上げることができました。
イベントカレンダーの表示サンプル

<mt:Entries>
  <mt:EntryDate format="%Y" setvar="year" />
  <mt:EntryDate format="%m" setvar="month" />
  <mt:EntryDate format="%e" setvar="day" />
  <mt:Var name="day" replace=" ","" setvar="day" />

  <mt:Ignore>記事公開日の予定を追加</mt:Ignore>
  <mt:SetVarBlock name="$eventdata_varname" key="$day" append="1"><p><a href="<mt:EntryPermalink absolute="1" escape="html" />" class="linkUnderline"><mt:EntryTitle escape="html" /></a></p></mt:SetVarBlock>

  <mt:Ignore>連続した予定・繰り返しの予定の追加</mt:Ignore>
  <mt:SetVar name="exist_cf_value_check" value="" /><mt:Ignore>曜日指定の有無をチェックするため、一旦変数に入れる為の準備</mt:Ignore>
  <mt:EntryTargetDayOfWeek><mt:SetVar name="exist_cf_value_check" value="$__value__" append="1"></mt:EntryTargetDayOfWeek>
  <mt:If name="exist_cf_value_check">
    <mt:Ignore>曜日指定の予定の処理</mt:Ignore>
    <mt:EntryEndDate format="%e" setvar="last_day" />
    <mt:Var name="last_day" replace=" ","" setvar="last_day" />
    <mt:If name="last_day" eq="">
      <mt:Ignore>終了日の指定がない場合は31日までループを回す</mt:Ignore>
      <mt:SetVar name="last_day" value="31" />
    </mt:If>
    <mt:Var name="day" op="++" setvar="from_day" />

    <mt:Ignore>月末までループを回し曜日が一致したら予定のHTMLを追加</mt:Ignore>
    <mt:For var="x" from="$from_day" to="$last_day">
      <mt:SetVarBlock name="check_date"><mt:Var name="year" /><mt:Var name="month" /><mt:If name="x" lt="10">0<mt:Var name="x" /><mt:Else><mt:Var name="x" /></mt:If></mt:SetVarBlock>
      <mt:Date ts="$check_date" format="%a" setvar="day_of_week">
      <mt:EntryTargetDayOfWeek>
        <mt:If name="__value__" eq="$day_of_week">
          <mt:SetVarBlock name="$eventdata_varname" key="$x" append="1"><p><a href="<mt:EntryPermalink absolute="1" escape="html" />" class="linkUnderline"><mt:EntryTitle escape="html" /></a></p></mt:SetVarBlock>
        </mt:If>
      </mt:EntryTargetDayOfWeek>
    </mt:For>

  <mt:ElseIf tag="EntryEndDate">
    <mt:Ignore>連続した予定の処理</mt:Ignore>
    <mt:EntryEndDate format="%e" setvar="last_day" />
    <mt:Var name="last_day" replace=" ","" setvar="last_day" />
    <mt:Var name="day" op="++" setvar="from_day" />
    <mt:For var="x" from="$from_day" to="$last_day">
      <mt:SetVarBlock name="$eventdata_varname" key="$x" append="1"><p><a href="<mt:EntryPermalink absolute="1" escape="html" />" class="linkUnderline"><mt:EntryTitle escape="html" /></a></p></mt:SetVarBlock>
    </mt:For>
  </mt:If>
</mt:Entries>

変数に格納した予定のHTMLはMTCalendarの中で展開します。日付がキーになっているので簡単ですね。

テンプレートの解説

日付をキーにしたハッシュに予定のHTMLを足していくのがポイントです。その上で次のようなロジックを考えました。

  1. 記事公開日で指定した日の予定をハッシュに格納する
  2. ループを回し繰り返しの予定をハッシュに格納する
    • 曜日指定の予定
    • 連続した予定

あとは、上記ロジックをテンプレートタグに落とし込んでいきました。ループを回したり曜日を判定したりするために日付の処理が必要で、それに関係する変数のタグが多くなりました。

懸念点

予定(記事)が増えるほどループの回数が増えます。入力の簡便性を考え曜日指定の予定を組み立てる処理において終了日の指定がない場合は31日までループを回すようにしていますが、終了日は必ず入力するという仕様にした方が再構築の負荷が最小限に抑えられるのではないかと思います。

お問い合わせ Contact

制作のご依頼、ご相談などは下記のフォームからご連絡ください。