に投稿 コメントを残す

Woocommerceの高速化のための4つのポイントとプラグイン6選

俳優の阿部寛さんの公式サイトをご存知でしょうか?
巷では「雰囲気が一世代前だけど表示速度が爆速で笑ってしまう」と評判となったサイトです。
阿部 寛のホームページ】http://abehiroshi.la.coocan.jp/

WEBサイトの表示速度は時に内容やコンテンツ以上に重要な役割を持ちます
今回は、Woocommerceを高速化するための4つのポイントと、6個のプラグインを紹介したいと思います。

既に高速化のプラグインを導入しているがサイトの表示が重い・遅い方は、サーバー会社を変えるか一つ上のサーバープランに変更することをお勧めしております

お勧め高速サーバー

【wpxサーバー】https://www.wpx.ne.jp/server/

【Conohawing】https://www.conoha.jp/wing/

それでも改善しない方には、当サイトでご案内しているWordpress爆速化サービスの「爆速研究所」のご利用もお勧めです。
「爆速研究所」では、現在の運用されているサイトの内容そのままに、スピードだけ爆速に改善する環境構築サービスです。
Woocommerceで作られたECサイトなどデータや動的コンテンツが多いサイトでも、サーバー側にキャッシュを自動で生成しておくことで爆速化が実現できます。

現在は、ご指定のサイト※を爆速環境で構築して30日間体験できる「爆速体験」が無料ですので、こちらのフォームからお問合せをしてみてください。
※原則ご自分で管理・運用されているWordpressのサイトに限ります

1.表示速度が遅いとどのような影響があるのか

Googleが発表した有名な表示速度と直帰率の調査によると、

    • 表示速度が1秒から3秒に落ちると、直帰率は32%上昇
    • 表示速度が1秒から5秒に落ちると、直帰率は90%上昇
    • 表示速度が1秒から6秒に落ちると、直帰率は106%上昇
    • 表示速度が1秒から7秒に落ちると、直帰率は113%上昇
    • 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
    • ページの要素(テキストやタイトル、画像など)の数が400個から600個に増えると、コンバージョン率は95%下がる

という結果が出ています。
この情報以外にも、表示に3秒以上かかるサイトは53%のユーザーがページを離れる調査結果には書かれてかれています。

どれだけ良いブログ記事や良い商品を掲載していても、表示が遅いとそれだけで訪問者は離れていってしまいます。
スマートフォンがこれだけ普及した世の中で、手軽に情報を得るための表示スピードはとても重要な要素なのです

また、サイトの表示速度は検索のSEOにも影響があります
グーグルが「ページの表示速度をモバイル検索のランキング要素として組み込むこと」をアナウンスした記事です。

表示を速くすればSEOも上がり、ユーザーも嬉しい。良いことづくめですね。

2.Woocommerceの高速化するための4つのポイント

本当はもっと多いのですが、シンプルに4つのポイントとそれを解決するためのプラグインを紹介します。
まずは、4つのポイントです。

  1. 画像を圧縮する
  2. 画像を遅延読込させる
  3. CSS/JavaScriptを最適化させる
  4. データベースの最適化させる

もし対策を全くしていないのであれば、これらのプラグインを入れることで確実に表示は速くなります

それぞれの説明とお勧めのプラグインを紹介していきます。

1.画像を圧縮する

サイト上で表示される画像のサイズは、表示速度に大きな影響を与えます。
そこまで大きなサイズの画像はWEBサイト上では必要ありませんので、画像圧縮プラグインで圧縮を行いましょう。
(商品詳細画面などで画像を拡大する場合は低画質だと、質感などが伝わりにくくなる可能性があります)

日本では、以下の2つが画像圧縮で有名プラグインになります。

EWWW Image Optimizer利用者の多い画像圧縮プラグイン:プラグインがインストールされているサーバー上で圧縮が行われる(サイトに負荷がかかる)

Compress JPEG & PNG images

1ヵ月500ファイルまでの制限あり(それ以上は有料):開発元のサーバーで圧縮が行われる(サイトに負荷がかからない)

特徴を見ていただけたら分かるように、処理ファイル数と負荷のメリットデメリットがあります。
どちらの圧縮率もそこまで変わりませんので、場合によって使い分けるのが良いかと思います。

