EC-CUBE3系での変数確認

 

デジタルドリームワークスからHigaです。
以前にも投稿したと思いますが、EC-CUBE3ではPHPフレームワーク SymfonyベースのSilexを利用しています。
EC-CUBE2系とは全くの別物で、Silexの知識もある程度理解していないとなかなか作業が難しくなっています。

自分はシステムの修正やカスタマイズを行う場合、変数に格納されている値を確認しながら作業を進めていくことが多いです。
PHPの場合は「print_r()」や「var_dump ()」の関数を利用して変数を確認します。
変数を確認することでページ間でどのような値が引き渡しされているのか、また引き渡しデータが正しいか、など順を追って作業することが出来ます。
しかしEC-CUBEでそれらの関数を利用するとずらずらと長いコード返ってきます。
多分 無限ループのような感じです。注意しましょう!

ではどのように変数を確認するのか…

EC-CUBE3.0.8以降では「dump」という関数が使える仕様になりました。
以下のように利用します。

—————

□ Controllerで利用する場合
dump($app)

□ Twigで利用する場合
{{ dump(app) }}

—————

PHP関数の「var_」を付けないなど若干の違いです。
しかしこれを分かっていないと先ほども記載した通り大変な事になります。
また正確に情報を確認出来ません。

というわけでEC-CUBE3系のdumpについてメモでした。
EC-CUBE3系は機能拡張やカスタマイズをプラグインという形で追加していきます。
かなりハードルが上がっていますが

Adobe XD(Preview版)をインストールしてみた!

さてデジタルドリームワークスからHigaです。
制作ではPhotoshopやIllustratorなどのアドビ製品を利用しています。
先月アドビより新たなUXデザインツール「Adobe XD」がプレビュー版として公開されました。
※現在はMacOSXのみということです!

Photoshopで制作した静的なデータよりも画面遷移やサイト構成など作り込みしやすいイメージです。
コーディングする前にここまで仕上げることが出来るのは、デザイナー/コーダーなどで作業が明確に分担されている企業にとっては作業効率が上がると思います。
またお客様への提案もしやすくなりますね。

レイアウトをざっくりと決めて、コーディングしながら調整していく自分にとっては、デザイン段階や仕様で多くの時間が取られることに不安を感じますが…
弊社のワークフローも変わっていくのでしょうか。
まだ触り始めでどれくらいのスピードで制作できるのか未知数なので、少しずつ確かめていきたいと思います。

モバイルファースト インデックス

1703012-pict01

デジタルドリームワークスからHigaです。
さて気になる記事がありましたのでピックアップ

数ヶ月以内にGoogleはインデックスを分割する。
つまりモバイルファーストインデックスを導入するという記事です。

これまでもモバイルフレンドリーなサイトは検索エンジンの結果に良いとされてきました。
しかしGoogleは検索に使用するためのインデックスを1種類しか持っておらず、
一部の評価に関してはモバイル向けページの情報が用いられているが、基本的にはPC向けのページを基準に検索結果を出しているようです。

しかしモバイルファースト インデックス導入後にはこれが逆転すると噂されています。
モバイルサイトを基準に検索結果を出していくと考えられています。
いよいよモバイルファーストの考えが検索エンジンにも反映されていきますね。

今後制作側に影響はあるのか…

弊社はスマートフォンへ対応したレスポンシブデザインをベースに提案しております。
この考えは変えなくても問題なさそうです。特に大きな影響は無い感じです。
しかし一部注意が必要かもしれません。
特にモバイル向けコンテンツはサイト内容を省略している場合は注意です。

まだ多くの事が憶測のような感じもします。
今後の情報に注目ですね!

参考

Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は?


http://web-tan.forum.impressrd.jp/e/2016/11/08/24325

AMPページを確認

デジタルドリームワークスからHigaです。
WordPressを導入しているサイトはプラグインでAMPページに対応することが出来ます。

170303-pict01

https://wordpress.org/plugins/amp/

まずはインストールしてみます。
インストールが済んだら、早速AMPページへアクセスしてみましょう!

導入は簡単ですね。
AMPは文法エラーなどがあると、キャッシュしてくれないのようです。
必ずエラーチェックを行ったようが良いと思います。

エラーのチェックは以下より。
https://search.google.com/search-console/amp

170303-pict02

170303-pict03

テストで確認したページは問題なさそうです。
特にこだわりがなければ、プラグインを有効化するだけで簡単に導入出来そうです。
書籍を確認するとメニューを入れたり、色々カスタマイズが出来るようなので引き続き勉強していきたいと思います。

AMP対応のサイト制作を本格的に導入していきます!

DSC_0196

デジタルドリームワークスからHigaです。
ホームページでも案内をしておりますが、先週より美浜へ事務所を移転しました。
今後ともどうぞよろしくお願い致します。

どの業界でも同じことと思いますが、Web業界も技術進歩が凄まじく早く、日々さまざまな事を吸収していかなければいけません。
その1つとしてAMPがあげられると思います。
以前のブログにも下調べとして投稿しましたが、弊社でもこれから本格的に導入してきます。

