CSS Nite福岡版の12回目のフォローアップです。
公開ポリシー
このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。
- このページのID/パスワードの情報はツイートなどされないようにお願いします。
- CSS Niteのコンテンツの再利用について
ブログやSNS
「こんなセミナーに行った」「ここが印象に残った」等、ブログなどで取り上げてくださると嬉しいです。こちらのバナーはご自由にお使いください。
Web制作の現場ですぐ使える、Adobe XDテクニック
林 航平（アイドットデザイン）
ご参加いただいた皆さま、ありがとうございました。
Adobe XDは、Webデザインの現場で新しいスタンダードになる！と信じております。
私のセッションで使ってみようかな？と思ってくださる方がいたら嬉しいです。
まずはスタータープランから、始めてみてはいかがでしょうか。
【Adobe XDスタータープラン】
https://www.adobe.com/jp/products/xd/compare-plans.html
そして、Facebookコミュニティも気軽に参加されてください！
一緒に勉強しながらXDマスターになりましょう。
今後も楽しいイベントを企画しておりますので、ぜひの最新情報チェックの場としてもお使いください。
【福岡 Adobe XDミーティング】
https://www.facebook.com/groups/211350956335026/
【質問にお答えします】
(Q)Adobe XDのデータはPhotoshopやIllustrator等で読み込みや編集ができるのか？
(A)読み込み/編集はできません。逆に、XD上でPhotoshopデータを読み込み、編集することができます。（まだ一部表示バグや再現性が十分でないところはありますが、毎月のアップデートで改善されています！）またIllustrator上のベクターデータをコピー→XDでペーストするとそのままXD上で編集することもできます。
(Q)クライアントに見せる時に、「もうできてる」と思われそう、その時の対応は？
(A)非常に鋭い質問です （笑）そのようなケースは実際ありました。その時は「これはあくまでデザイン（設計図）で、このあとコーディング作業（組み立て）が必要です」という内容を丁寧に説明しました。どちらにせよしっかりとスケジュール上で進行していれば悪い印象は与えないと思います。
(Q)XDでできなくて困っていることは？
(A)最近感じるのはヘッダーなどの「固定コンテンツを再現できない」ことです。改善に期待！ですね
(Q)XDのデモでやっていたことが逆に実装できずに困ったようなことはありますか？
(A)特にそのような経験はないですね。開発環境で困るような複雑なことが（いい意味で）できないところも、XDのいいところです。
(Q)林さんの会社では8割ほど使用しているとのことでしたが、実際流通しているのは何割ぐらいでしょうか？
(A)弊社だけではなく業界全体という認識ですかね？どうでしょう…私が知っている限りでは、やはりまだそこまで多くはないと思います。便利なのは分かっているけど、学習コストだったりクライアントさんの状況などで新しいツールに踏み込めない、そんな状況もあると思います。少しづつ、増えていったらいいなと思っています！
(Q)リピートグリッドについて：テキストは要素ごとに用意した方が良いですか？
(A)はい、その通りです。リピートグリッド内のテキストの要素が違う場合、それぞれテキストデータを分けて用意する必要があります。
(Q)デザインスペックでアピアランスを取得できるのは文字だけですか？ボックスサイズとかもできますか？
(A)はい、オブジェクトのサイズ、位置情報なども取得できます。正確な情報を取得できるので、より精密なコーディングができると思います。
【感想を読んで】
「使ってみたい」「知らない機能があった」などというお声も多く、良かった～と一安心しました（笑）
あと、「実例などあると嬉しい」というお声もあったので、機会があればそういったイベントなども企画したいなと思います。
そして、次回のCSS Niteではより実践的な部分でのお話をしますので、ぜひご興味ある方はご参加ください。
【CSS Nite in Fukuoka, vol.13】
https://www.facebook.com/events/1845687052398247/
もうこわくない！クレジットカード決済導入
佐藤 毅（ジーティーアイ）
ご参加ありがとうございました。
「もうこわくない！クレジット決済導入」
Stripe という決済サービスについてお話ししました。
https://stripe.com/jp
これを機にクレジット決済に興味を持っていただければ幸いです。
今回は、WordPressのプラグインを紹介しましたが
Stripe にはその他にも様々なプラットフォーム向けのライブラリが存在します。
必要に応じて調べてみると面白い発見があるかもしれません。
果敢にチャレンジしてみてください。
アンケートの質問に対する回答
・住所入力欄が海外仕様のように感じたがこれもカスタマイズできるか？
こちら、現在は出来ないと思います。（要望を出していますので今後の可能性はあります）
代替案としては氏名・メール・住所までフォームを作りクレジットカードの部分だけを Stripe で入力する方法があります。
こちらは今回ご紹介したプラグインのマニュアルにやり方を掲載しておりますのでご利用ください。
・WordPressはセキュリティ面での質問をお客様からよく受けますがそのあたりも問題ないのでしょうか？
WordPressといいますと「乗っ取り」や「改ざん」といった脅威がよく知られていますのでご心配も無理はないでしょう。
ただし、このセキュリティ面に関していいますと、運用をキチンと行っている場合においては皆無とは言いませんが、ほぼ問題ないと思います。
世界的なシェアも大きい WordPress は狙う方としては狙いやすいのも確かです。
しかしながらこのシェアの大きさゆえに「セキュリティの穴」も見つけられやすくそして埋めるスピードも早いのです。
キチンと運用していれば…としたのはこの点でして、キチンとアップデートを行っているサイトであればセキュリティ対策もバッチリということになります。
また、Stripe自体も今回セミナーでご覧いただいた方法では PCI DSS（※1） に準拠している方法となりますので
今年3月までにこの基準に準拠しなければいけなかったのですが、あらためての対応・対策は必要ありませんでした。
Stripe はセキュリティ面においても積極的に基準をクリアしている姿勢が見受けられ安心できます。
※注1) PCI DSS（Payment Card Industry Data Security Standard）とは
カード会員情報の保護を目的として、国際ペイメントブランド5社（アメリカンエキスプレス、Discover、JCB、マスターカード、VISA）が
共同で策定したカード情報セキュリティの国際統一基準です。
・複数の商品の決済をまとめて行うなどはプラグイン上可能なのでしょうか？
・カートに追加→決済 のように使うことはできるのでしょうか？
こちら2つとも同様の回答になります。
複数の商品がある場合にそれぞれを選択させて（カートに入れさせて）その後に決済を行いたい場合
カートシステムの利用をオススメします。
カートシステムと言いましても最近では またしてもWordPressで恐縮ですが
WooCommerce というショッピングカートがあります。
こちらですと追加プラグインで Stripe を利用できますので安心です。
https://woocommerce.com/
こちらサイトは英語ですが、インストールすると管理画面は日本語に出来ます。
また、複数の商品をまとめてというだけであれば、「商品」を「セット商品」として価格をつけるという運用でもよいかもしれません。
「セットA」「セットB」など「セット商品」を作りそれぞれに「お支払い」ボタンをつけることで運用上問題なければ効率よいのではないでしょうか。
・1アカウントで複数サイトに利用できるのでしょうか？
利用可能です。
契約自体を切り替えられるようになっています。
1アカウントでご自身がオーナーの契約はもちろん
お客様の運用支援のためにアカウントを管理者として追加してもらうことも可能です。
サンプルで表示したサイト
テスト課金ですのでお気軽にお試しください。
テスト用クレジットカード番号は下記の通り
4242 4242 4242 4242 （VISA）
5555 5555 5555 4444 （MasterCard）
セミナー デモで使用したプラグイン プレゼント
Stripe Payment プラグイン をプレゼントします。
ダウンロードURL
Stripe Payment プラグイン ダウンロードページ
https://01w.me/stripepayment
パスワード: cssnite
パスワードを入力してダウンロードしてください。
※ダウンロード期限 7月31日
GitHubにもアップされています。ソースをご覧になりたい方はこちらもどうぞ。
https://01w.me/stripegithub
Stripe Payment マニュアルページ
https://01w.me/cssnitefuk12manual
マニュアルのパスワード
stripe2018
こちらは利用方法を記述したマニュアルページです。
順次書き足しておりますので知りたいことがありましたらご要望お寄せいただくとありがたいです。
どうぞよろしくお願いいたします。
参考資料
Amazon Pay 体験デモサイト
セミナーの中でご紹介した Amazon Pay を体験できるデモサイトです。
https://01w.me/cssnitefuk12amazon
体験していただくとわかりますが、Amazonにログイン完了していることで 最短3クリックでの購入完了 が実現します。
Stripe のユーザーグループ
Stripeの使い方で迷ったときは
JP_Stripes
https://01w.me/cssnitefuk12jpstripes
Facebookで非公開グループもありますのでご希望の方はご招待します。
Facebookにて私に友達申請いただけますと幸いです。
（佐藤 毅 で検索してください。また申請の際はひとこと「CSS Nite 受講しました」とお書き添えください）
Stripe 埋込み型タイプ 「Stripe Elements」
カスタマイズのCSS,JSファイルがサンプルとして掲載されています。
https://01w.me/cssnitefuk12stelem
短時間で飛躍的に英語力が向上する英語教室（特別編）
鷹野 雅弘（スイッチ）
リンク先などはこちらにまとめました。
お問い合わせ
ご不明点やお気づきの点がありましたらこちらのフォームからお知らせください。