2.画像を遅延読込させる

画像は読み込みに時間がかかりますので、画面上の可視領域についてのみ画像を読み込み、
下部にスクロールするたびに画像を動的に読みこんでいく形にすることで、画面の表示速度を速くすることができます。

Lazy Load

当方でもLazy Loadを利用中。問題なく稼働

BJ Lazy Load

有効インストール数・★5評価多い

どちらも大きく違いはないかと思います。
③のLazy Loadを使っていますが、他のサイトでは④のBJ Lazy Loadをご利用している方も多いようです。
導入後の動きなどを見てご判断いただければと思います。

3.CSS/JavaScriptを最適化する

WordPressのHTMLソースコードやCSS、JSファイルを最適化することにより表示速度を速くすることができます。
ただ、中々各ファイルの最適化というのは知識がないと難しいものです。以下のプラグインは有効化することにより最適化を自動で行ってくれます。

Autoptimize

日本語化がされている。別ファイルで作成されるので、無効化すれば元通りになる。

Head Cleanerという有名なプラグインもあるのですが、作られるキャッシュファイルがサーバーの容量を圧迫するという報告がされております。
Autoptimizeをお勧めします。

4.データベースの最適化させる

WordPressの記事や投稿にはリビジョンという機能があります。過去に編集した記事の状態がリビジョンとして保存されており、選択することでその状態に戻すことができます。
しかしリビジョンは、蓄積し続けるとWordPressの動作を遅延させる要因にもなり得ます。
データベースの最適化のプラグインを使い、不要なリビジョンを削除することで画面の表示速度を速くすることができます。

Optimize Database after Deleting Revisions

指定した日付よりも前のリビジョン情報を消すことができる

自動最適化のスケジュールも設定できるので、適切な設定を行い不要なデータを消していきましょう。

3.キャッシュプラグインは入れるべきか?

キャッシュとは、サイトのページの表示の際に生成したページデータを保存し再利用する仕組みです
Woocommerceの場合、ブログやコーポレートサイトとは違い、ユーザーによって動的にコンテンツの内容が変わります。
一部の画像キャッシュは有効かもしれませんが、キャッシュプラグインを入れることによって情報の不整合が発生する可能性が高いです
キャッシュプラグインはデータベースやPHPの処理を省略でき、効果は高いのでWordpressの静的サイトであれば大いに入れていただいたほうがいいかと思います。

4.まとめ

以上、4つのポイントと6個のプラグインになります。

何も対策をしていないのであれば、これらのプラグインを入れるだけでも速度の効果は実感できると思います。
ただし、サイトやサーバーとの相性は確実にあるので注意が必要です。

導入後はしっかりとサイトを確認し、快適になった表示速度を感じてニヤニヤしましょう。

また、上記でも述べた通りWoocommerceなどのECサイトなどでは、効果が出やすいキャッシュ系のプラグインの利用はお勧めできません。
場合によっては、カートへの数量や商品の価格などの整合性が取れないことがあります。

Woocommerce(Wordpress)で構築したサイトが「遅い」「重い」、または「遅くはないがもっと早くしたい」というご要望は、
サイトを爆速にする環境構築サービス「爆速研究所」で解決できます。
今なら、指定のサイトを爆速環境で構築して30日間体験できる「爆速体験」が無料ですので、速度の問題が解決できない場合は一度試しに依頼してみましょう。

 

に投稿 コメントを残す

【速いは正義】根本的にサイトの表示速度を改善する方法

サーバーの性能やプラグインにたよらず、根本的なサイトの表示速度を改善してみませんか?

一般的に作成したサイトの表示速度が遅い場合、

  • 画像のキャッシュ化
  • 不要なデータやプラグインの削除
  • サーバースペックのアップなどの処置

等を行うと思いますが、それでも改善されない場合、根本的なシステム構成の変更と設定の調整(チューニング)を行うことで改善できる可能性があります。

サイト速度が遅いと、ユーザーは直帰する