PLESK サブミッションポート設定

20160129-higa-pict01

デジタルドリームワークスからHigaです。
PLESKなどのGUIコントロールパネルが用意されているサーバーは便利ですね。
PHPバージョンを簡単に上げられなかったりもしますが…

今回はそんなPLESKでハマった点をメモです。
PLESK10以降では仕様の変更によりサブミッションポートはTLS接続を行わないとメール送信が出来ない仕様になっています。
もちろん暗号化通信を行うことが一番ですが、どうしてもお客様の環境によりTLS接続が困難な場合などは、セキュリティーレベルを下げないといけない場面があります。
そんな場合には以下を参考に作業を行います。

設定ファイル
—————————————————–
/etc/postfix/master.cf
—————————————————–

▼変更箇所
—————————————————–
「submission」の設定で記述されている、「smtpd_tls_security_level」パラメータの値を「encrypt」から「may」に変更

○初期の記述
smtpd_tls_security_level=encrypt

○変更後の記述
smtpd_tls_security_level=may

—————————————————–
変更後例:
submission inet n – n – – smtpd -o smtpd_enforce_tls=yes -o smtpd_tls_security_level=may -o smtpd_sasl_auth_enable=yes -o smtpd_client_restrictions=permit_sasl_authenticated,reject -o smtpd_sender_restrictions=
—————————————————–

という感じです。
これはPostfixとPleskの組み合わせで起こることでその他の組み合わせ、例えばQmailとPleskの環境では問題ありません。
弊社でもいくつかサーバーを管理しておりますが、環境により設定が異なるので時々 頭がパンクしそうになります。

またサーバーを疑う前にお客様のメール設定に問題がある場合も多いです。
まずはお客様のメール設定を確認することから始めるのが鉄則です。

それでは!

WordPress移設で注意するDB文字セット

wordpress_logo

Digital Dream WorksからHigaです。
業務でWordPressの移設をすることがしばしばあるので、よく忘れてしまうDB文字セットについてメモしておきます。

WordPress移設の際、 SQLデータをインポートすると「Unknown collation: ‘utf8mb4_unicode_ci’」ということでDB移設ができない場合があります。
これはWordPress4.2よりデフォルトのデータベースの文字セットがutf8からutf8mb4に変更されたことがひとつの原因です。

utf8:1文字を3バイトで構成
utf8mb4:utf8の拡張版のようなもの(1文字を4バイトで構成、今までの文字に追加の文字セットが使える)

ということで、utf8mb4はutf8の拡張版で絵文字などの文字が追加されているようです。
WordPressの推奨とあってWordPressのアップデートの際に以下の条件がそろっていると自動で「utf8mb4_unicode_ci」に変更されるようです。

・現在utf8の文字セットが設定されている
・使用しているMySQLサーバーのバージョンが5.5.3もしくはそれ以上
・使用しているMySQLのクライアントライブラリーが5.5.3もしくはそれ以上の場合、又はmysqlndを使用している場合は5.0.9かそれ以上の場合

照会順序はいつも「utf8_general_ci」にしてるけどな…って思ったらそういうことでした。

さて移設先の環境がどうしても「utf8mb4_unicode_ci」を利用できないこともあります。
その際にはSQLを修正してあげる必要があります。

SQL文で直接置換する方法などもあるようですが、
自分はphpMyAdminなどを利用して SQL文エクスポート、修正、インポートする方法で変更を行ないます。
SQLデータのバックアップがテキストで出力されるのは、何となく安心出来ます。

1. SQL文をエクスポートしてバックアップ
2. テキストエディタで開いて、「utf8mb4_unicode_ci」を「utf8_general_ci」に置換
3. 「utf8mb4」を「utf8」に置換
4. wp-config.php内にあるcharsetの文字コードを確認して「utf8mb4」なら「utf8」に書き換え
5. それぞれをインポート、アップで完了

ざっくりと書きましたが、この手順はGoogleで検索すればたくさんの記事がありますので参考にして下さい。
というわけセキュリティー的にも出来るだけMySQLもアップデートしていくことがベストですが、
サーバー環境(PLESK等)や他システムの兼ね合いでどうしてもMySQLのバージョンがあげられないサーバーへの移設はこの方法で回避できます。

稼働中サーバーのMySQLのバージョンアップなどは怖くて気が引けます。
自分が会社に入りたての頃は依存関係などでサーバー全体がおかしくなったりと大変だったような覚えがあります。
今ではある程度安心して MySQLやPHPなどのアップデートは行えるのでしょうか…
ご意見などコメントいただけると幸いです m(_ _)m
それでは!

SVGを試してみた!

デジタルドリームワークスからHigaです。
今日はSVGを少し触れていきたいと思います。

170113-pict01

SVGとは…

XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

とwikipediaで説明されています。
つまり画像をxmlで描写することが出来るというものです。
ベクター形式として描写されるので拡大しても画像が荒れないことやアニメよーションにも対応。Javascriptとの連携も出来ます。

さっくりとSVGのテストを行ってみました。
以下DDWの文字が書きなぞるように表示されていますか。
このように動きのある表現が出来ます。

