沖縄でApple Pay(アップルペイ)

applepay

待ちに待った10月25日からApple Payが使用できるようになりました。iPhone7やApple Watch Series 2で電子マネー(QUICPay、iD、Suica)で支払ができます。

applepay

ここ沖縄では、電車がありませんので、改札口でのiPhone7(Suica)は使用できませんが、本土に行ったときに挑戦したいと思います。今からドキドキします。

1.iOS10.1にアップデートする。

2.Apple Payで使用できるクレジットカードをWalletアプリに登録する。

自分は、Mastercardカードを登録しました。Mastercardカードでは、QUICPayしかできないために、iDを使用するなら三井住友カード(Amazon Mastercardクラシック)を新たに入会予定です。

applepay

3.Suicaアプリをダウンロードして、Suicaを使用できるようにする。

Suicaアプリで登録したMastercardカードで入金する。

applepay

会社の近くのファミリーマートでコーヒーと水を購入し、支払をApple Pay(QUICPay)で行いました。財布から小銭を出す必要がなく、便利です。

WooCommerceの基本 商品登録(バリエーションのある商品)編

デジタルドリームワークスからHigaです。
さてWordPress WooCommerceの商品登録を引き続きすすめてきます。
今回は商品登録編の最後、「バリエーションのある商品」です。

バリエーションのある商品とは…
実際にECショップを運営するとサイズやカラーで料金が違う商品が出来ています。
そんな商品を登録する際に利用します。

さっそく見ていきましょう!

161028-pict01

商品登録画面を確認します。
「バリエーションのある商品」を選択すると、設定項目が表示されます。
こちらもほとんど基本的な商品の登録項目と同じですね。

● 一般
● 在庫
● 送料
● リンクされている商品
● 属性
● バリエーション
● 高度

ポイント
今まで「一般」の項目にあった、標準価格、セール価格が表示されません。
「バリエーション」の項目によって登録していきます。
その他、バリエーションの設定項目が増えています。

説明では難しい部分もあるので、実際に登録を進めながら流れを抑えていきましょう。

 

カラーごとに料金が違う商品の登録

 

161028-pict02

初めに属性の登録をしましょう

左の「属性」から登録を行います。
今回は「商品カラー」で登録しました。

161028-pict03

次に商品カラーの「赤」「青」「黒」項目を登録していきます。
これで属性登録は完了です。

 

商品登録を進めていきます

タイトルや説明などの基本的な部分を入力し終えたら、バリエーションのある商品の設定項目です。

161028-pict04

「属性」項目をクリック

カスタム商品属性の選択部分から先ほど登録した「商品カラー」を選択して追加

161028-pict05

商品カラーのどの項目を入れるか選択します。すべてを選択をクリックすれば、登録したすべての色が設定されます。
もちろん商品によって、「黒」は無しとか、「赤」は無しの設定も出来ます。
今回は全ての色を選択、
バリエーションのために使用にチェックをいれて属性を保存

次に「バリエーション」の設定項目です。

161028-pict06

追加バリエーションのセレクトボックスから「すべての属性からバリエーションを作る」を選択して表示
確認ウィンドウが出ますのでOKで続けます。
するとそれぞれの属性で登録出来る項目が表示されました。

161028-pict07

161028-pict08

設定内容は他の商品登録と同じ内容なので省きます。
登録が完了したら、一覧ページ、詳細ページを見てみましょう。

一覧

161028-pict09

詳細

161028-pict10

属性は複数可能です。
カラー×サイズでの登録も可能です。登録数が多いと大変ですね 笑

●サイズとカラーをバリエーション登録した場合…

161028-pict11

161028-pict12

161028-pict13

とういうことでざっと商品登録を見ていきました。
今回はカラーごとに料金が違う商品の登録を想定して説明しましたが、
料金が同じでもカラーを選択して注文やサイズを選択して注文等、利用シーンは多くあると思います。

さて説明不足の部分もありますが、実際に触ってみて慣れることが一番です。
色々試してみたいと思います。

次回はWooCommerceの配送設定について確認していきたいと思います。
WooCommerce2.6系になり配送部分は大きく変わっています。楽しみです。
それでは!

Slick js 上下の連動表示

slick.js

slick メモ

スリックの使い方は前回の記事に描いたので今回は使い方の一部をメモします。
Slider Syncingの使い方

スクリーンショット 2016-10-26 18.13.02

 

この↑のjsの組み込み方です。

js記述はサイトの方にある書き方でおkです。

$(‘.slider-for).slick({

slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ‘.slider-nav

});

