カテゴリー: IT/WEBハック

AmazonPayで自社ネットショップでのクレジットカード決済を可能に[EC CUBE3でAmazonPayを利用するためのステップその1]

【記事要約】

EC CUBE３系でのAmazonPay導入に関して、まず効率的に費用を抑えて自社ネットショップにクレジットカードを導入することにフォーカスします。

 

圧倒的にランニングコストがかからないネットショップ運営の筆頭と言えばEC CUBEだ。

無料で利用できるネットショッププログラムのため、うまく運用すればランニングコストはサーバとドメイン代程度。

そんなEC CUBEなどのネットショップで重要になってくるのが決済手段だ。

EC CUBEの最新のバージョンはEC CUBE３系と言われ、その前の２系とはプログラム構成などが全く異なっている。

僕は２系のEC CUBEに出会った後、しばらくEC CUBEと触れ合う機会がなかったため、久しぶりにEC CUBEの仕事をした際に、３系になったEC CUBEのあまりの変わりように驚いた。

今回、このEC CUBE３系でAmazonユーザがAmazonアカウントで買い物することを可能にするAmazonPayの導入について紹介したいと思う。

1. ネットショップにおけるクレジットカード決済の重要性とランニングコストの兼ね合いについて

ネットショップで欠かせない決済手段といえば、クレジットカード決済だ。

このご時世、クレジットカード決済があるかないかは、ネットショップの売上に大きく影響する。

クレジットカード決済は、ネットショップでは、必ず利用できるようにするべきと言っても過言ではない。

しかし、EC CUBEだけでなく、さまざまなネットショップで利用できるクレジットカード決済サービスは初期費用や月額費用が発生することが多いものが多く、さらには売れた金額に応じて手数料が取られる。

ネットショップの運営自体のランニングコストを抑えたとしても、このクレジットカード決済サービスのランニングコストがかかってしまうため、クレジットカード決済の導入を躊躇してしまうネットショップ運営者も多い。

僕のクライアントでも、このような理由からクレジットカード決済の導入を躊躇して悪循環を呼び、ネットショップの売上がなかなか伸びないクライアントがいる。

そんな時の救世主の様な存在がAmazonPayだ。

https://pay.amazon.com/jp

2. ネットショップ運営者と利用者双方にとって魅力的なAmazonPay

AmazonPayは、自社ネットショップにAmazonPayの機能をもたせれば、Amazonのアカウントを持っているユーザがログインして、Amazonアカウントに登録されたクレジットカードで決済ができるというサービスだ。

初期費用：無料、月額費用：無料、トランザクション料：不要で、販売手数料４％のみがコストとしてかかるという費用構成もとても良心的だ。

そのため、自社のネットショップにクレジットカード決済を導入したいが、ランニングコストは極力押させたいという店舗運営者にはとても魅力的なサービスだ。

ネットショップ利用者にとっては、Amazonアカウントで決済をするという安心感と氏名や連絡先、配送先を入力しなくていいという手軽さが魅力になる。

Amazonアカウントを持っているユーザは、このご時世ごまんといるだろう。

そんなAmazonユーザがあなたのネットショップに訪れ、Amazonアカウントで決済できることは、「楽」「安心」という魅力以外の何ものでも無いはずだ。

3. 初期導入が難点のAmazonPay

しかし、カラミーショップなどの、ネットショップクラウドサービスでは、多少制約があり、毎月の利用料が発生するものの、AmazonPayを簡単に導入できる仕組みが用意されているようだが、EC CUBEには用意がされていない。

調べたところ、月額5,000円でAmazonPayを利用できるEC CUBEのプラグインが販売されていたが、それでは、クレジットカード決済のランニングコストを抑える意味が消失してしまう。

よって、一番コストがかからないEC CUBEへのAmazonPay導入方法は自分でその環境を構築することだった。

最初に言っておくと、とても難しかった。

だが、ある程度プログラミングの知識がある人間なら不可能では無いと思う。

僕は、プログラミングの専門畑ではないが、基本的なPHPプログラムを読んだり、組むことができるレベルだ。

そのレベルの僕ができたというのが一つの目安になるかと思う。

なお、Amazonからは、「本番リリース後も、購入者に被害が出る恐れがあると弊社が判断した場合などにおいてAmazon Payカスタマー契約に基づき貴社アカウントの一時停止もしくは解除をさせて頂く場合がございます。」とメールに記載されていたので、厳重なテスト及び、着実なシステム構築が必要だ。

サイトの利用者に迷惑をかけるわけには行かないので、僕もテストケースを作り、念入りなテストを何百回も厳重に行った。

