[VSCodeでもっと楽になりたい] SFTPで楽になる

Bracketsが死んでVSCodeを使うようになって、軽いし使いやすいので重宝していますが、デフォルトだとちょっと痒いところに手が届かない、やっぱり作業は楽にしたいので、色々拡張を試しています。

ふと思いつくような拡張は大体世界の誰かがすでに作っているので、「あ、こういうの欲しいな」って思った時にすぐ追加できるのが手軽でいいですね。

SFTP

僕はウェブデザイナーなので、FTPが繋げられないと仕事ができなくてお金が稼げなくて餓死してしまいます。
SFTPは、VSCode内でFTP接続を可能にする拡張です。
できることは基本的によくあるFTPソフトと変わらないのですが、いちいちエディタとFTPソフトを往復したりしないで使い慣れたVSCodeのUIでアップロード/ダウンロードができるのは楽ちんだなと思っています。
細かい特徴はマーケットプレイスのページでご確認ください。

Very powerful, with smart features. Very simple, requires just three lines of config! Very fast, finished in a blink.

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

個人的に一番気に入っている「差分表示」

特徴にも記載されているDiff local and remote(ローカルとリモートの差分表示)がVSCode内でできることですね。
昔Macが32bitアプリが動く時代には、YummyFTPというアプリがあって外部アプリによる差分表示をサポートしていたのですが、作者の方がお亡くなりになったそうで64bitの対応は事実上無くなってしまったためOS Catalina以降は動作しなくなってしまいました。
なお、FTPソフトに差分表示をサポートしているものは他にもあります。

ForkLift 3

https://binarynights.com/

こういったFTPソフトが差分表示をサポートしている、というのは、たいていファイルを選択して差分表示と選択すると外部のDiffアプリが開くような仕様になっています。
上記のForkLiftもランディングページの説明に「Compare two text or images files with Xcode’s FileMerge, Kaleiodoscope, Beyond Compare, or Araxis Merge.」と記載されているので、 ForkLiftアプリ内で完結しているわけではなく、別のアプリが立ち上がると思われます。

個人的にはコードを見るときにFTPソフトに行ったりエディタに行ったりするのが面倒なので、VSCode内で差分表示まで完結できる方がメリットがあると思っています。

ファイルを右クリック→「Diff with Remote」

VSCodeで左がリモート・右がローカルが開く 差分のある<main>の部分がハイライトされている。

他にもオートアップロード(一長一短だが)があったり、除外ディレクトリを指定したりとか、色々便利です。
使ったことないな、って人は是非使ってみてくださいね!

[Mautic 2.16.2] 漢字がピンインに、ひらがなカタカナがローマ字に変換されるのをどうにかしたい

Mauticのコンタクトでトラッキングしたユーザーのイベントに表示されるページタイトルが漢字はピンインに、ひらがなカタカナはローマ字に変換されるという謎の仕様があります。

「o weni hewase (ru lipeji)」や「o weni hewase (que renpeji)」は本来はそれぞれ「お問い合わせ(入力ページ)」、「お問い合わせ(確認ページ)」というページタイトルで、「お」→「o」とひらがながローマ字に、「問」→「wen」のように漢字がピンインに変換されてしまい、全く読めない謎の言語が誕生してしまうので、これをどうにかしたい。

ファイルの場所 /app/bundles/PageBundle/Model/PageModel.php

// 616行目
$safeTitle = InputHelper::transliterate($query['page_title']);
↓
$safeTitle = $query['page_title'];

本来は便利な機能なはずなのですが、「InputHelper::transliterate」が悪さをしているので、使用しないように変更しました。

[Mautic 2.16.2] 日本語化しても日本向けにならない部分を直そう

オープンソースのMAツール、Mauticを使い始めたところ、一応日本語対応しているのですが細かい部分でちらほら日本の環境に最適化されていないなと思った部分がいくつかあったので、直しました。

姓名が逆順で表示される

デフォルトだと「名, 姓」の順で表示されてしまうので、これを「姓 名」の表示に変えたい。
こういうのは管理画面で設定できると本当に便利なのになぁと思ったり。
主に姓名逆順で困るのが、以下。

  • コンタクト(リード)のリスト
  • 送信メールの名前