$(‘.slider-nav).slick({
 slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ‘.slider-for,
dots: true,
centerMode: true,
focusOnSelect: true
});

.slider-forは.slider-navのdivと連携しているのでhtmlの書き方も普通に使う時とはちょっとだけ変わっています。

<div class=”slider-for”>

<div>画像</div>
<div>画像</div>
<div>画像</div>
<div>画像</div>

</div>

<div class=”slider-nav”>

<div>画像</div>
<div>画像</div>
<div>画像</div>
<div>画像</div>

</div>

こんな感じに記述します。そうすると両方連携してて変えた方に両方変更するようになります。
Slickの値もほぼ使えるかと思うのでちょっと自分でアレンジする事も出来るのでいい感じに使えるのでオススメです!

FileMaker(ファイルメーカー)でTo Do管理を作る

FIlemaker todo

Macのアプリやブラウザで起動するTo Doアプリをいろいろ試してみましたが、自分好みのものは、なくてそれでFilemakerで制作しました。

制作する上でのポイント

1.できるだけシンプルにする

2.MacBook Pro15インチの画面でわかるようにする

3.To Do管理からタスク管理へのバージョンアップする

Filemaker todo

WooCommerceの基本 商品登録(外部/アフェリエイト商品)編

デジタルドリームワークスからHigaです。
さてWooCommerceの基本 商品登録の続きを進めていきます。
今回は「外部/アフェリエイト商品」の登録です。

 

161021-pict01

 

外部/アフェリエイト商品タイプの登録項目は以下となります。

・一般
・在庫
・リンクされている商品
・属性
・高度

前回同様、「一般」以外は以前に投稿している基本的な商品と同じなので説明を省きます。
それでは「一般」の設定項目を確認してきます。
基本的な入力項目は他の商品タイプと変わりませんが、「商品 URL」の項目と「ボタンテキスト」が表示されています。

● 商品URL
● ボタンテキスト
● 標準価格
● セール価格
● 税状況
● 税区分

ポイント
「商品URL」にリンク先を登録。「ボタンテキスト」にテキストを入れます。

 

さて登録が終わったら一覧、商品ページを確認してみましょう。

●商品一覧ページ

161021-pict02

● 商品詳細ページ

161021-pict03

少し分かりにくいですが、ボタンテキスト部分をクリックすると登録した商品URL先へ飛びます。
商品名や商品画像をクリックすると商品詳細ページが表示されます。

 

ということで外部/アフェリエイト商品の登録でした。
外部の商品ページに飛ばすという機能がメインの商品タイプで、利用場面が見つからないと感じました。
追々この項目は削除する方法を確認したいと思います。笑

 

WooCommerce利用者の方でこういう場面で便利ですよなどご意見があれば、ぜひコメントいただけると嬉しいです。
次回、利用シーンが多いと思われるバリエーションのある登録です。
それでは!

制作の際に便利なボタンエフェクトCSSプラグイン

css3-1

Web制作するときにボタンを作る際に簡単にボタンに効果をつけたり動きをつけることがありますよね??

その際便利なプラグインがあります。

Hover.cssというプラグインがあって、海外の方が制作したすごーーーく便利なプラグインです。

sassでも作られてるファイルがあって、css sass どっちでも使う事が出来ます。

デモサイト

↑上から飛ぶとどんな種類の効果があるのか調べる事が出来ます。

使い方もファイルをダウンロードしてきて、いつも通り読み込ませるだけ!

あとは、それぞれのクラスをふるだけで様々な見た目に変える事が出来ます。

ちょっとこのクラスは惜しい!ちょっと変えたい!って時でもファイルの中身の箇所を修正するだけですぐにちょびっと変える事が出来ます!

このファイルの便利なところはすべてCSSで記述されてるので簡単にちょっと変更を加えたり扱う事が出来る!

jsなどの場合はちょっと難しかったりエラー起きたら大変ですよね?

かなりオススメです!

SAPは、シンプル・イノベーター

sap

本のタイトルは、「SAP 会社を、社会を、世界を変えるシンプル・イノベーター」です。まだ、10ページくらいしか読みんでいませんが、紹介したいと思います。

SAPはSystemanalyse und Programmentwicklung(「システム分析とプログラム開発」の意味のドイツ語)という社名で、1972年にIBMドイツ法人を退社した5人のエンジニアによって創業されました。主にビジネス向けソフトウェアの開発を手掛ける大手ソフトウェア企業であり、売上高ではマイクロソフト、オラクル、IBMに続いて世界第4位であります。

