FareHarbor – フェアハーバーについて

FareHarbor – フェアハーバーのビジネスモデル

FareHarbor – フェアハーバーはウェブサイトに組み込んで使う

FareHarbor – フェアハーバーは多言語対応

FareHarbor – フェアハーバーの初期設定は完全お任せ

FareHarbor – フェアハーバーのシステムは自由度が高い

FareHarbor – フェアハーバーはサポートの対応も早い

FareHarbor – フェアハーバーのシステムのキモ

Affiliate（アフィリエイト）

Partner（パートナー）

まとめ

Square（スクエア）

構成

プリンタがトリッキー

商品登録

ボタン配置

テーブル登録

チップの確定

1日の締め作業

1. オープンチケットの消し込み
2. チップの確定
3. カード売り上げの集計（確認）
4. 現金売り上げの集計（確認）

Square Restaurant – スクエアレストラン

追加の費用

デバイス登録

1. Square Restaurant（スクエアレストラン）のDashboard（ダッシュボード）で利用するiPadを登録します。
2. 登録すると12桁のデバイスコードが発行されます。
3. iPadにインストールしたSquare Restaurant（スクエアレストラン）アプリを起動すると、まずこのデバイスコードの入力を求められます。
4. デバイスコードを入れないとアプリは動作しません。

追加機能 1 フロアプラン

追加機能 2 オートマチックチップの設定

メニューは別もの

Square – スクエアでは見れない

Square Dashboard – スクエアダッシュボード

管理画面

勝手に日本語になる

Square Restaurant（スクエアレストラン）ではメニューが追加

どちらを使うべきか

アメリカのホームページ ベーシックな構成

• ドメイン：年間 $15~
• サーバーホスティング：年間 $120〜 追加料金なしでSSLが使えるものが増えています
• サーバー環境
  • MySQL
  • PHP
• WordPress （CMS）

メリットデメリット

WordPressのメリット

• 非常に多くの稼働実績があり、開発者も多く、問題が生じた際の解決が簡単
• テーマ変更で、ホームページの見かけを大きく変えられる
• プラグインを追加することにより様々な機能を追加できる
• クライアント側での投稿、小変更などのメンテナンスが容易

WordPressのデメリット

• セキュリティホールの情報が広く共有されるため、不正アクセスを招きやすい
• 不正アクセスの踏み台としてスパムコメントが多くなる
• 不正アクセスを防ぐためには、WordPress 本体およびプラグインの更新が欠かせない。
• プラグイン開発は有志によるものが多く、ある日突然使えなくなることがある

ホームページ 制作の流れ

1. ヒアリング 業態、商品やサービス内容、対象となる顧客像、必要とする機能、サイト全体で狙うキーワード
2. ホームページの設計 ヒアリング結果をもとに、ページ構成、テーマの選択、色目の決定、追加するプラグイン、キーワードなどを決めていきます。
3. ホームページの基本構造の設定 データベースのセットアップ、WordPressやプラグインのインストールおよび設定を行います。
4. 空ページの作成、メニュー登録 全てのページを作成します。また、この際に各ページの構造化を行います。 全ページができた時点で、メニュー登録を行います。
5. テキストと画像の追加、スタイルの追加 各ページにテキストと画像を追加していきます。また、必要に応じて、ホームページの見た目を制御するスタイルシート（CSS）の設定を追加します。
6. テスト テキストと画像の追加が進むのと同時に、動作テストを行います。
7. ホームページの公開
8. 一通りのテストが終わった時点で、GoogleやBingなどの検索エンジンにサイトマップを送り、検索エンジンへの登録を促します。
9. 公開後の微調整 公開後の不具合を修正します。

多言語で作るか？

アメリカのドメイン名

アメリカ企業の制作事例

リテール – Eコマースの組み込み

不動産会社 – MLSの組み込み

ツアー会社 – ツアー予約システムの組み込み

プロフェッショナルサービス – 予約カレンダーの組み込み

アメリカのホームページを制作

クライアントからのリクエストで、WooCommerceの設定をしています。

以下の3つのリクエストがありました。
1 ボタンの追加
2 1商品につき、ひとつしかカートに入らない
3カートで、カートに追加できましたメッセージを表示しない。

ボタンの追加

固定ページから複数の商品をカートに入れられる様にしたい。というリクエストがありました。
こちらは、以下のコードで 比較的簡単にボタンの追加が可能でした。

<a class="button" href="http://[ホームページURL]/[追加後に転送されるページ]/?add-to-cart=[product_id]&variation_id=[variation_id]">add to cart</a>

• URL(ホームページのURL)
• 追加後に転送されるページ
• product_id
• variation_id
  

以上を追加すると、ボタンが設定されます。

1商品につき、ひとつしかカートに入らない

WooCommerceでは基本設定では、1商品ひとつではなく、1バリエーションにつきひとつしかカートに入らない設定は可能です。
Tシャツ（商品）のグレー（バリエーション1）とレッド（バリエーション2）は、両方を一つのカートに入れることが可能です。
これをグレーが入っているならレッドは入らない様にしたいというのがクライアントからのリクエストです。

この要望は以下のコードをfunction.phpに追加することにより実現しました。

add_filter( 'woocommerce_add_to_cart_validation', 'wc_limit_one_per_order', 10, 2 );
function wc_limit_one_per_order( $passed_validation, $product_id ) {
		if ( !in_array( $product_id, array( 28532, 28611 ) ) ) {
		return $passed_validation;
	}

	if ( WC()->cart->get_cart_contents_count() >= 1 ) {
		wc_add_notice( __( 'This product cannot be purchased with other products. Please, empty your cart first and then add it again.', 'woocommerce' ), 'error' );
		return false;
	}

	return $passed_validation;
}