コンタクト(リード)のリスト

ファイルの場所 /app/bundles/LeadBundle/Controller/LeadController.php

// 1308行目
$leadName         = $leadFields['firstname'].' '.$leadFields['lastname'];
↓
$leadName         = $leadFields['lastname'].' '.$leadFields['firstname'];

ファイルの場所 /app/bundles/LeadBundle/Controller/LeadController.php

// 1308行目
$leadName         = $leadFields['firstname'].' '.$leadFields['lastname'];
↓
$leadName         = $leadFields['lastname'].' '.$leadFields['firstname'];

// 1835行目
$items[$user['id']] = $user['firstName'].' '.$user['lastName'];
↓
$items[$user['id']] = $user['lastName'].' '.$user['firstName'];

ファイルの場所 /app/bundles/LeadBundle/Entity/Lead.php

// 710行目
public function getName($lastFirst = false) //この$lastFirstのtrue/falseで判定している
↓
public function getName($lastFirst = true)

// 717行目
$fullName = $lastName.', '.$firstName;
↓
$fullName = $lastName.' '.$firstName; // カンマが不要なので削除

// 754行目
public function getPrimaryIdentifier($lastFirst = false)
↓
public function getPrimaryIdentifier($lastFirst = true)

送信メールの名前

//*ファイルの場所 /app/bundles/EmailBundle/Model/EmailModel.php
// 1622行目
if (!$mailer->setTo($user['email'], $user['firstname'].' '.$user['lastname'])) {
↓
if (!$mailer->setTo($user['email'], $user['lastname'].' '.$user['firstname'])) {

// 2404行目
if (!$mailer->setTo($user['email'], $user['firstname'].' '.$user['lastname'])) {
↓
if (!$mailer->setTo($user['email'], $user['lastname'].' '.$user['firstname'])) {

コンタクトの詳細で住所の順番が海外式

住所の表記も逆に表示されてしまうので、これを解消したい。

//*ファイルの場所 /app/bundles/LeadBundle/Views/Lead/lead.html.php
// 511行目から
<address class="text-muted">
  <?php if (isset($fields['core']['address1'])): ?>
    <?php echo $view->escape($fields['core']['address1']['value']); ?><br>
  <?php endif; ?>
  <?php echo (!empty($fields['core']['address2']['value'])) ? $view->escape($fields['core']['address2']['value']).'<br>' : ''; ?>
  <?php echo $view->escape($lead->getLocation()); ?>
  <?php echo isset($fields['core']['zipcode']) ? $view->escape($fields['core']['zipcode']['value']) : '' ?>
<br>
</address>
↓
<address class="text-muted">
  〒 <?php echo isset($fields['core']['zipcode']) ? $view->escape($fields['core']['zipcode']['value']) : '' ?>
<br>
  <?php echo $view->escape($lead->getLocation()); ?>
  <?php if (isset($fields['core']['address1'])): ?>
    <?php echo $view->escape($fields['core']['address1']['value']); ?>
  <?php endif; ?>
  <?php echo (!empty($fields['core']['address2']['value'])) ? $view->escape($fields['core']['address2']['value']) : ''; ?>
</address>

[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'),
        )
    ),
    // さくらレンタルサーバー用メール通知 ここまで    
    
];

[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がゲシュタルト崩壊しそう

[Concrete5]上級権限モードとは別に、テーマ側でユーザ判別したい時。

昨日Concrete5部で上級権限モードの話をしていたので、僕も何か書こうと思います。

上級権限モードは、ページの編集権限から、個別のエリアの編集や追加権限など、非常に事細かに設定ができるすぐれものなのですが、設定が非常に大変です。権限の設定だけでひと財産築けるんじゃないかなって思うくらい大変です。ジョークです。

そして、今回は上級権限モードとは関係の無い話でした。

一体なにがしたいのか

下記のコードを実際に使っているのですが、一体何をしようとしているのか。
「編集モードだったら+ユーザーがadminだったら、エリアを表示する」
という書き方をしています。

理由は以下の通り

  • スマホ版のテーマが別にある(レスポンシブではない)。
  • スマホ版の編集もPCで行う。
  • PCとスマホで表示する内容が異なる。
  • このエリアが編集できるのは、「admin」さんだけ。

つまり、レスポンシブではなく、モバイル用のテンプレートを別で用意していて、それぞれに別の情報を表示したい、でもエリアを表示できるのはadminさんだけに限定したい、というとてもニッチな状況で下記のコードで対処しました。

PC側のテンプレート

/themes/pc/elements/header.php
<?php
if ($c->isEditMode() && $u->getUserName() == 'admin') {
global $c;
$a = new GlobalArea('sp area');
$a->display($c);
} else {
} ?>

スマホ側のテンプレート

/themes/sp/elements/header.php
<?php
$a = new GlobalArea('sp area');
$a->display($c);
?>

それで、できたあとに気づいたのですが、ブロックテンプレートにmobile_detectを使うとか、そもそもadminさんしか編集できないならテーマにハードコーディングしてしまえばよかったなと思いました。

追記

ツイッターでacliss19xxさんから教えてもらいました!

「admin」さんだけだったら、スーパーユーザーだけって書いた方がいいですね。

PC側のテンプレート

/themes/pc/elements/header.php
<?php
if ($c->isEditMode() && $u->isSuperUser()) {//←ここ
global $c;
$a = new GlobalArea('sp area');
$a->display($c);
} else {
} ?>

[Concrete5]ログイン時のアップデート画面を非表示に

バージョン5.6.x
Concrete5はログイン時に、アップデート画面が表示されますが、お客さんに納品後に消して欲しいという要望をいただきまして。
重要な情報が載っていることもあるので、あまり消さない方がいいんですが、消し方はありまぁす。

/config/site.phpに一行追加するだけ。

define('ENABLE_NEWSFLOW_OVERLAY', false);

こんな感じ。

[Concrete5]ログイン時や編集モード時で表示を切り替えよう[メモ]

バージョン:5.6.3.1

自分用メモ的な。

ログインしている or していない

ログインして”いる”時だけ表示

ログインは登録ユーザーしかできないので、クライアントへのメモ的な扱いで残しておくような用途で使えます。

<?php
$u = new User();
if ($u->isRegistered()) { ?>
ここに書いたものはログインして"いる"時だけ表示されます
<?php } ?>

ログインして”いない”時だけ表示

ログインしていない時なので、一般のユーザーが閲覧する際にだけ表示するものを指定できます。
あんまり意味がないと思われますが、最近使いました。

<?php
$u = new User();
if (!$u->isRegistered()) { ?>
ここに書いたものはログインして"いない"時だけ表示されます
<?php } ?>

編集モード or 非編集モード

編集モード時だけ表示

以前、[Concrete5]エリア内にブロックがある時にだけ表示する[メモ]でも使用しました。
編集モード時だけに表示したいものは結構あります。編集時にはヘッダーにメニューバーが表示されるので、メニューバー分の余白を開けるのにもデフォルトのテーマで設定されていますよね。

<?php if ($c->isEditMode()) { ?>
ここに書いたものは編集モード時だけ表示されます
<?php } ?>

非編集モード時だけ表示

編集モードで見えず非編集モードで見えるということは、編集モードでどう頑張っても消したりできないという、クライアントの混乱の元になるのでやめましょう。

<?php if (!$c->isEditMode()) { ?>
ここに書いたものは非編集モード時だけ表示されます
<?php } ?>

[EC-CUBE + Concrete5] ECキューブの商品情報をConcrete5で利用する

タイトル通りですが、もうちょっと詳しく説明しますと、
「ECキューブに商品登録されている商品情報をxmlで取得してきて、Concrete5の編集でブロックに個別の商品IDを入力すると表示する」といった感じでしょうか。
ECキューブのページ作成機能がお客さんには使いづらいという感想だったので、Concrete5で編集・商品リストの作成は任意で行ってもらうようにしました。

バージョン:
ECキューブ 2.13.3
Concrete5 5.6.3.1

ECキューブAPIの取得方法については、下記のサイトを参考にさせていただきました。
EC-CUBEのAjax APIを使う(2) −−− 商品情報取得

なお、今回は同一サーバー、同一ドメイン内にECキューブとConcrete5をインストールしています。

ECキューブのAPIを使う

ECキューブには最近のバージョンでAPI機能が追加されたので、APIを利用して商品情報を取得できるようにします。

管理画面の「システム設定>パラメーター設定」にある「API_ENABLE_FLAG」を「true」にします。

xml.php

ECキューブのAPIは以下のURLでリクエストが送れます。

https://ドメイン/api/出力フォーマット.php

出力フォーマットは、JSONとxmlとphpの三種類あります。
今回はxmlを使用しました。

https://ドメイン/api/xml.php

これだけだと、下記のようにFalseが返ってきてなにも表示することができませんので、パラメータを設定する必要があります。

パラメータを含めたリクエストURL

https://ドメイン/api/xml.php?Operation=ItemLookup&Service=abc&ItemId=商品ID

Operation オペレーションの種類を指定します
Service 指定しないとエラーになります。ただし何も使われていないので適当な値を入力すれば大丈夫

Operationの種類は多数あるのですが、今回は「ItemLookup」を使用しました。
ItemLookupは、商品IDをキーに、商品詳細情報を取得します。商品IDは「ItemId」へ入力します。

これで商品情報の取得が可能です

Concrete5での設定 Desginer content

Concrete5側では、お客さんに商品IDを入れてもらうだけにするために、「Designer content」アドオンを利用します。
インストール方法などは省きます。

Designer contentで、新しいブロックを作成します。

Block Handleとブロック名は任意で、Add Fieldから「Text Box」を選択し、「Editor Label」に「商品ID」と入力。ダッシュボードでのDesigner contentで行う作業はこれだけです。

作成したブロックをカスタマイズ

Designer contentで作成したブロックのフロントテンプレートは、コンクリインストールフォルダの「/blocks/」ディレクトリ内に作成されます。
上記の例だと「/blocks/product_item」というディレクトリができているかと思います。
この中にあるview.phpがフロントテンプレートになります。

view.phpには以下のphpが書かれていますので、これをどうにかして商品情報を表示するように設定します

<?php  defined('C5_EXECUTE') or die("Access Denied.");
?>

<?php  if (!empty($field_1_textbox_text)): ?>
	<?php  echo htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET); ?>
<?php  endif; ?>

「echo htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET);」が、ブロックに入力された文字を表示するので、ここに商品IDを入力してもらっていれば、phpからxmlへリクエストを送る際の必要な商品IDをそのまま利用できるということになります。

<?php
$productID = htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET); //編集画面で入力された商品ID
$xml = simplexml_load_file('/api/xml.php?Operation=ItemLookup&Service=abc&ItemId=' . $productID); //APIへのリクエスト