SAPは。大企業向けのERPパッケージソフトウェアを開発して販売しています。このERPのシステムがすごいらしく大手大企業がこのソフトウェアを採用しているみたいです。それからこの本で知ったのですが、サッカーワールドカップ2014でドイツ代表を優勝に導いたツールだそうです。

本の中で「複雑なビジネス、複雑なITをシンプルにする」という文があります、このあたりはAppleと似ていると思いました。

SAP、Appleとの提携を発表。iOSをエンタープライズに拡大

いつかは、さわってみたいソフトウェアですので、そのためにもこの本を読んで勉強したいと考えています。

WooCommerceの基本 商品登録(グループ化された商品)編

デジタルドリームワークスからHigaです。

さて先週に引き続きWooCommerceの基本 商品登録を確認していきます。
今回はタイトルの通り、グループ化された商品です。

 

161013-pict01

 

基本的な商品に比べて設定項目が少ないですね。

・在庫
・リンクされている商品
・属性
・高度

各項目は基本的な商品と同じなので説明を省きます。
またグループ化された商品には料金についての項目やグループ化する商品についての設定項目もありません。
グループ化された商品を登録しても以下の様になるだけです。

 

● 商品一覧ページの見た目

161013-pict03

 

● 商品詳細ページの見た目

161013-pict04

 

ではどこで行うのか…

 

実はグループ化する各商品側でおこないます。
それではグループ化する個々の商品を登録します。
基本的な商品タイプで登録…
重要なのは「リンクされている商品」->「グループ分け」の項目です。
前回、機能が確認出来なかった部分ですね 笑

 

161013-pict05

 

グループ化された商品を登録すると、ここで選択出来る様になります。
他の項目も入力して公開します。今回は3つの商品を登録して確認。

 

● 商品一覧ページの見た目

161013-pict06

 

● 商品詳細ページの見た目

161013-pict07

さてこのようにまとめて購入する必要がある商品の登録には便利ですね。
グループ化された各商品は個別にも購入出来ます。

さて少し実践的な考えをしていきましょう。
まとめて購入する場合は、各商品が安くなる場合が多くあります。
その場合には、商品一覧ページや検索ページには非表示にすることも出来ます。

商品登録の際には右枠にある「公開」項目の「カタログの見え方」から「不明」を選択します。
ちょっと日本語訳がおかしいですね 笑

 

161013-pict08

 

すると一覧ページや検索ページで非表示となります。
個別に購入する場合より、まとめて購入の場合は安くする設定が出来きますね。

 

161013-pict09

 

ここで1点注意です。
この設定は実は完璧ではありませんでした。
一覧や検索には表示されないですが、商品のページは存在しており購入も可能です。
商品詳細のURLを知っている人や何らかのアクセスからページにアクセス出来た場合、まとめて購入しなくても安く購入出来る可能性があります。
まとめて購入の場合に各商品を安くする場合は、プログラムのカスタマイズが必要かもしれません。

 

ということでグループ化された商品の登録を勉強しました。
まとめての値段設定は行えないので、場合によっては扱いづらいかもしれません。
なかなか時間がかかりますね。これからはペースを上げて勉強していきます。

Windows 10 のアップグレードの際にネットに繋がらなくなった場合

windows10

windows10にアップデートした際にインターネットに繋がらなくなる場合があります。

その場合チェックすると良い方法です!

すご〜〜〜く稀に起きる事なのですが、マザーボードがウィンドウズ10に対応してない場合があり、

その場合に使える手段です、マザーボードのデバイスは自動でアップデートしてくれないらしく、その原因?で接続が出来なくなる場合があるみたいで、

その際はマザーボードの公式サイトから新しいデバイスをダウンロードしてインストールすると良いです!

****注意点****

インストールする際に古いデバイスがインストールしてるとアンインストールしてくれない場合があるので、プログラムの削除で古いデバイスをアンインストールしてから新しいのをインストールしてください。

iOS10ではPPTPを利用したVPN接続が出来ない

ios10

iOS10からは、PPTPのセキュリティが安全ではないということで廃止になっています。

YAMAHAのルーターでインターネット接続している場合に、ネットボランチDNSサービスを利用して、外部ネットワークからVPN(PPTP)接続でサーバーにアクセスしているもありますので、大きな問題です。 YAMAHAのルーター rt58iやNVR500などの機種は、リモートアクセスするときは、PPTPでしか接続できないために もし、iPhoneやiPadをiOS10にアップグレードした場合は、ルーターの機種をL2TPに対応しているルーターに変更する場合がいいかと思います。

YAMAHAのRTX810は、L2TPにも対応していますのでネットボランチDNSサービスを利用できます。

iOS10のVPN設定画面