なかなかページを読み込まないサイトだったので見るのを諦めた経験はありませんか?
いくら優れたサイトでも、表示速度が遅ければユーザー直帰率は高くなります。

  • 表示速度が1秒から3秒に落ちると、直帰率は32%上昇
  • 表示速度が1秒から5秒に落ちると、直帰率は90%上昇
  • 表示速度が1秒から6秒に落ちると、直帰率は106%上昇
  • 表示速度が1秒から7秒に落ちると、直帰率は113%上昇
  • 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
  •  ページの要素( テキストや タイトル、画像など)の数が400個から600個に増えると、 コンバージョン率は95%下がる

引用元:表示速度が1秒→7秒で直帰率は113%↑、モバイル向けサイトのUXはとにかくスピードが命 | 海外SEO情報ブログ

実際Googleが直帰率とコンバージョン率の関係についてディープラーニングを用いて予測しました。
このディープラーニングのシステムによる予測は、90%の正確性を誇るそうです。

結果が示す通り、サイトの表示速度は何よりも優先することの1つなのです。

表示速度が遅くなる原因

1.データが重い
表示させるページの情報が多かったり、取得する元のデータが多い(ECで言うなら顧客数や商品数が多い)と表示速度は遅くなります。とりわけ画像データが大きかったり多いと表示速度への影響が大きいです。

2.機能が重い
サイトには色々な機能が備わっています。例えばプラグインなどを使って問い合わせフォームの機能を付けたり、チャット機能を付けたりすることができます。当初は遅くなかったサイトが機能を追加するにつれて遅くなっていった場合、追加した機能(プラグイン)が重くしている可能性があります。

3.サーバーが重い
サイトを表示させるにはサーバーが必要ですが、そのサーバーの性能が不足している場合があります。サーバーにも用途によりDBサーバー・WEBサーバー・画像サーバーなど種類がありますが、どこかで性能が不足している場合サイトが重くなる可能性があります。

一般的な表示速度の改善方法

速度改善の方法をインターネットで検索すると

・表示させるデータを減らす
・表示のタイミングをズラす
・画像のキャッシュを行う(キャッシュプラグインを導入する)
・不要なプラグインを削除する
・サーバーのスペックを上げる

などの解決策がヒットしますが、実際にこれ以上削れないところまでデータを削り、画像キャッシュを行い、プラグインも外すと、後はサーバーのスペックで解決するしかなくなります。しかしこの方法ですと、問題になるたびに費用が高額になってしまいます。
また、既にハイスペックのサーバーを導入している状態で広告がヒットしたりTVでの紹介などがあると、表示事態に耐えられなくなる可能性があります。

速度を早くするプラグインも一定の効果はありますが、システムやサーバーが重い状態でその上で動いているプラグインを導入しても根本的な解決にはなりません。

システム屋が考えた根本的解決方法

今回、自社で一般的な手順でサイトを作成し、表示速度の問題をとことん分析し改善してみました。

結果として各種サーバーに導入されているシステム自体が重いことがわかり、システムの置き換えや設定を調整することで高速化ができました。
しかし、一般の方はそのシステムを構築したりサーバー設定の調整を行うことができません。

そこで、ワンクリックでAWSのサービスを組み合わせて環境を作り最適な設定に調整する仕組みを作りました。
これを使えば最短20分でWordpressの爆速環境を作ることができます。

以下のページがこの環境で作成したサイトになります。TOPページに画像を多く使い、商品をXXX万件登録したサイトです。

サンプルページ

ワンタッチで導入できる爆速環境

こちらのサンプルページをご確認いただき、興味があれば以下のサイトより導入をご検討ください。
ご不明な点がありましたら、問い合わせも受け付けております。

思ったら即行動です。速いは正義ですよ。

に投稿 コメントを残す

【デザイナーの方向け】クライアントからECの相談を受けて困ったら

デザイナーの方に質問です。

既存のクライアント様から「PV増えてきたしちょっとサイトで物売ってみたいんだけど…」と言われ

(せっかく、クライアント様から信頼してもらって相談受けたけど、ECの機能って色々複雑だからなぁ)

と思ってあきらめた経験ありませんか?

そんなお困りのデザイナー様向けに、無料でECサイトの構築・運用の相談を受けるサービスがあります。

ECサイト構築・運用 無料電話相談サービス
「ネットデウルヨ」
https://woocommerce-plugin.net/netdeuruyo/

です。

デザイナーさんはインターネットの便利屋さんだと思われている。