これまでほとんどSVGは利用して来なかったのですが、表現の幅を広げる為にも習得していきたいと思います。
今回は触りくらいしか確認出来ていませんが、さらにSVGの知識を深めていきたいと思います。
それでは!

WordPress 管理画面にフィールドを追加してみる

さてデジタルドリームワークスからHigaです。
以前に投稿した、「WordPress 管理メニュー、ページの追加」の続きを行います。

WordPress 管理メニュー、ページの追加

今回はさっそくフィールドを追加、データを登録する部分を勉強していきたいと思います。
前回のテーマページへフィールドを追加…
のはずが、どうも上手くいかず宿題です。
来週に持ち越しということですみません!

というわけで、今回は独自のフィールドを「設定」->「一般」のページ内に追加します。

以下がfunction.php内に記述したコードになります。

170106-pict01

ざっくりとポイントを説明します。
WordPressにはフィールドを設定できる関数が用意されています。
素晴らしい!!

● add_settings_section

設定ページでヘッダを共有するいくつかの設定のまとまりです。
設定項目をまとめて表示することができます。HTMLでいうsectionタグ内で囲う部分みたいなイメージでしょうか。

——

● add_settings_field

設定項目を設定ページとセクションへ登録します。
どのsettings sectionに登録するのか、どのような項目を追加するか設定できます。

——

● register_setting
設定項目と無害化用コールバックを登録します。
どちらかというと、こちらで項目を登録して、add_settings_fieldで出力しているイメージでした。

項目が表示されているか確認してみましょう!
管理画面「設定」->「一般」 に表示されていますね。

170106-pict02

さて実際に登録できるようになれば、この設定項目をテーマに反映させていきましょう。
今回はGoogle Map API キーを管理画面から登録出来るような形にしました。

項目に値が入っていれば、JSコードを出力します。
出力にはget_option関数を使用して出力。

170106-pict03

170106-pict04

出来ましたね♪
今回出来なかった部分は次回に投稿出来ればと思います。
間違っている部分やおかしい部分があればぜひコメントいただけると幸いです。

Jetpack コンタクトフォームを試してみた!

デジタルドリームワークスからHigaです。
早速ですがJetpackの機能はたくさんありますが、今回はフォーム機能を確認していきます。

 

161219-pict01

 

Jetpack->設定->Writing->コンタクトフォームが有効化されていれば利用できます。
自分の環境ではデフォルトで有効化されていました。
有効化されていれば投稿や固定ページの投稿画面に「お問い合わせフォームを追加」のボタンが表示されています。
早速挿入。
項目も簡単に追加や削除が行えます。
また送信先の設定やメールの題名部分の指定も行えます。

 

161219-pict02

 

161219-pict03

 

161219-pict04

 

さて一般的な項目を設定して挿入。
するとショートコードが挿入されていることが確認できます。そのまま公開で完了。

 

161219-pict05

 

さてページを見てみましょう。
簡単にフォームが挿入できますね♪
それではテスト送信をしてみます。

 

161219-pict06

 

必須項目が空白の場合はエラーページも表示されます。

 

161219-pict11

 

送信完了ページはこんな感じ。

 

161219-pict07

さらにメールの内容は、管理者メールを受信する他に、管理画面追加された「フィードバック」から確認出来ます。
簡易的なフォームですが、手軽にフォームを挿入できていいですね。

 

161219-pict08

161219-pict09

161219-pict10

 

さてここで制作側の視点から見るチェックポイントです。

 

1. 確認画面がない

Jetpackのメールフォームには確認画面は用意されていません。
送信をクリックするとすぐにメール送信が完了します。
確認画面は必要ないという方もいるので、賛否両論ありますが、個人的な感じだとすぐに送信されることに抵抗がありました。
確認画面の有無が設定できれば1番良いですが…
たしかフォーム系のプラグインで有名なcontactform7にも確認画面はついておらず、その方が良いと考える人が多いのかもしれません。

 

2. 追加できるフィールドに画像などの添付が出来るタイプがない

さまざまな種類のフィールドを追加できます。テキストエリアやラジオボタン、セレクトボタン等…
でも画像やファイルを添付出来るフィールドは用意されていません。
簡易フォームにここまでの機能を求めるのは酷ではありますが、時々画像を添付出来るようにしたいという要望もあります。
それには対応出来ません。

 

3. 送信者には自動配信が行われない

上記はまぁしょうがないという感じはありますが、送信者への自動配信が行われないのはかなり抵抗を感じました。
指定した管理者へメールは届きますが送信者にはメールが配信されない為、
送信者は問題なく送信出来たのか、どのような内容を送信したか確認するすべは無く、
この部分をクリアするには管理者側でメールを受け取ったなどの連絡を行わないといけません。

上記が触ってみての気になるポイントでした。
簡易フォームにここまでの機能を求めるのは…という感じですね。
それを踏まえて利用するのであれば導入も簡単で、CSSなどである程度レイアウトも調整できるのですごく便利だと思いました。

間違っている情報やカスタマイズ情報などございましたらぜひコメントいただけるとうれしいです。
それでは!