ブログ @ デジドリ

ウェブサイトを制作する上で色決めってかなり重要ですよね！！

ロゴで使われている色をメインカラー　サブカラーで使う事が多いのですが、
そういう事が出来ない時　または指し色が見つからない時は私は
このサイトを使っているのですが

けどやっぱりこれだ！って思う色が全然決まらず結局悩んでしまうんですよね！
デザインの勉強もっとしないといけないと思いました！！

デジタルドリームワークスから比嘉です。
さっとネットサーフィンしていたら興味深い記事が海外SEO情報ブログさんにあったのでメモ…

Google社員がアドバイスする2016年取り組むべきSEOの秘訣
https://www.suzukikenichi.com/blog/seo-tips-for-2016/

この記事に出てくる「AMP」です。

—–

AMPは、Accelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）の略で、モバイル端末でのウェブページの表示を高速化するためのプロジェクト。
GoogleとTwitterが協同して策定したプロジェクトで、その他30社ほどがパートナーとして参加しているとのこと。
モバイルではページの読み込みなどに時間がかかることが多いですが、それを最適化ようという試みのようです。
—–

AMPの実装は、AMP HTML フレームワークに沿ってマークアップしていきます。
AMPの仕様が公開されています。
https://github.com/ampproject/amphtml

主な特徴としては、
・HTML＋CSSが基本だけれど、独自の書き方やHTML要素やCSSセレクタの一部に制限
・JavaScriptは使わず、AMPから提供されるものを使用

ページ表示の高速化がされることと、実装しているページはモバイル検索でピックアップしてくれるようです。

デモ（モバイルでアクセス）
https://www.google.com/webhp?esrch=AcceleratedMobilePages::Preview,AcceleratedMobilePagesDesktop::Promo&gws_rd=cr&ei=PnkVVvONIaeomgXh4ouACg&hl=en&pws=0&gl=US

———

———

高速化されるのはすごく良いことだと思いましたが、気になる点もあります。
特にサーバーのキャッシュを利用して高速化するようなので、「実際のページアクセスは残らない」という点。
アクセス解析などはどうなるのか。今後の動向に注目したいところです。

個人的な考えですが、
本体サイトとAMP実装ページは別物として分けて制作。
AMP実装ページから本体サイトに誘導する流れをとっていくのかな。と思ったりもしています。

今年、モバイルフレンドリーの対応がすごい勢いでされてきました。
弊社でもレスポンシブデザインを取り入れ、モバイル対応のサイトを制作してきました。
AMPは新しいモバイル技術として普及するのか。そうなる前にもう少し深く勉強していきます。
情報違いやその他ありましたら、ぜひコメントください！

WoocommerceのSingle-product.php の中身の変更。

フォルダ内部のhookを確認して、do_action()の中身を調べて
その関連してるファイルを書き換えて行く事で自分の見た目を効かせたレイアウトを作る事が出来ます。

結構な数のファイルに分かれてますが
色々な部分を簡単に変更できるようにかも？？

時間がある時に一枚で出来る用に作ってみようと思います。

WooCommerce 支払い方法 追加（その2）

さて、「WooCommerce 支払い方法 追加（その1）」の続編です。
前回のプラグイン構造では複数の支払い方法追加がある場合は、支払い方法 毎にプラグインを作成、有効化していかないといけませんでした。
かなり非効率ですし、プラグイン数が多くなるのは好きじゃないので、今回はその部分の改良版のメモとなります。
前回作成した支払い方法追加のクラスはほぼそのまま使えます。

構造は以下のようなイメージになります。

woocommerce-higa-pack（フォルダ）
-woocommerce-higa-pack.php
-i18n（フォルダ）
–languages（フォルダ）
-includes（フォルダ）
–class-wc-dependencies.php
–gateways（フォルダ）
—class-wc-gateway-basic-bank-transfer.php
—class-wc-gateway-store.php

ファイル構造はWooCommerce本体を参考にしました。
いくつかのコードをメモ…

プラグインメインファイル
woocommerce-higa-pack.php

● 依存関係に対応

WooCommerceの拡張プラグイン 「woocommerce-gateway-amazon-payments-advanced」よりclass-wc-dependencies.phpを丸ごともってきました。
このプラグインはWooCommerceが無いと意味がないプラグインです。上記ファイルを利用する事でWooCommerceの有無をチェック出来ます。

function is_woocommerce_active() {
…
}

※ 無い場合は注意文章を管理画面内に表示
function wc_higa_pack_notice() {
…
}

● 複数支払い方法を追加

メインのプラグインファイルから支払い方法追加の部分を切り離して保存することで複数の支払い方法クラスを読み込みします。

private function _includes() {
include_once( plugin_dir_path( __FILE__ ) . ‘includes/gateways/class-wc-gateway-store.php’ );
include_once( plugin_dir_path( __FILE__ ) . ‘includes/gateways/class-wc-gateway-basic-bank-transfer.php’ );
}

各支払い方法のクラスファイル

切り離した支払い方法のクラスファイルは前回のものに少し手を加えるだけで流用出来ました。

1. アクションフックの削除とその関数を外す

削除
add_action( ‘plugins_loaded’, ‘your_payment_function);

関数からクラス部分を取り出して残す
class WC_Gateway_Basic_Bank_Transfer_Higa_Pack extends WC_Payment_Gateway {
…
}

2. 言語ファイル 指定部分はプラグインメインファイルで指定しているので削除

という感じです。
少し説明が難しく、長くなりましたが、とりあえず支払い方法追加の検証は終了…
どうにかなりそうです。