デザイナーの方は日々どうすればデザインが人々の心に影響を与えるかを考え、対応されているかと思いますが、
クライアント様からしてみれば

「インターネットのことなんだから、全部お願いね」

という風に思われることもあるかと思います。もちろん信頼の証だと思います。

EC機能に関しては信頼できるシステム開発の会社に依頼するのもありだと思いますが、クライアント様が「ちょっと物売ってみたい」という感覚だと、費用感などでズレてしまうことがあるかと思います。

無料で始められるWEBの既存サービスもありますが、基本的にはカスタマイズできないので、「Wordpressならある程度仕組みわかるし、デザインもやりやすいんだけどなぁ…」と思われたりもするのではないでしょうか。

ECサイトを作る上で出てくる問題点

ECサイトとなると、様々な専門知識が必要となってきます。

・顧客データなど個人情報などの、セキュリティ対策はどうすればいいか
・EC機能を付けたサイトを重くしないためにはどうしたらいいか
・決済方法のペイメント会社はどこの何を使えばいいか
・送料/決済手数料/配送方法/商品情報/顧客情報/カテゴリ/タグなどのデータ登録はどうすればいいか
ECサイト特有の表記(会員規約/セキュリティポリシー/利用規約/ご利用ガイド/よくある質問など)をどうすればいいか
在庫の表示や管理をどうすればいいか
受注管理とのデータ連携をどうするか
メルマガ機能や配信顧客管理をどうすればいいか
・EC関連の分析タグをどう設置すればいいか

などなど、サイトの設定や表示に関する部分だけでも、多くの専門知識が必要となります。
また、そのほかにも実務業務として、

・所品のピッキングや梱包をどうするか
・配送会社への引き渡しなどをどうするか
・返品/交換/修理などをどうするか
・クレーム対応をどうるか

など、考えなければならないことが多くあります。
実務業務などはデザイナーの範疇を超えている気がしますが、それでもクライアント様からすれば皆様はなんでもできる頼れる人なのです。

結論

クライアント様の要望や、デザイナーの方の経験によっても問題は違ってくるかと思います。
ネットで延々と調べたりおひとりで悩むよりかは、専門家に相談してすっきりしてしまいましょう。

ECサイト構築・運用 無料電話相談サービス
「ネットデウルヨ」
https://woocommerce-plugin.net/netdeuruyo/

長年ECサイトを作ってきたシステム会社が、無料で電話相談をしてくれます。些細な問題ならば解決方もその場で伝えてくれます。
はい、ぶっちゃけ弊社のサービスなんですが、是非とも今デザイナーさんがお困りの問題を教えてください。

弊社の持つ解決方法をまき散らしていきたいと思います。

に投稿 コメントを残す

Woocommerceのプラグインを作ってみた

今回作るのは商品一覧の初期ソートを設定するプラグインです。通販サイトで商品一覧を見る時、大抵最初はおすすめ順とかになっていますが、あれって何を基準に並べてあるのか良く分かりません。店が売りたい順なのかなと疑いながら安い順などに並べ替えることになります。

Woocommerceでも初期ソートはデフォルト表示になっています。これは、商品登録をする際に高度な設定で表示順番を登録することができ、それを反映した並び順なのですが、お客さんにはなんのことやらさっぱりです。安い順や人気順、あるいは平均評価順など、お客さんにとって意味が分かりやすい順で並べたほうが使い勝手の良いサイトになるでしょう。

実のところ、この初期ソート自体は、追加のプラグインを入れなくても変更できます。外観のカスタマイズからWoocommerce > 商品カタログで、デフォルトの商品順を設定できます。そこで今回作るプラグインでは、商品詳細ページ、カートページ、マイアカウントページ、支払いページ、そしてその他のページそれぞれから飛んできた時の表示順を設定できるようにします。

まずは開発環境を整えます。XAMPPを使います。そこへWordPressを入れてWoocommerceを入れる訳ですが、先にWoocommerceがどのWordPressのバージョンまで対応しているか確認します。うかつに最新版のWordPressに飛びつくとやり直すはめになります(経験済み)。それから、php.iniを開いてmax_execution_timeに-1を設定しておきます。最初は30になっているので時間が足りずWoocommerceがインストールできない可能性があります(経験済み)。

