[concrete5 サイト制作] 社会福祉法人 恩賜財団 東京都同胞援護会

社会福祉法人 恩賜財団 東京都同胞援護会のサイトを10年ぶりにリニューアルしました
https://doen.jp/

昔MTで作ったせいで更新がすごく大変だったものをconcrete5にしてクライアントの更新作業が楽になるように設計。
もうずっとリニューアルしたかったんですよ

Screen Shot 2017-04-03 at 16.15.24-fullpage

Screen Shot 2017-04-03 at 16.15.39-fullpage

Screen Shot 2017-04-03 at 16.16.09-fullpage

Screen Shot 2017-04-03 at 16.16.03-fullpage

やったこと

  • デザイン
  • HTML/CSS/JSコーディング
  • レスポンシブ
  • concrete5組み込み
  • フォーム作成(concrete5外)
  • 承認フロー
  • 運用マニュアル作成

つらかったこと

  • 同じフォーマットにひたすら住所やら電話番号やら座標やらを入力していく作業
    →xmlかcsvでインポーター使えばよかったと反省。あるいはデータ投稿だけしてもらうバイトを雇えばよかった。
  • 承認フローがなかなかうまく機能してくれなくてどハマり
    →参考文献がなかったのと、フォーラムに質問するということを考えなかったので反省。次からはググってもわからない問題はフォーラムに質問しよう。
  • さくらサーバーで通知メールが飛ばない問題
    →もうどうしようもなくてフォーラムに相談して解決してもらった。

更新性が高い設計にするために汎用性をもたせつつ、デザインを両立させるという作業に対して、非常にモチベーションが高く保てたかな、と。
今回制作ページは160ページほどで、concrete5で作らなかったらおそらく3倍くらいの作業時間が必要だったのではないかなーと思います。

リリースしたおかげで今月は暇になったからゆっくり療養します。もう体がバキバキ。

[concrete5] Ver8.0.3 さくらのレンタルサーバーだとメール通知が送れない問題[解決]

表題の通り、さくらのレンタルサーバーでメール通知が送れない問題が発生して、ログを見てもわからないし、さくらの管理画面にエラーログは出力されないしで、全く原因がわからず1日半くらい費やしてしまってからフォーラムに相談してやっと解決できたのでご紹介します。
フォーラムで教えてくださった方に感謝。

concrete5 JAPAN フォーラム コメント欄のメール通知が送られない

おそらくさくらのレンタルサーバーでのセキュリティで、送信元ドメインが不正だとphp関数からメールが送れない、というのが原因だったのかと思います。

環境は以下

  • さくらレンタルサーバー ビジネス
  • PHP 5.6.30
  • mySQL 5.5
  • concrete5 8.0.3

確認した送れない通知メールは以下

  • コメント欄ブロックの通知
  • メール送信テスト
  • パスワード再発行のメール

なお以下の通知メールは送れていました。

  • ワークフローの通知
  • フォームブロックからの投稿通知

application/config/generated_overrides/concrete.phpに以下を追記して対処しました。

<?php

/**
 * -----------------------------------------------------------------------------
 * Generated 2017-02-27T15:34:58+09:00
 *
 * DO NOT EDIT THIS FILE DIRECTLY
 *
 * @item      cache.full_page_lifetime_value
 * @group     concrete
 * @namespace null
 * -----------------------------------------------------------------------------
 */
return [
    'locale' => 'ja_JP',
    'version_installed' => '8.0.3',
    'version_db_installed' => '20161216000000',
    'misc' => [
        'login_redirect' => 'DESKTOP',
        'access_entity_updated' => 1488174725,
    ],
    'cache' => [
        'blocks' => false,
        'assets' => false,
        'theme_css' => false,
        'overrides' => false,
        'pages' => '0',
        'full_page_lifetime' => 'default',
        'full_page_lifetime_value' => null,
    ],
    'theme' => [
        'compress_preprocessor_output' => false,
        'generate_less_sourcemap' => false,
    ],
    
    
    // さくらレンタルサーバー用メール通知 ここから
    'email' => array(
        'enabled' => true,
        'default' => array(
            'address' => 'concrete5-noreply@' . (isset($_SERVER['SERVER_NAME']) ? $_SERVER['SERVER_NAME'] : 'localhost'),
        )
    ),
    // さくらレンタルサーバー用メール通知 ここまで    
    
];

MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

表題の通りです。
Firefox(バージョン52で確認)で、画像にマウスを乗せた時にフェードでちょっとだけ透明度を上げるような動き、よくあるじゃないですか。

画像に直接transitionとopacityを指定したら、途中までは想定通りフェードで透明になるんですが、最後にopacity:1に戻ってしまうという事象が発生しました。

追記
どうやらwindowsのfirefoxだと想定通りに動くらしいので、macのfirefoxだけの事象のようです。
タイトルを変更させていただきました。
Firefoxでimgのhoverにtransitionとopacityを書くとバグる

MacのFirefoxでimgのhoverにtransitionとopacityを書くとバグる

想定の動き(Chromeでの表示)

Firefoxでの動き(Firefoxでの表示)

ソースコードは以下です。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
img {
    transition: opacity 0.3s ease;
}
a:hover img {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>
    <img src="1.jpg"> // ←こいつにtransitionとopacityを付与しているとバグる
  </picture>
</a>
</div>
</body></html>

原因がつかめなくて四苦八苦してしまったのですが、img自体にtransitionとopacityを付与するのではなく、imgの親にtransitionとopacityを付与することで解決しました。

<html>
<head>
<style>
.box {
  display: inline-block;
  }
a {
    display: block;
}
picture {
    transition: opacity 0.3s ease;
}
a:hover picture {
    opacity:0.8;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
  <picture>// ←こいつにtransitionとopacityを付与して解決
    <img src="1.jpg"> 
  </picture>
</a>
</div>
</body></html>

[concrete5]ページリストからページのエリアを表示する

ページリストで、ページ属性の取得は$page->getAttribute(‘handle’);で簡単にできたのですが、ページ内のエリアの取得ができなくてハマってしまってかなり時間を費やしてしまったのでメモ。

acliss19xxさんに教えていただきました。

カスタムテンプレート内に、下記を書くと表示できます。

$a = new Area('Main');
$a->display($page); 

[Concrete5]Block Designer Proを使う時のちょっとした罠

Concrete5.6まではDesigner Contentが無料で使えたので非常に良かったのですが、5.7以降はDesigner Contentのアップデートがなく、5.7以降では有料のBlock Designerを利用するようになりました。

今回繰り返しのブロックを作る必要があって、$65もするBlock Designer Proが必要になってしまったので購入してインストールしようとしたところ、version8 compatibleって書いてあるのにどうしても「RamonLeenders\BlockDesigner\FieldType\FieldType not found」と出て、インストールができなかったのでちゃーんとアドオンのページを確認したら、「(so Block Designer is required first)」って書いてありました。

単純すぎてアホらしいけど、Block Designer自体がないとBlock Designer Proはインストールできないのでした。

つまり、$65で購入したBlock Designer Proはそれだけでは意味がなく、$30のBlock Designer本体が必要と。
トータルで$95もかかりました。

[Concrete5] レイアウトの削除方法

そういえばレイアウトの追加はわかりやすいけど、削除はわかりにくい場所にあったなぁと思いまして。
Concrete5は自由度が高くて使いやすいのだけど、やはりまだまだwordpressに比べると人口的にも少ないし、ナレッジの蓄積が足りないなぁと思います。5.6から5.7に変わった時点で5.6までのノウハウやプラグインも使えなくなってしまって、かなり苦労しました。

下記に、くどくどとスクリーンショットを交えて書いてありますが、非常に分かりづらいので、サクッと解決方法を知りたい方は、動画キャプチャをご覧ください。

動画の流れを文章とスクリーンショットで記載しているだけですので動画を見て解決したら読む必要はないです。

レイアウトの追加は簡単

レイアウト機能の追加はエリアからすぐに選択できるので簡単に追加できます。
追加

レイアウト

こんな感じですぐに2カラムや3カラムの追加が可能です。

そして、削除をしたい時に削除のメニュー項目が見つからないことに気づきます。

エリアのメニューを開いても、「ブロックを追加」「エリアのデザインを編集」「レイアウトを追加」の三つしかありません。
エリア

レイアウトのメニューを開くと、エリアのメニューに加えて、「コンテナーのレイアウトを編集」「レイアウトデザインを編集」「レイアウトをプリセットとして保存」「プリセットを管理」の4項目が表示されます。
レイアウトメニュー

直感的に操作が可能なConcrete5なら、「レイアウトデザインを編集」だろうと、思って選択すると何やらエディタが出てきて、「どうやらここでは削除ができないなぁ、つまりConcrete5でレイアウトを一旦追加してしまうとレイアウト自体を削除することはできないのだろう…」と思ってしまいがちです。
レイアウトデザインを編集

レイアウト自体の削除は、「コンテナーのレイアウトを編集」

コンテナー

直感的にわかりにくい名称の「コンテナーのレイアウトを編集」、これはレイアウトがカラムになっているものを包括するブロックという意味として捉えられるので、このメニューを選ぶと、ゴミ箱のアイコンがあるので、ここからレイアウト自体の削除が可能です。
コンテナ編集

ウェブカメラを隠すNopeを買ってきた

最近Macのカメラが乗っ取られるという記事をよく見かけるので、僕のひどい顔を世間様にお見せするわけにはいかないので、いっそシール(ウェブカメラ目隠しシール
)で塞いでしまうことも考えていたのですが、お客さんとビデオ会議するのにも使うので、ちゃんと隠せて、さっと外せてすぐ使える、みたいなものがいいかと思い、カメラを隠す「Nope」というスタイリッシュな磁石を買ってきました。

参考:「ウェブカメラをスタイリッシュに隠して盗撮を防止する「Nope」

2016-10-03-16.41.09

秋葉館というお店で、iMac用が1組、iPadやMacbook用の2組の3組がセットになっていて1,242円でした。

iMac用とiPad用の違いは、磁石の大きさくらいです。
二つの磁石の片方に両面シールを貼って固定し、もう片方を目隠し用として使います

2016-10-03-17.08.39

実際に、Photo Boothを使って試してみたところ、貼り付けた位置が少しずれてしまって少し角が見えてしまいました。

スクリーンショット 2016-10-03 17.13.59

なお、まぁ顔が見えないならいいやと妥協しました。
固定側の磁石をちゃんと貼れば、しっかり隠れるとおもいます

Adobe AnimateCCでサクッとHTML5 canvasアニメーションを作れた

Adobe AnimateCCって?

Adobe AnimateCCは昔ウェブ界を席巻していた、旧Flashです。
Flashと同じ感覚で、canvasアニメーションが作れるみたいです。
僕はスクリプト系はてんでダメなんで、GUIでcanvasアニメーションがサクッと作れるのは非常に助かります。
ただ、現状使用している人自体が少なく、スクリプトの記述方法action scriptと若干変わってたりしてノウハウがあまりなくて独学で勉強するしかないのはちょっと辛いところだと思います。時間をかけてじっくり学んでいこうと思います。

ただ、そのままだとIE10で表示されないので、create.jsのdevicePixelRatioを調整する必要があるそうです(元同僚に教えてもらった)。
animateでパブリッシュした際に出力されるscriptのvar canvas, stage, exportRoot;の前に、以下の記述をすればIE10でも表示できます。

if("devicePixelRatio" in window === false) {
	window.devicePixelRatio = 1;
}

一応検証した限りでは、以下のブラウザで動きました。

  • Chrome52+
  • Firefox48+
  • Safari9+
  • IE10+

canvasなのでスマホでも問題ないはずです。

[Mac]フュージョンドライブをフォーマットしたらSSDとHDDに分かれてしまった件

年末に仕事を片付けた途端に風邪をひいてしまい、意識朦朧としながらmacのメンテをしようと悪戦苦闘しておりました。

どういう問題があったのかという経緯を説明しますと、以下のような状態でした。

  1. 11月にiMac 2015 Lateモデルを買った
  2. time machineバックアップから古いMacのデータを移行した
  3. 外部ディスプレイをthunderboltに繋いでいるとOSが起動しない

appleのサポートに電話して、買ったばっかなのにおかしいだろ!と話して色々電話でサポートしてもらってたんですが、原因はどうやらカスペルスキーか、何かのドライバなんじゃないかというところまで絞れ、試しに別のパーテーションでOSをインストールしたら問題なく起動するということまでわかりました。

カスペルスキーをアンインストールしたり、ドライバを削除したりしてみたのですが、どこかしらに残っているキャッシュなのか、何のファイルが影響しているか不明のままで直すことができなかったので、仕事が片付いたタイミングで大掃除しようと思い、心機一転クリーンインストールして新しい気持ちで新しい年を迎えようと決断しました。

まず、今のOSをフォーマットしようとしたのですが、フォーマット自体ができず、強制的にフォーマットをかけました。
起動時にcmd+Rでリカバリモードを立ち上げ、ターミナルでドライブの名前を表示。

diskutil cs list

すると、「Logical Volume Group」にA2AB~~~~~みたいな文字列が表示されます。
disk

この、A2AB~~~~~みたいな文字列を指定することで、フォーマットができました。

diskutil cs delete A2AB~~~~~

disk2

ここまでは良かったんです。

フォーマット自体は出来たのですが、フュージョンドライブというのは、そもそもSSDとHDD、二つのドライブを論理的に結合させて構成されているということに気づきます。
そしてディスクユーティリティを開くと、SSDとHDDにわかれてしまった状態でどちらかにOSをインストールしなければならないような状況になってしまいました。
※この時点でテンパってしまってスクリーンショットや写真を残しておりません。

調べると、ディスクユーティリティを開いた時点で、「SSDとHDDにエラーがあるから修復しますか?」的なダイアログが表示され、修復をすればもとのフュージョンドライブに戻るらしいのですが、僕の場合はSSDとHDDにわかれている状態がさも当たり前のように振舞われ、修復自体ができず八方塞がりだと確信しました。

色々調べた結果、複数のドライブをフュージョンドライブにする方法もあるらしく、以下のようにターミナルへ入力しました

diskutil cs create FusionDrive disk0 disk1

作成した論理グループのUUIDを確認します

diskutil cs list

そして、UUIDを入力して論理ボリュームを作成しました

diskutil coreStorage createVolume FD202F33-B382-451E-9358-09CB4D684E8B jhfs+ "Macintosh HD" 100%

本当はスクリーンショットを残してここに入れたかったのですが、なにぶん風邪で頭が回らなかったのと、テンパっていたため拙い文章で申し訳ありません。

これで元通り。ディスクにOSを再インストールして今に至ります。

[concrete5]concrete5.6はphp5.6のサーバだと動かなかった

スクリーンショット 2016-01-04 4.33.46

もともとphp5.3の環境で動いていたconcrete5.6を、php5.6が動いているサーバーに移行したところ、
こんなエラーが出て使えなくなってしまったので、エラー文の部分をコメントアウトしたら直った。

/concrete/libraries/3rdparty/Zend/Cache/Core.php on line 361

 if ($this->_options['automatic_serialization']) {
            // we need to serialize datas before storing them
            $data = serialize($data); 
        } 


 if ($this->_options['automatic_serialization']) {
            // we need to serialize datas before storing them
            // $data = serialize($data); 
        } 

原因は調査中。

あんまりコアファイルをいじりたくないけど、もう5.6をこれ以上アップデートすることもないし、サイトリニューアルの時にはconcrete5.7でやりましょうと提案すれば問題はなさそう。

余談。5.6がゲシュタルト崩壊しそう