コードについて、間違っているところや別の方法などがあるという方は、ぜひコメントいただければと思います。

PS:今回でオブジェクト指向の勉強が必要と感じました。 汗…　再勉強中!!!

Seiyaです。
Wordpressの使い方を勉強中なのですが、あんまり触った事のないと言う事と表面の部分しかわからなかった事もあり現在苦戦中です。

WordPressには元からこの時はこのファイルを読み込み　出来ない場合はこう記述するとこっち側のファイルが読み込まれるとがあるらしく、使い方が全然わからなかったのですが社員の方にわからなくなったら助けてもらって現在覚えてきてる段階です。

メモ

Index トップ
Archive　記事一覧
Single　記事詳細
Content　パーツ
Header　骨組み　上
Footer　骨組み　下
Sidebar　骨組み　ナビ
４０４　エラー
Function　プログラム

困った時にすごい役立ちます。

Apple TVのアプリ開発を勉強したく、ここのサイトからソースコードを入手して、画像を入れ変えて、動画をテストサイトにアップし、簡単なデモアプリを制作しました。
店舗写真の一覧が表示されて、選択すると動画が再生されるアプリです。

MacBook Proを起動すると、起動の途中で電源が落ちる症状になり、
commandキー + v を押しながら、起動するとunixのように読み込みファイルなどがいろいろ表示されます。
それでも表示されている最後のメッセージが確認できないのでiPhoneで動画を取り、メッセージを確認することになりました。

ハードディスクに障害がでているようなので、このMacBookをターゲットモードで外付けディスクで立ち上げ、ディスクユーティリティで修復したり、アクセス権を修復したりで回復することができました。

Macを使用している皆さんは、Time Machineでバックアップを行いましょう。

これを一度は、やってみかったです。

iMac 21インチ Late 2009のハードディスクを交換してみました。所要時間は1時間で交換作業は終わりました。磁石だけでパネルが付けてあるのが、面白いけど、ネジを付けるときは磁石が邪魔をして、難しかったです。

AWS（Amazon Web Services）S3（Simple Storage Service）は、アマゾンが提供しているクラウドストレージサービスです。通販サイトで有名なアマゾンですが、クラウドサービスでアマゾンは抜きん出ています。アマゾンマネージメントコンソールでアクセスするとたくさんのメニューがあります。

AWSには、いろいろなサービスがありますが、主にE2（仮想サーバー）、S3、RDS（データベース）などは使用頻度が多いサービスかと思います。

そのうちのひとつである、S3を使用して、Windows Serverのファイルメーカーのデータを毎日6時に自動的にAWS S3にバックアップしています。比較的にS3の設定は簡単でしたが、Windows Serverのファイルを自動的にS3にバックアップするソフトがなくて、苦労しましたが、今回はこれがベストだと思い、GoodSyncで自動的にS3にバックアップしています。

デジタルドリームワークスから比嘉です。
先日に前置きで投稿しましたWooCommerce 支払い方法の追加について、プラグインを作る形で支払い方法を追加する必要があると説明しました。
それではさっそくプラグインを作成していきます。

プラグイン作成の作法はWordpress Codexを確認して下さい。
https://wpdocs.osdn.jp/プラグインの作成

またWooCommerceの支払い方法の追加についての詳細は公式ドキュメントから確認出来ます。
https://docs.woothemes.com/document/payment-gateway-api/

それでは実際に作成したコードが以下となります。
公式ドキュメントといくつかのプラグインを参考にさせていただきました！

※コードが画像のため見えにくいです。拡大して確認下さい。

さていくつかコードのメモを…

● 17行目 プラグインのアクション

公式ドキュメントを参考にプラグインが読み込まれたら、クラスを実行するコードを記述。

add_action( ‘plugins_loaded’, ‘init_your_gateway_class’);

ーーーーー

● 26行目〜48行目 コンストラクタ

クラスからオブジェクト作成れた際に自動で実行される部分です。
WooCommerceに必要な変数やメソッドが記述されています。

init_form_fields();
※支払い方法の設定ページで設定する項目が定義されています。

$this->init_settings();
※設定を読み込み

add_action( ‘woocommerce_update_options_payment_gateways_’ . $this->id, array( $this, ‘process_admin_options’ ) );
※支払い方法の設定を更新した際に保存する処理

add_action( ‘woocommerce_thankyou_basicbanktransfer’, array( $this, ‘thankyou_page’ ) );
※注文完了ページで支払い方法別の文章を追加

add_action( ‘woocommerce_email_before_order_table’, array( $this, ‘email_instructions’ ), 10, 3 );
※注文が完了した後に送信されるメールにも支払い方法別の文章を追加

と続きます。

また

ーーーーー

● 111行目〜129行目 注文処理の関連

注文が合った場合のプロセス状態を設定したり、在庫更新、カートを空にしたりする処理。

ーーーーー

● 133行目〜138行目 支払い方法の登録

そして最後にWooCommerceへ支払い方法の登録を行います。

以上が大まかな解説!?メモです。

終わりに…

今回のコードでは1つのプラグインで1つの支払い方法しか追加出来ていません。
2つ、3つとある場合はプラグインを増やしていかなくてはいけないですね。（なんて非効率的…）
またWooCommerceがインストールされていない状況での処理なども記述していません。
そこらへんを改良する必要がありますね。
とりあえずベースのコードは出来ましたので次回より改良していきたいと思います。

またこのコード間違っているよ。
別の方法やコードの記述例などがあればぜひコメントいただきたいです。
よろしくお願い致します。 m(_ _)m