環境が整ったらいよいよ作成です。プラグインと言っても基本はただのPHPです。先頭に規定のコメントを書くとプラグインとして認識されます。

バックエンドの作成にはadmin_menuのアクションフックを使いadd_menu_page()で呼び出す関数でページを表示させます。今回のプラグインでは、商品一覧へ辿り着くリファラ毎に、表示順のセレクトボックスが並ぶ画面にします。表示順のセレクトボックスはどこで設定されているのでしょうか?

見つけました。woocommerce/includes/wc-template-functions.phpのwoocommerce_catalog_ordering()で設定されています。それをそのまま持ってきます。submitボタンを付け、update_option()で設定の更新、get_option()で設定を取得できるようにして、描写の際に反映させればバックエンドの基本の動きは完成です。

リファラの情報も取得する必要があります。商品詳細以外はwp_postsテーブルにあります。そこへデフォルトと商品詳細の情報を合わせ、その数だけセレクトボックスを出します。デザインも整えたいところですが、後回しです。

次は設定をフロントエンドへ反映させる処理です。商品一覧を表示させるタイミングで、セレクトボックスのselectedを変更できれば良いはずなのですが……。

商品一覧で表示順のセレクトボックスを出すテンプレートがwoocommerce/templates/loop/orderby.phpであることは分かりました。そしてそこへ値を渡しているのは前述のwoocommerce_catalog_ordering()です。

woocommerce_catalog_ordering()が値を渡した後、セレクトボックスが描写される前に割り込めれば良いのですが、値を渡す時点で描写も完了してしまうようです。試しに値を渡すために使われてるwc_get_template()を使うとセレクトボックスが二つ出来ます。この動きは求めていない。

ではwoocommerce_catalog_ordering()が受け取る値を変えるしかありません。引数はないので、内部で取得している値、すなわちwoocommerce_default_catalog_orderbyです。

これは、前述の外観のカスタマイズからの設定を収めている場所です。これをwoocommerce_catalog_ordering()が呼び出される毎に、先んじて変えてやれば、こちらの設定を優先させることができます。

woocommerce_catalog_ordering()はwoocommerce_before_shop_loopのフックで呼び出されていますが、優先順位は低いです。そこで同じフックにこちらのフロントエンド用関数を登録します。そして設定した値を取得し、その中からリファラに合わせた値を選び、それをwoocommerce_default_catalog_orderbyへ上書きします。

さてどうだ……上手く行きました。裏では呼び出す度にDBへ書き込みが行われている訳ですが、表向きは意図どおりの動きです。この仕様はDBのパフォーマンスにはよろしくないかもしれません。しかし、まずはそのパフォーマンスが気になるほどお客さんを集めるほうが先決でしょうね。

に投稿 コメントを残す

【Woo苦労秘話】第6話Woocommerceを入れてみて~フルアーマWC~

国が変われば品変わる

Woocommerceを無事インストールし終えると、やはり感じるのが海外の自由の風です。
あなたやっぱり黒船だったのね。

ビジュアルはもちろんのこと、操作性や機能など、やはり日本の感覚とは違う部分が多々ありました。
例を少し出してみましょう。

①デフォルトのカード決済がPayPalとStripe(銀行振込なし)
デフォルトの決済だけでは日本では少し厳しい感じですが、現在では日本の決済サービス向けプラグインが出てきており改善されつつあります。それでもまだ「ずっとお付き合いのある決済会社のプラグインがない!」ということはあるかと思います。
銀振もプラグインですぐに追加可能です。

②住所を入力する際の表示形式が日本と逆(番地から入力していく)
住所入力に関する部分も、日本においてこのまま使うというのは厳しいかと思います。表示を直してくれるプラグインももちろんあります。

③登録系の機能での確認画面がない
例えばユーザー情報の登録であったり、注文完了時の「これでいいですか?」的な確認画面が一切ありません。これはむしろメリットに働くかとも思います。

④メールとパスワードだけで会員登録完了
こちらも独特です。日本のサイトでの会員情報は、名前に始まり、住所、電話番号、場合によっては会社名や性別などなど。必須項目のオンパレードです。Wooのデフォルト項目はメールアドレスとパスワードのみ。すぐに会員の機能が利用可能になります。まぁ後で登録してもらうんですけども