プログラミングができない、もしくはそれを代わりに安価にお願いできる人がいない場合は、AmazonPayの利用を諦めるか、先ほど記載した有料のプラグインを利用するしか無くなってくるだろう。

なお、参考までに、ヤマトフィナンシャルの決済サービスもコストがかからない。

初期費、月額利用料が無料で、売れた分に対して手数料がかかるというAmazonPayと同じ条件だ。

ヤマトフィナンシャルは手続きをすれば、EC CUBE3系にも対応したプラグインが無料で利用できる。

僕は、コンバージョンアップのために、ヤマトフィナンシャルの決済サービスとAmazonPayを両方導入した。

Amazonアカウントユーザのコンバージョンをアップしたいという目的があれば、AmazonPayを導入するしかないが、クレジットカード決済だけを導入することが目的なら、ヤマトフィナンシャルの決済サービスを導入するほうがはるかに簡単だ。

また、AmazonPay導入支援を行っているシステム会社や、AmazonPayを利用できるネットショップサービスは下記ページで確認できる。

https://pay.amazon.com/jp/integration-options

では、次回また続きをご紹介したいと思う。


AmazonPayを利用するためのステップその1]AmazonPayで自社ネットショップでのクレジットカード決済を可能に[EC CUBE3でAmazonPayを利用するためのステップその1]
AmazonPayで自社ネットショップでのクレジットカード決済を可能に

[EC CUBE3でAmazonPayを利用するためのステップその2]AmazonPayを申し込む[EC CUBE3でAmazonPayを利用するためのステップその2]
AmazonPayを申し込む

[EC CUBE3でAmazonPayを利用するためのステップその3]AmazonPayの簡易テストをする[EC CUBE3でAmazonPayを利用するためのステップその3]
AmazonPayの簡易テストをする

[EC CUBE3でAmazonPayを利用するためのステップその4]EC CUBE3プラグインをつくる[EC CUBE3でAmazonPayを利用するためのステップその4]
EC CUBE3プラグインをつくる

[EC CUBE3でAmazonPayを利用するためのステップその5]カート画面に[AmazonPay]でお支払ボタンを表示[EC CUBE3でAmazonPayを利用するためのステップその5]
カート画面に[AmazonPay]でお支払ボタンを表示

[EC CUBE3でAmazonPayを利用するためのステップその6]AmazonPayログイン時に購入確認画面へ遷移させる表示[EC CUBE3でAmazonPayを利用するためのステップその6]
AmazonPayログイン時に購入確認画面へ遷移させる表示

[EC CUBE3でAmazonPayを利用するためのステップその7]AmazonPay購入処理を完結させる[EC CUBE3でAmazonPayを利用するためのステップその7]
AmazonPay購入処理を完結させる

[EC CUBE3でAmazonPayを利用するためのステップその８]AmazpnPayエラーハンドリング設定などの詳細を詰める[EC CUBE3でAmazonPayを利用するためのステップその８]
AmazpnPayエラーハンドリング設定などの詳細を詰める