// woocommerce remove add to cart message from cart page.
add_filter( 'wc_add_to_cart_message_html', 'empty_wc_add_to_cart_message');
function empty_wc_add_to_cart_message() { 
    return ''; 
}; 

3行目で、処理をする商品を指定しています。
この商品が一つだけの場合

if ( 28532 !== $product_id ) {

という表記ですが、複数の商品について、同じ処理をする場合は、

if ( !in_array( $product_id, array( 28532, 28611 ) ) ) {

というコードになります。

カートで、「カートに追加されました」メッセージを表示させない。

これは以下のコードをfunction.phoに追加することにより、可能となりました。

add_filter( 'wc_add_to_cart_message_html', 'empty_wc_add_to_cart_message');
function empty_wc_add_to_cart_message() { 
    return ''; 
}; 

日本語化の手段

1. 言語ごとに複数のアカウントを作る
   • サイトと商品の両方の翻訳ができる。
   • 一つのPOSと複数のEコマースアカウントの同期ができない。
   • 英語と日本語の切り替えがページごと商品ごとのリンクとなるため複雑。
   • コストがかかる。
2. テーマを改造して利用言語に応じて表示を変える
   • サイトのみ翻訳ができる。
   • 開発費がかさむ。
   • 商品タイトル、変数（オプション）、商品説明の翻訳ができない。
   • 言語の追加が大変。
3. 自社開発JavaScriptによるテキストの置き換え
   • サイトと商品の両方の翻訳ができるが、JavaScriptの書き換えとなるため、メンテナンス性が高くない。
   • 商品説明の翻訳がほぼ無理。
   • 言語の切り替えができない（利用者の言語環境で自動判断）。
   • 言語の追加は非常に大変
4. サードパティのサービスを利用したテキストの置き換え
   • サイトと商品の両方の翻訳ができる。
   • インターフェィスが用意されていて、メンテナンスが容易。
   • コストは少し高くなる。
   • 機械翻訳でそのまま使えない。
   • 言語の追加は簡単

Weglotとは

• オンラインによるインターフェース
• 複数言語対応
• WordPress対応
• ベースは機械翻訳＋手作業での翻訳
• バルク処理可能

Weglotの流れ

1. 翻訳元サイトでJavaScript読み込み
2. 英語（元言語）のページを開くとWeglotが自動的に文章や単語を拾う
3. 拾ってきた文章や単語を自動翻訳（自動翻訳はOFFにできる） +手作業で文章や単語に対応する日本語（翻訳）を登録
4. 英語（元言語）のページを開くとテキストが翻訳に置き換えられる。

Weglotの問題点

• 機械翻訳（自動翻訳）は、以前のGoogle翻訳程度の精度で、そのまま使えないものが多い。
• 固有名詞なども翻訳してしまう。
• ”、’、- などの記号を全角にしたり、不必要なスペースを挿入したりしまう。

BigCommerceの特徴

• 北米最大のEコマースプラットフォーム
• 選べるプラン
• ShopKeepやSquare等のレジとの統合
• 多言語対応化

POSレジとEコマースの統合（在庫連動）

同期する項目

• Name 商品名
• Default Price 販売価格
• Options オプション（サイズ、色など）
• Product code/SKU 在庫コード
• Inventory on hand/Stock 在庫数

BigCommerce側での作業

1. 商品ごとにカテゴリーを設定し、
2. ブランドを登録します。

1. 商品写真
2. 商品説明
3. 重さやサイズ

作業をしてみて確認できた課題

POSレジ側

Eコマース側

POSレジの移行 NCR CounterpointからShopkeepへ

POSレジ移行の手順

1. CounterpointからのCSVファイルの書き出し、データ解析
2. リレーショナルデータベースへのCSVファイルの読み込み
3. データベースよりShopKeep読み込み用CSVファイル制作1
4. ShopKeepへのCSVファイル読み込み、
   1. Basic Productの登録
   2. オプション行制作
   3. UUID生成
5. ShopKeepより、インベントリCSVファイル出力
6. インベントリCSVファイルのデータベースへの読み込み
7. オプション行にUPC（バーコード）、在庫割り当て
8. データベースよりShopKeep読み込み用CSVファイル制作2
9. ShopKeepへのCSVファイル読み込み
   1. オプションへのUPC、在庫アップデート
10. 移行内容のチェック、修正

Counterpointの特性

• IM_BARCOD バーコード
• IM_GRID_DIM_1 オプション1の内容
• IM_GRID_DIM_2 オプション2の内容
• IM_GRID_DIM_3 オプション3の内容
• IM_INV_CELL オプションごとの在庫
• IM_INV 在庫数
• IM_ITEM 基本の商品情報、オプション名

Shopkeepの特性とトラブル

基本商品とオプション

1. まず、基本商品とそのオプションを登録する
2. 次にオプションごとのUPCバーコードと在庫量を更新する

UPCバーコードの制限

CSVファイルとエクセルの特性

0で始まるバーコード

桁数が多いバーコード

リンク

• NCR Counterpoint
• ShopKeep
  • ShopKeep Inventory with variant
• BigCommerce

1. 日本語に対応しているか
2. 複数の言語を同時に使えるか

代表的なショッピングカートシステム

1. Big Commerce
2. Volusion
3. Shopify