少し触っただけでも、なるほど色々とお国の違いが見てとれました。

趣のある居酒屋「Woo」

上記で述べたちょっとした違和感を解消するために、色々とプラグインを調べておりました。
そうするとですね。ザクザク出るんですね。色々な洋物プラグインが(なんか卑猥だな)

Woocommerce用のものもあれば、Wordpress用のものでも使えたりします。
それこそ重箱の隅というか、ニッチというか、誰が使うのよ…というか。
一芸プラグイン達が日の目を見るのを今か今かとまっているのです。それこそお笑い芸人のように。

User:「複数店舗したいな。でもそんな大掛かりなプラグインがあるわけ…」

Woo:「…あるよ」

User:「今はやりのLINE Payなんかは流石に…」

Woo:「…あるよ」

User:「メンテナンス中ですってただ出したいだけなんだけども…」

Woo:「…あるよ」

愛想のないどこかの居酒屋の大将のように応えてくれるわけです。
このWooの大将、どんな注文しても何かしらプラグインを出してくれるので、調子乗ってあれもこれもプラグインで追加注文しちゃったわけです。

もうベロベロです。冷静な判断ができなくなります。

プラグインでゴテゴテに武装した最大火力のフルアーマWoocommerce。
この後、Woocommerceを触り始めてから最大の危機を迎えることになります。

その話は大事な話なので、次回にゆっくりと。

に投稿 コメントを残す

【Woocommerce開発秘話】Woocommerceのインストール ~仏と仏~【第5話】

やっとこせWoocommerce

そんなこんなでやっとこせWoocommerceのインストールになります。
プラグイン(拡張機能)の基本的な導入方法は以下の手順になります。

①wordpressの「プラグイン」から検索
②インストールボタンクリックでインストール
③有効化ボタンクリックで有効化

この3ステップ。場合によっては設定も必要だけども、
基本的にはこの方法でどんなプラグインもインストールできます。

志村動物園のパン君ぐらいなら、できてしまいそうなレベル。
これなら誰でもできますよね?というわけで方法は割愛。

嘘ですって。わかってますって。
もちろんちゃーんと、Woocommeceのインストール方法の詳細ページも作りますってば。
はい、予定地。どーん。

Woocommecのインストール方法

当たり前ですが、クリックしても何もおきません。ひっかかったな。小童が!
(またwordpressのインストール方法同様。作りこみます。お待ちを)
↑このリンクもダミーです。またしてもひっかかったな。小童が!

入れたら驚いた

昔、故丹波哲郎さんの「死んだら驚いた」っていう番組タイトルが、子供心ながらにものすごく印象に残っているのですが、それこそ「(Woocommec)入れたら驚いた」です。

プログラマー時代にフルスクラッチECで一生懸命作った機能が、それこそ一瞬でてできていました。
AjaxやJavaScriptなどもゴリゴリに使われているので、その当時よりも動きや更新処理なども洗練されています。これが無料!?なんて時代だ!

このブログの第3話で

どなたが作ったのかお顔を存じませんが、あなたのお心遣い尊敬いたします。
ありがたく使わせていただきます。本当にお地蔵様でした。

とかいっちゃったけど、お地蔵様どころか、仏までいっちゃってますよ。
なんでこれ無料で公開しちゃうのよ。こっちが職失って仏になっちゃうよ(不謹慎)

当たり前ですが、ECで必要な3大要素
商品画面・注文画面・顧客画面が、追加されています。
お客様が見るフロントはもちろん、管理側も一気に画面が追加されて注文や商品情報などが管理できるようになってます。それ以外のEC要素もモリモリと。

本当に「ただ通販ショップ始めたいだけ」でいいならば、もうこれでできちゃいます。
あ、もう一個予定地作っておこう。

最速・最安値でECショップを始める方法

うん。PVが伸びそうなタイトルだ。あ、「最速」とか「最安値」の断定はまずいのかな。

最速?・最安値?でECショップを始める方法

法的拘束力の緩和に成功しました。同時に意味もメチャクチャ伝わりにくくなりました。
まぁちょっと他と違うくらいの題名の方が、目を引くってもんですよね。もちろんクリックしても無駄ですよ。また作りこみます。

ちなみに故丹波哲郎さんの「死んだら驚いた」の番組内容は、びっくりするくらい覚えておりませんでした。