xmlから必要な情報を取り出して変数に入れる

<?php
$productURL = $xml->Item->DetailPageURL;
$productName = $xml->Item->Title;
$productThumb = $xml->Item->ItemAttributes->main_list_image;
$productPrice = $xml->Item->ItemAttributes->price02_max;
?>


htmlのマークアップはお好みでどうぞ。

<p class="item_image"><a href="<?php echo $productURL;?>"><img src="/upload/save_image/<?php echo $productThumb;?>" alt="<?php echo $productName;?>"></a></p>
<p class="checkItemname"><a href="<?php echo $productURL;?>"><?php echo $productName;?></a></p>
<p class="price"><em><?php echo $productPrice;?></em>円</p>

補足

ちなみに、同一ドメインでも、apiへのリクエストが「/api〜〜」になっていると「I/O warning : failed to load external entity」が出る事があったので、apiリクエストを「http〜〜」になるようにしました。

<?php
$domain = (empty($_SERVER["HTTPS"]) ? "https://" : "https://") . $_SERVER["HTTP_HOST"] ; //ドメイン取得
$productID = htmlentities($field_1_textbox_text, ENT_QUOTES, APP_CHARSET); //編集画面で入力された商品ID

$xml = simplexml_load_file($domain . '/api/xml.php?Operation=ItemLookup&Service=abc&ItemId=' . $productID); //APIへのリクエスト