安価で高機能のASPサービスを活用しまくる②[V字回復上り坂#8]

引き続きオススメのクラウドサービスをご紹介

＜ビジネスチャットツール＞

『chatwork（チャットワーク）』

http://www.chatwork.com/ja/

僕にとっては、このツールがないと仕事にならないと言っても過言ではない。

チャットワークは、単に情報や意見のやりとりをするための道具ではなく、チャットワークを使うことによって、いくつもの会議が同時進行しているようなイメージだ。

通常の会議は、同じ場所に集まって、時間を拘束され、その間、その会議のことしかできない。

しかし、チャットワーク使って、プロジェクト毎にグループを作り、チャット上でやりとりをすれば、あえてミーティングの時間を取る必要もないし、スピーディーにプロジェクトが進行する。

文字データでのやりとりに限界がある場合は、ビデオチャット機能を使い、遠方のメンバーとも顔を見て話ができる。

何時間も時間をかけて、結局話がすすまない退屈な会議で時間を潰されたり、出張して遠方の会議に出席する必要もない。

時間とコストを要約して、最大限のパフォーマンスを生み出すことができる。

そんなツールなのだ。

タスク管理やファイル送信ももちろん可能だ。

chatworkの使い勝手の良さと、chatworkによる時短とコスト削減、パフォーマンスの向上を実感してしまうと、メールなんて使えたものじゃない。

 

＜名刺管理＞

『Eight（エイト）』

僕はあまり人に会わないことを自分のスタイルにしているので、名刺交換をする頻度は、一般的なビジネスマンに比べるとはるかに少ない。

だけれども、全く名刺交換しないわけではない。

かつて、さまざまな勉強会やセミナーに出ていた頃は、毎日のように何十枚という名刺交換をした。

たしかに、ビジネスの成功のひとつの要因は人脈だ。

だから、いただいたご縁は大切にするべく、出会って名刺交換した人の情報はいつでもどこでも引き出せるようにしておいた方がよい。

ただ、何千枚も名刺がたまって、それを日々ファイリングして、欲しい時に、ファイルの中から該当の人の名刺を探し出すという行動は僕にとっては苦痛でしかない。

そのため、名刺管理ソフトのEight（エイト）がおすすめだ。

Eightは名刺の写真を撮って送信するだけだ。

無料で使える上、オペレーターが手入力してくれるので、情報も性格。

もちろん検索もすぐにできる。

データをダウンロードしたければ、月額400円を払えばよい。

安価な上に、機能も充実。

自分でファイリングしたり、名刺上のデータをパチパチ打ち込む必要もない。

Eightに入力した後には、いただいた人にはちょっと申し訳ないが、破棄させてもらう。

もちろん個人情報なので、確実に原型が残らない方法で。

こうすれば、もらった名刺でオフィスのスペースを占領されることもなく、効率よくご縁情報の管理ができる。

 


断捨離[V字回復上り坂#1]断捨離
[V字回復上り坂#1]

電話をなくす[V字回復上り坂#2]電話をなくす
[V字回復上り坂#2]

本とセミナーを辞める[V字回復上り坂#3]本とセミナーを辞める
[V字回復上り坂#3]

月々のチャリンチャリンを増やす[V字回復上り坂#4]月々のチャリンチャリンを増やす
[V字回復上り坂#4]

僕のカバンには紙とペンが入っていない[V字回復上り坂#5]僕のカバンには紙とペンが入っていない
[V字回復上り坂#5]

僕のカバンには紙とペンが入っていない②[V字回復上り坂#6]僕のカバンには紙とペンが入っていない②
[V字回復上り坂#6]

安価で高機能のASPサービスを活用しまくる[V字回復上り坂#7]安価で高機能のASPサービスを活用しまくる
[V字回復上り坂#7]

安価で高機能のASPサービスを活用しまくる②[V字回復上り坂#8]安価で高機能のASPサービスを活用しまくる②
[V字回復上り坂#8]

精神を保つ [V字回復上り坂#9]精神を保つ
[V字回復上り坂#9]

晴れてV字回復 [V字回復上り坂#10]晴れてV字回復
[V字回復上り坂#10]

ストレスは簡単には、抜けない[エピローグ：V字回復上り坂]ストレスは簡単には、抜けない
[エピローグ：V字回復上り坂]

Episode1:起業人生のはじまりEpisode1:起業人生のはじまり
起業するつもりなんてなかった僕が起業することになり、右も左も分からない状況の中、とにかく試行錯誤しながら突き進んだエピソードはこちら（全16話）

Episode2:V字回復下り坂 2,500万円の借金を抱えるまでに至ったV字下り坂を転がり落ちる話し。Episode2:V字回復下り坂
2,500万円の借金を抱えるまでに至ったV字下り坂を転がり落ちるエピソードはこちら（全11話）

安価で高機能のASPサービスを活用しまくる[V字回復上り坂#7]

効率よく、自分のリソースを最大限にフル活用するために、強い味方になってくれるのが、WEBを使ったクラウドサービスだ。

「僕のカバンには紙とペンが入っていない」の話にも関連してくるが、

僕のカバンには紙とペンが入っていない[V字回復上り坂#5]

僕のカバンには紙とペンが入っていない②[V字回復上り坂#6]

ここでは、「僕のカバンには紙とペンが入っていない②[V字回復上り坂#6]」で紹介した以外のクラウドサービスを紹介したいと思う。

いいクラウドサービスは、コスパも良く、時短にも繋がる。

しかし、中には使えない割には、高額なクラウドサービスもある。

悪質なものは、リースを組まされ、がんじがらめにされることもある。

しかし、僕の過去の経験からして、月数万円もするような高額なWEBサービスでいいものに出会ったことがない。

途中で「このサービスは使えない」と気づいても後の祭りだ。

リース契約なので、契約したお金を支払いきるしかないのだ。

どうあがいても解約することができない。

だからこそ覚えていただきたいのが、優秀なクラウドサービスは低コストで使い勝手がいいということだ。

良いサービスは、多くのユーザが使っていたり、出資者が多いため、ユーザーのコスト負担が少ない。

くれぐれも、最終的に何百万も払わされるようなサービスや、支払いがリースといったようなサービスは利用しないで欲しい。

（僕は、過去に何度もクライアントからこの手の相談を受けた。）

 

 

＜会計ソフト＞

『マネーフォワード・クラウド会計』

弥生会計やTKCの会計ソフト「FXシリーズ」など、様々なソフト（インストール型）がこれまで席巻していたが、僕は断然マネーフォワードの法人向けサービス「クラウド会計」をオススメする。

無料アカウントが最初に作ることができるので、お試しすることも可能だ。

マネーフォワードの入力は、僕の個人的な感想としては、とっても簡単だ。

ユーザーインターフェースもよくできていると思う。

もちろん、会計の知識が無くては、ログインしてもチンプンカンプンだと思うが、経営者たるべきもの、マネーフォワードくらいは使いこなせないと、今後の経営は難しいと言っても過言ではない。

会計知識がないがために、面倒くさい、よく分からないという理由で会計士に丸投げをする経営者もいるが、そういった経営者は数字の流れが見えず、窮地に追い込まれることが殆どだ。

かつての僕が実際にそうだったから、断言する。

クラウドサービスなので、会計士のPCにデータ移行という手間も必要ないし、アカウントでログインすれば、どのデバイスからでも同期した情報を確認することができる。

僕はライトプランなので、月額1,980円だ（安い！）。

マネーフォワードには毎日アクセスし、財務状況を確認する。

会計士と顧問契約すれば、安くても月額15,000円以上はするだろう。

だから、日々の入力は自分で行い、四半期または半月毎に会計士にチェックしてもらい、あとは決算だけまとめてもらう契約にしておけば、かなりコストが削減できる。

マネーフォワードがクラウド会計ソフトとしては、NO.1だが、その他に「Free」などのASPサービスもあるのでコストや画面デザインなど、好みにあったサービスを選んでもらえたらと思う。

次回引き続き、使えるクラウドサービスを紹介していきたいと思う。


断捨離[V字回復上り坂#1]断捨離
[V字回復上り坂#1]

電話をなくす[V字回復上り坂#2]電話をなくす
[V字回復上り坂#2]

本とセミナーを辞める[V字回復上り坂#3]本とセミナーを辞める
[V字回復上り坂#3]

月々のチャリンチャリンを増やす[V字回復上り坂#4]月々のチャリンチャリンを増やす
[V字回復上り坂#4]

僕のカバンには紙とペンが入っていない[V字回復上り坂#5]僕のカバンには紙とペンが入っていない
[V字回復上り坂#5]

僕のカバンには紙とペンが入っていない②[V字回復上り坂#6]僕のカバンには紙とペンが入っていない②
[V字回復上り坂#6]

安価で高機能のASPサービスを活用しまくる[V字回復上り坂#7]安価で高機能のASPサービスを活用しまくる
[V字回復上り坂#7]

安価で高機能のASPサービスを活用しまくる②[V字回復上り坂#8]安価で高機能のASPサービスを活用しまくる②
[V字回復上り坂#8]

精神を保つ [V字回復上り坂#9]精神を保つ
[V字回復上り坂#9]

晴れてV字回復 [V字回復上り坂#10]晴れてV字回復
[V字回復上り坂#10]

ストレスは簡単には、抜けない[エピローグ：V字回復上り坂]ストレスは簡単には、抜けない
[エピローグ：V字回復上り坂]

Episode1:起業人生のはじまりEpisode1:起業人生のはじまり
起業するつもりなんてなかった僕が起業することになり、右も左も分からない状況の中、とにかく試行錯誤しながら突き進んだエピソードはこちら（全16話）

Episode2:V字回復下り坂 2,500万円の借金を抱えるまでに至ったV字下り坂を転がり落ちる話し。Episode2:V字回復下り坂
2,500万円の借金を抱えるまでに至ったV字下り坂を転がり落ちるエピソードはこちら（全11話）

僕のカバンには紙とペンが入っていない[V字回復上り坂#5]

V字の上り坂を登り始めてから、効率化を徹底的に追求してきたのは前述の通りだが、その中のひとつが紙をペンをもたないということだ。

つまりは、仕事に使うツールをIT化するということだ。

元々WEB関係の仕事をしていたためパソコンを使いこなせるという要素がこれを可能にしたというところがあるが、ブラインドタッチができる人であれば、ITツールを少し研究するだけで、ツールのIT化は可能だと思う。

＜ノート＞

クライアントとの打ち合わせのメモはすべてPCに即叩き込む。

もちろん録音して後から文字起こしということもしない。

それをやっていたら、打ち合わせの時間と文字起こしの時間が重複してかかってしまう。

会議の内容は、基本的にマインドマップソフトを使い、マインドマップに落とし込む。

それを議事録としてPDF形式で保存し、打ち合わせ相手にも送れば、議事録として残せる。

その他、Evernoteを使っていつでもどのキャリアからでもノートが閲覧できるようにしておくのも便利だ。

なお、打ち合わせで内容をPCに打ち込む際に注意したいことは、画面を見ながら打たないということだ。

もちろんブラインドタッチだ。

画面を見てしまうと、そうでなくても相手は「自分の話を聞いてない」「真剣に聞いていない」という印象を抱きがちだからだ。

 

＜ファイル＞

クライアントやプロジェクト毎の資料もすべてデジタル化にする。

資料や素材を紙や印刷写真として受け取った場合は、スキャンするか写真をとって、保存すれば、分厚い資料を持ち歩く必要もない。

そしてすぐに返却できる。

僕はクライアント毎にフォルダを作り、さらにその中に案件ごとのフォルダを作っている

 

例）日の丸株式会社の場合

HI0001_日の丸株式会社

　−01DOC（書類関係。契約書や各種サービスアカウント情報など）

　−02DATA（クライアント案件全般で使える素材データ。ロゴや企業外観など）

　−03PICS（クライアント案件全般で使える加工データ。基本的にPSD [フォトショップデータ]）

　−04PRINTDATA（クライアント案件全般で使える印刷物データ。基本的にAI [イラストレーターデータ]）

　−SITE （WEB構成ファイル（html、phpなど））

さらにこの中に開発案件毎のフォルダを入れる。

HI0001_1_日の丸株式会社ホームページ制作

HI0001_2_日の丸株式会社パンフレット制作

開発フォルダの内容は、下記のような構成だ。

01_doc（書類関係。見積書や請求書、スケジュールなど）

02_data（受け取った素材データ）

03_pics（基本的にPSD [フォトショップデータ]）

04_printdata（印刷物データ。基本的にAI [イラストレーターデータ]）

これは上層のフォルダ構成と似ているが、開発毎のファイルを入れる。

このように、フォルダ構成を決めておくととても便利だ。

自分の事業に合わせて是非調整してほしい。

SugarSyncやGoogleDrive、Dropboxなどさまざまだ。

ある程度の容量までは無料で使えるものもあるし、例えコストがかかるとしても月数百円と非常に安価だ。

 

このように、ツールのIT化をするだけで、かなりスッキリ身軽になり、スマートに仕事をすることができる。

最初慣れるまでは大変な人もいるが、慣れてしまえばこっちのもんだ。

業務スピードが２倍、３倍にも早くなり、時間が生まれることを実感してもらえると思う。


断捨離[V字回復上り坂#1]断捨離
[V字回復上り坂#1]

電話をなくす[V字回復上り坂#2]電話をなくす
[V字回復上り坂#2]

本とセミナーを辞める[V字回復上り坂#3]本とセミナーを辞める
[V字回復上り坂#3]

月々のチャリンチャリンを増やす[V字回復上り坂#4]月々のチャリンチャリンを増やす
[V字回復上り坂#4]

僕のカバンには紙とペンが入っていない[V字回復上り坂#5]僕のカバンには紙とペンが入っていない
[V字回復上り坂#5]

僕のカバンには紙とペンが入っていない②[V字回復上り坂#6]僕のカバンには紙とペンが入っていない②
[V字回復上り坂#6]

安価で高機能のASPサービスを活用しまくる[V字回復上り坂#7]安価で高機能のASPサービスを活用しまくる
[V字回復上り坂#7]

安価で高機能のASPサービスを活用しまくる②[V字回復上り坂#8]安価で高機能のASPサービスを活用しまくる②
[V字回復上り坂#8]

精神を保つ [V字回復上り坂#9]精神を保つ
[V字回復上り坂#9]

晴れてV字回復 [V字回復上り坂#10]晴れてV字回復
[V字回復上り坂#10]

ストレスは簡単には、抜けない[エピローグ：V字回復上り坂]ストレスは簡単には、抜けない
[エピローグ：V字回復上り坂]

Episode1:起業人生のはじまりEpisode1:起業人生のはじまり
起業するつもりなんてなかった僕が起業することになり、右も左も分からない状況の中、とにかく試行錯誤しながら突き進んだエピソードはこちら（全16話）

Episode2:V字回復下り坂 2,500万円の借金を抱えるまでに至ったV字下り坂を転がり落ちる話し。Episode2:V字回復下り坂
2,500万円の借金を抱えるまでに至ったV字下り坂を転がり落ちるエピソードはこちら（全11話）

WordPressの記事一覧を別サイトに表示させる「feedwind」

【記事要約】

WordPressの記事一覧を別サイト（別ドメイン）に表示させたいときに便利な方法をご紹介します。

WordPressの記事一覧をドメインが異なる別のサイトに表示したいという要望があったので、いろいろ方法を検討したところ、独自にプログラムを書いたりするのがとても面倒そうだった。

しかし、あっという間にWordpressの記事一覧をドメインが異なる別のサイトに表示への表示を実現するサービスを見つけたので紹介します。

そのサービスとは、「feedwind」です。

https://feed.mikle.com/ja/

①feedwindでアカウント（無料）を作成する。

②記事一覧を表示させたいブログ（Wordpress）のURLを入力

③その他、リスト表示の幅やリンク文字色などを設定する

④貼り付けコードを取得し、コピー。

⑤リストを表示させたいページに④のコードを貼付け。

たったこれだけのステップでWordpressの記事一覧をドメインが異なる別サイトに表示させることができました。

レスポンシブ（スマホ対応）にも対応しているし、基本的に無料アカウントで十分だが、有料アカウントを取得すると表示させるリスト表現の幅が広がるようです。

またfeedwindを使えば、Wordpressの他にFacebookやGoogleカレンダーの情報も取得して表示できるよう。

なかなか便利なサービスfeedwindのご紹介でした。

 

WordPressの記事にソースを美しく表示するプラグイン「Crayon Syntax Highlighter」

【記事要約】

WordPressの記事内にソースコードを美しく表示してくれるプラグインCrayon Syntax Highlighterのご紹介です。

WordPressで記事を書いている時に、htmlやcss、PHPのソースコードを紹介する機会がある人もいると思う。

そんな時、直接書いてしまうと、見づらかったり、分かりにくかったりする。

そんな時に役立つのが、Crayon Syntax Highlighterというプラグイン。

今回は便利なCrayon Syntax Highlighterについてのご紹介です。

1. Crayon Syntax Highlighterをプラグインに新規追加する

①　WordPress管理画面よりプラグイン＞新規追加でプラグインの新規追加ページに移動する。

②　検索ボックスで「Crayon Syntax Highlighter」を検索する。

③　検索結果に出てきた「Crayon Syntax Highlighter」をインストール

④　インストール後、[有効化]のボタンを押し、有効化する

2. Crayon Syntax Highlighterを実際に使ってみる

①　Crayon Syntax Highlighterの表示スタイルを反映させたいソースコードを選択し、ツールエリアの下図の赤色のボタンを押す。

②　下のようなポップアップが立ち上がる。基本的にそのまま[Add]をクリックすればよいが、ポップアップでマージンやフォントなどを適宜調整してもOK。

③　Wordpressの編集画面上は下のようにグレー枠で表示される

④　実際の投稿ページにはこちらのように表示される。これで完成！

なお、Crayon Syntax Highlighterの各種設定は

設定＞Crayonから設定できる。

 

 

Macでロックされているファイルを編集する方法

【記事要約】

Macには、重要で編集されるとシステムやアプリケーションの動作に影響が及ぶ重要な裏方のファイルをユーザが編集できないようにロックしている場合があります。そのロックされているファイルを編集できるようにする方法を紹介します。

Macで様々なアプリケーションの設定を独自に変更する場合や、ちょっとマニアックな変更設定をする際に、ファイルにロックがかかっていることがある。

今回はそのロックがかかっているMacのファイルを編集できるようにする設定方法をご紹介します。

ただし、ロックがかかっているのはアプリケーションやシステムが動作するために重要なファイルだからこそロックがかかっています。そのため、変更や作業は自己責任で行ってください。

1. ファイルのロックを外す

①　ロックを外したいファイルの上で右クリック＞情報を見るを選択

②　「<–該当のファイル名–>の情報」というタイトルでポップアップが立ち上がる。ポップアップ一番右下の鍵マークをクリックする。

③　ログインユーザのPCパスワードを入力する

④共有とアクセス権下の[＋]ボタンを押す。

⑤追加するユーザを選択するダイアログボックスが表示されるので、追加ユーザを選択後[選択]ボタンを押す。

⑥　共有とアクセス権の項目に選択したユーザが表示される。アクセス権の列が「読み出しのみ」となっていると思うので、そちらをクリックし、読み/書きを選択する

⑦　これでロックされていたファイルの編集ができるようになったので、編集作業をする。

なお、何か間違いがあった時のために、すぐに元のファイルに戻せるように必ずバックアップを取っておくのがよい。

 

2. 再びファイルにロックをかける

ファイルの編集が終わったら、念のため再びファイルにロックをかけておいた方が無難であるため、その作業をする。

①　１と同様、該当ファイルの上で右クリック＞情報を見るで立ち上がるポップアップの一番下「共有とアクセス権」の欄で自分のユーザ名を選択した状態で[−]ボタンを押す

すると、１で追加したユーザが削除される。

②　最後にポップアップ一番右下の鍵マークをクリックする。鍵が開いている状態のアイコンが、鍵が閉じた状態のアイコンに変更される。

これで再び元のようにロックがかかった状態となった。

以上、Macでロックがかかっているファイルを編集できるようにする一連の流れのご紹介でした。

Dreamweaverでtwigファイルを編集できるようにする設定

【記事要約】

近頃増えてきたtwigファイル。そのtwigファイルをDreamweaverで編集可能にする設定方法について説明します。

EC CUBE3でネットショップを構築したところ、ファイルの書き換えの必要が出てきた。

そのため、サーバからファイルをダウンロードし、編集が必要な該当ファイルを探し出すとファイル形式がtwig。

Dreamweaverで開こうとすると「このファイル拡張子に有効なエディターが見つかりません。」という内容のエラーが出た。

そこで調べると幾つか設定ファイルの変更が必要だったので、そのやり方（Mac）を紹介します。

 

一番参考になった本家本元adobeのサポートページ

https://helpx.adobe.com/jp/dreamweaver/kb/cq02092222.html

上記ページでは拡張子「INC」の場合の説明ですが、「INC」を「TWIG」に置き換えて設定すればOK.

（Windowsユーザの方は上記ページのWindowsでのやり方を参照してください。）

1. Extensions.txt ファイルの編集

①　Dreamweaver を終了する。

②　下記フォルダにアクセス（Mac）。

Macintosh HD/Users/＜ユーザー名＞/Library/Application Support/Adobe/Dreamweaver ＜バージョン＞/ja_JP/Configuration

注意１：通常このLibraryフォルダは見えないようになっているため、設定が必要。

設定方法は下記ページ参照

Macの隠しフォルダを表示する方法＞＞

注意２：実際はカタカナ表記になっているフォルダもある。（例：Library→ライブラリ）

③　Extensions.txt ファイルのバックアップを作る（何か不具合があった場合にすぐ元に戻せるようにするため）

④　テキストエディタでExtensions.txtを開く

⑤　ファイルの下記部分にTWIGを追加する

行の最期が「:All Documents」となっている行。

⑥　さらに僕の場合、PHPのグループとしてTwigを追加したかったので、行の最期が「:PHP Files」となっている行にも追記した

⑦　Extensions.txtを上書き保存する。

以上で、取り急ぎDreamweaverでファイルを開くことができるようになる。

2. MMDocumentTypes.xml ファイルを書き換える

①　Dreamweaver を終了する。

②　下記フォルダにアクセス（Mac）。

Macintosh HD/Applications/Adobe Dreamweaver ＜バージョン＞/Configuration/DocumentTypes

注意１：実際はカタカナ表記になっているフォルダもある。（例：Applications→アプリケーション）

③　MMDocumentTypes.xml ファイルのバックアップを作る（何か不具合があった場合にすぐ元に戻せるようにするため）

なお、Adobeサイトにもあるが、Dreamweaverを起動する時に妨げになるため、バックアップファイルは元データと同じファイルには置かずに、別フォルダに保存すること。

④　MMDocumentTypes.xmlは通常編集不可としてロックされているので、編集できるようにするためにファイルのロック解除をする

設定方法は下記ページ参照

Macの隠しフォルダを表示する方法＞＞

⑤　テキストエディタでMMDocumentTypes.xmlを開く。（Dreamweaverで開いてはいけないとの注意書きがAdobeサイトにある。）

⑤　ファイルの下記部分にTWIGを追加する

⑥　MMDocumentTypes.xmlを上書き保存する。上書き保存できない場合には、一旦デスクトップなどに保存し、コピペで上書きする。

以上で、Dreamweaverのコードカラーリングやデザインビューが反映されるとAdobeサイトにはあったが、なぜかデザインビューが利用できなかった。

デザインビューは特に利用しないので、別によいのだが、コードカラーリングが微妙な色合いでよく見ないと違いが分からないほど。

そこで、色々と触ってみると何のためにあるのかよく分からないDreamweaver（CC2017）の右下プルダウンを「PHP」に設定するとかろうじて少し色味が分かりやすくなった。

フォルダがない！Macの隠しフォルダ・ファイルを表示する方法

【記事要約】

Macには、重要で編集されるとシステムやアプリケーションの動作に影響が及ぶ重要な裏方のフォルダ・ファイルをユーザから見えないようにするための隠しフォルダ・フォルダが存在します。そんな隠しフォルダを表示させる方法を紹介します。

Macの隠しフォルダ・ファイルを表示する方法

MacのPCを使っているうちに様々な設定変更が必要になり、ネットで調べてみると方法は分かったものの、記事に記載されているフォルダが見当たらない！ということがあります。

そんな場合、そのフォルダは隠しフォルダのため、通常見えてない場合があります。

（OSバージョンアップ等によりそもそも場所が変わることもあります。）

そんな隠しフォルダの表示方法をご紹介します。

1. ターミナルを起動する

①　ターミナルを起動します。

＜Launchpadから開く場合＞

１）DocのLaunchpadをクリック

DocのLaunchpadをクリック

２）その他の囲みをクリック

その他の囲みをクリック

３）ターミナルをクリックする。

 

＜アプリケーションから開く場合＞

１）ファインダーを開く

２）アプリケーション＞ユーティリティ＞ターミナルを順にクリックして開く

2. ターミナルに不可視ファイルを表示させるコードを入力する

①　ターミナルに下記コードを入力します。１つでも間違うと動作しないので、コピー&ペーストすることをおすすめします。

②　入力したらエンターを押します。

③　ファインダーを再起動するために下記コードをターミナルに入力します。

これで、隠しフォルダ・ファイルが見えるようになります。

隠しフォルダ・ファイルは元々見えていたフォルダと異なり、半透明で表示されます。

隠しフォルダ・ファイルが見えるようになったファインダー

 

3. ターミナルに不可視ファイルを非表示にするコードを入力する

①　ターミナルに下記コードを入力します。

 

③　ファインダーを再起動するために下記コードをターミナルに入力します。

これで、隠しフォルダ・ファイルが見えなくなります。

隠しフォルダ・ファイルが再度見えなくなったファインダー

EC CUBE３新しいスタイル（CSS）を追加

【記事要約】

EC CUBE３にオリジナルのスタイル（CSS）を追加する方法を紹介します。とっても簡単！テンプレートはデフォルトのテンプレートです。

EC CUBE3でネットショップを構築。

独自のスタイル（CSS）を適応させたい場合のやり方をご説明します。

EC CUBEのデフォルトテンプレートを使用していることを前提としています。

1. CSSファイルを作る

①　FTPでEC CUBEのファイルがアップされているサーバにアクセスし、下記パスのフォルダを参照する。

html/template/default/css/

②　①のフォルダ内にあるstyle.cssをダウンロード。

やり方としては、ダウンロードしたstyle.cssに反映させたいスタイルを追記した後、再度アップロードすればよいが、ここでは、新しく独自のCSSファイルを作成するやり方を紹介します。

style.cssをnew.cssなど①のフォルダ内にないファイル名に変更。

——————————–

@charset “utf-8”;

@import url(“bootstrap.custom.min.css”); /* only Grid system CSS */

——————————–

上記はそのまま残し、
/* ——————————–
Common style
——————————– */

を

/* ——————————–
New style
——————————– */

などに変更。

それ以下の内容は一旦削除し、新しいスタイルを追加する。

③　新しく作ったnew.cssファイルをダウンロード元のフォルダにアップロードする。

html/template/default/css/

 

2. ベースとなるテンプレートを書き換える

①　FTPでEC CUBEのファイルがアップされているサーバにアクセスし、下記パスのフォルダを参照する。

src/Eccube/Resource/template/default

ここには、EC CUBEの表示の基本となるファイルが格納されている。

②　①のフォルダよりdefault_frame.twigをダウンロードする。ダウンロードしたら、必ずバックアップを取る（書き換えミスにより不都合が生じた場合に直ぐに元に戻せるように）。

③　default_frame.twigの45行目あたり、各CSSを読み込む記載がされている辺りの一番下に下記を追記して保存する。

<link rel=”stylesheet” href=”{{ app.config.front_urlpath }}/css/new.css”>

④　変更したdefault_frame.twigファイルをダウンロード元のフォルダにアップロードする。

src/Eccube/Resource/template/default

 

3. スタイル（CSS）が反映されているか確認する

１．２に従ってファイルをアップした後、ブラウザで指定したスタイル（CSS）が反映されているか確認するのだが、僕の場合、一旦キャッシュクリアとEC CUBEのキャッシュ管理より操作をしないと、新しいスタイルが反映されなかった。

①　ブラウザのキャッシュクリアをする。

使っているブラウザ名＋キャッシュクリアで検索すると、サポートセンターの説明ページ等が見つかるのでそれに沿って操作をする。

②　EC CUBE管理画面、コンテンツ管理＞キャッシュ管理をクリック

今回は、twigファイルを更新したので、twigにチェックを入れて[キャッシュ削除]ボタンを押す。

③　ブラウザで表示させてスタイル（CSS）が反映されているか確認しよう。