に投稿 コメントを残す

【Woocommerce開発秘話】wordpressを入れました ~自分不器用ですから~【第4話】

wordpressの環境構築

そんなわけで、wordpressをインストールする環境を構築します。

サーバーはAWSで、バランシングとオートスケールを入れて、SSLの証明書もAWSの無料のものを使いました。RDSでMYSQLも立ててます。AWSのElasticBeanstalkを使うと環境が一括でできて便利です。
(当ブログはゴリゴリのエンジニアを対象としております。)

とはいえとはいえ、上の説明じゃわからない人にもWordpressやWoocommerceへの興味は持ってもらいたいので、ちゃんと丁寧に説明するページ作ります。約束です。

ほら、リンク予定地作っておきます。(色と下線つけてそれっぽくしとこう。うひひ)

wordpressの環境構築方法

クリックしても何もおきません。
いつの日かちゃんとページ作ってリンクしておきます。いつの日か。

wordpressを入れよう

wordpressをいれるわけですが、やはり最近のシステムはよくできています。
DBやPHPなどの準備は最初に必要ではありますが、環境が整えばそれこそボタン一つで…

すぽーん!

wordpressが入りました。それこそ一瞬です。
DBにもテーブルなどが自動で構築されています。そりゃ流行るわけです。
これが無料ですもんね(wordpressはオープンソースという誰でも改造ができるようにソースが公開されています)

こういう高機能で無料のものを見るたびに、自分の器の小ささを痛感します。

どなたが作ったのかお顔を存じませんが、あなたのお心遣い尊敬いたします。
ありがたく使わせていただきます。本当にお地蔵様でした。

 
 

管理画面使いづれー!
 

なんだこのアメリカンな自由感は。ダッシュボード一つとっても、コンテンツが付箋みたいに自由に場所変えてペチョれるし。なんかお洒落な感じが鼻につく。

いきなり始めてみようってとこに「サイトをカスタマイズ」ってあるし。
あなたは買った家をいきなりリフォームすすめるんですか。ああそうですか。欧米ですか。

いきなりこんな一杯情報与えられてもわかりません。
自分不器用ですから。(感想には個人差があります)

使いづらいと思いきや・・・

最初自由すぎて、やめたくなりましたがひとまず触ってみます。
wordpressは基本ブログを投稿するシステムですので情報を発信してみます。

投稿メニューから新規登録を選択します。ぽち。

「お、こいつ…動くぞ」(あたりまえです)

ちょっと触ってみてわかりました。日本のサービスにはない感覚。
言葉では言い表しにくいんですが、直観的なんですね。形式から入らないというか、真理重視。

ここにあったほうがいいから付けました。的な。
この方がわかりやすいからそうしました。的な。
腹が減ったからハンバーガー食べました。的な。

例えば、ブログにカテゴリをつけられるんですが、始めてブログを書くときに気づくんですね。あ、カテゴリ登録してないと。

そうすると、カテゴリマスタも別であるんですけども、もうそこのブログのとこから「新しいカテゴリを追加」ってボタンがあって追加できてしまうんです。そこにあることが当たり前かのように。

マスタ登録画面に移行するんじゃなくて、ブログから登録できてしまう。
この機能一つとっても、あ、こいつはやべぇなと。

ポロリ(目から鱗)

やっぱり私のブログもどんな人にでも見てもらえるように書いていきたいと思います。
はぁ。今日もWoocommerceにたどりつかなかったなぁ。

に投稿 コメントを残す

【Woocommerce開発秘話】Woocommerceって何?【第3話】

私、横山は頑固です。

一度決めたことはめったに変えないし、何事にも頭で理解して納得しないと前に進めない人間です。
そこで早速自分でWoocommeceを1から設定してみました。

Woocommeceとは?

WoocommeceとはWordpressというCMSシステムのECプラグインです

あ、説明のつもりが英語やカタカナの言葉が並んでわかりにくくなってしまったので、もう少し丁寧に説明しますね。
当ブログは下は3歳から上は117歳まで想定して優しいブログを目指しています

WordPressとはコンピュータ上で動くソフトウェアです。
主にブログ(日記)をインターネット上に公開する機能を持ったソフトですが、
CMSと言われる「コンテンツ管理システム」の機能を持っています。

コンテンツ管理システムとは、インターネット上に公開される画面の
文字や写真や動画など(これらをコンテンツと呼ぶ)を管理画面から登録したり削除したりできるシステムを指します。

昔はインターネットに公開される画面(サイト)は、専門的な知識が必要でしたが
このCMSが普及することにより、知識のない方でも簡単に写真や装飾がほどこされた
サイトを公開することが可能になりました。

プラグインとは、機能を拡張するために追加するプログラムの一種です。
今回はWordpressがベースのシステムになり、そこにEC機能を追加するプログラムがWoocommeceということになります。

丁寧に説明するとこんな感じになります(ありがとうWikipedia)

Woocommeceの前にwordpress

先ほどの説明でWoocommeceを使う前に先にベースのシステムとなるwordpressが必要ということがご理解いただけたかと思います。
まずはWordpressを設定してみました。

設定の仕方はまた別の記事で書きたいと思います。
さっそくwordpressを設定しようとした時、そこで襲い掛かる数々の疑問。

サーバーどうすんの?
セキュリティの設定は?
バランシングはいれるの?
オートスケールは?
DBは別サーバー?

きー!!!
もうカタカナばっか。こんなのわかりやすく説明なんでできない。

お知らせ

当ブログは18歳から50歳ぐらいまでのゴリゴリのエンジニアをターゲットに進めていきたいと思います

に投稿 コメントを残す

【Woocommerce開発秘話】Woocommerceとの出会い ~天狗から豚~【第2話】

恋はいつでもハリケーン。

ことの始まりは、とあるECショップ様から1つの相談をいただいたことでした。

「カートシステムを変えたいが、1アイテムにSKU※が500以上ある商品に対応しているカートがない」
(※SKUとは1つの商品に対するカラーやサイズなどのバリエーションのことです)

500ときた。そりゃ大変。

早速社内で調査してみたところ、スーパーSEのT君が、1つのシステムを見つけてきました。

それがWoocommerceとの出会いでした。

第一印象から決めて…ませんでしたー!

T君が持ってきたツールは、WoocommerceといわれるWordpressのECプラグインでした。

その時Wordpressといえば「ブログシステム」の印象が強かったので、

(へー、今ではブログにEC機能がくっついちゃうのね。普通逆じゃない?そんなんで大丈夫?EC奥が深いよ?)

とか、なんとか思ってました。
といいますのも、それまでに私はECサイトをフルスクラッチでを作っている企業様での開発を行ったことがあったからです。

折れた鼻

それまでに行ってきた開発で、ECサイトを開発することは大変であると知っていました。
また機能やデザインを差別化しようとするほど、時間とお金が莫大にかかることも知っていました。

「ECがメイン機能ですらないシステムに何ができる。小童が。」

正直、それまでの経験から見下してました。調子乗って天狗になってたんだと思います。

T君が片言で(T君はベトナムの優秀なエンジニア)

「コンナこともデキマス」
「コンナ機能もアリマス」
「ア、ソレもデキマス」

と説明してくれるたびに私の伸び切った鼻はポキポキ折れていき、最終的に豚みたいになってました。

こ、こいつはすげぇブー。

そこから始まるストーリー

Woocommerceとの関係はこんな感じで始まりました。

第一印象・第二印象と色々な顔を見せてくれたWoocommerceでしたが、
この時はまだあんなことが起こるとは私は知る由もなかったのです…(ベタベタ)

に投稿 コメントを残す

【Woocommerce開発秘話】Woocommerce開発秘話。その前に…。【第1話】

はじめまして。横山と申します。あなたはどなたでしょうか?
約12年、エンジニアをやっております。

今日から「Woocommerce開発物語」と題してブログを発信していきたいと思います。

私が所属している会社では、現在もWordpressにEC機能を追加できる「Woocommerce」のカスタマイズ開発を行っておりますが、今までにも大変な苦労がありました。

忘備録ではないですが、こんなことあったな。苦労したな。でもできたな。よかったな。やっぱりすごいな。
ってことを、記録として残していきたいと思います。

最初なので固い口調で書いておりますが、
基本的に不真面目ですので面白おかしく書いていければと思っております。

この記録が誰かの役に立つことを祈って。