[google analytics] APIでアクセス数を取得したい

1. Google Dev ConsoleでAnalytics APIを有効にします。

認証情報を作成

– サービスアカウントの作成
L p12の秘密鍵を作成

– Google analyticsの対象のサービスに権限の追加でコンソールで作成したメールアドレスを追加
L 項目は表示と分析

$ git clone -b v1-master https://github.com/google/google-api-php-client.git

app.php

require_once 'google-api-php-client/src/Google/autoload.php';
$service_account_email = 'myapp-***@analytics-hoge.iam.gserviceaccount.com';
$key = file_get_contents('analytics-fugafuga.p12');
$profile = '***';

$client = new Google_Client();
$analytics = new Google_Service_Analytics($client);

$cred = new Google_Auth_AssertionCredentials(
	$service_account_email,
	array(Google_Service_Analytics::ANALYTICS_READONLY),
	$key
);

$client->setAssertionCredentials($cred);
if($client->getAuth()->isAccessTokenExpired()){
	$client->getAuth()->refreshTokenWithAssertion($cred);
}

$result = $analytics->data_ga->get(
	'ga:' . $profile,
	'7daysAgo',
	'yesterday',
	'ga:sessions,ga:pageviews'
);

echo $result -> rows[0][0] . "\n";
echo $result -> rows[0][1] . "\n";

$ php app.php
*****
*****

人気記事の取得も配列を使ってできるようです。
なるほど、割と簡単に実装できますね。

[PHP 7.4.11] MySQLにCSVインポートする

### dbとテーブルの作成
mysql> create database myapp;
mysql> use myapp;
mysql> create table users(
-> id int primary key auto_increment,
-> name varchar(255),
-> sports varchar(255)
-> );

nameとsportsを入れたcsvファイル(users.csv)を作成します。

### pdoの確認
$ php -i|grep PDO
PDO
PDO support => enabled
PDO drivers => mysql, sqlite
PDO Driver for MySQL => enabled
PDO Driver for SQLite 3.x => enabled

### csv.php

ini_set('display_errors', 1);

try {
		$pdo = new PDO('mysql:host=localhost;dbname=myapp;charaset=utf8','root','****',
				array(PDO::ATTR_EMULATE_PREPARES => false));
	} catch (PDOException $e){
		exit('データベース接続失敗.'.$e->getMessage());
	}

$fp = fopen("users.csv", "r");

while(! feof($fp)){
	$csv = fgets($fp);
	$csv = trim($csv,'"');
	$csv = mb_convert_encoding($csv, "UTF-8", "utf-8");
	$csv = str_replace('"','',$csv);
	$csv_array = explode(",",$csv);

	$stmt = $pdo->prepare("INSERT INTO users(name, sports) VALUES(:name, :sports)");

	$stmt->bindParam(':name', $csv_array[0],PDO::PARAM_STR);
	$stmt->bindParam(':sports', $csv_array[1],PDO::PARAM_STR);
	$stmt->execute();
}

echo "insert done";

$ php csv.php
insert done

mysql> select * from users;
+—-+—————–+—————-+
| id | name | sports |
+—-+—————–+—————-+
| 1 | name | sports
|
| 2 | Efa Trujillo | Gynastics
|
| 3 | Erica Werner | Rowing
|
| 4 | Amin Guerrero | Wiffleball
|
| 5 | Abbie Bender | Rugby
|
| 6 | Kamron Mcneill | Surfing
|
| 7 | Arabella Sutton | Basketball
|
| 8 | Emily Kerr | Curling
|
| 9 | Connar Small | Ice skating
|
| 10 | Haidar Fletcher | Figure skating |
+—-+—————–+—————-+
10 rows in set (0.00 sec)

1行目からinsertされてしまうので、1行目は抜かす必要がありますね。

[CSS] スマホで見た時に、下固定のメニューを表示させたい

ヤフオクとかでもそうだが、SP表示の際に下に固定メニューを表示させたい。
イメージとしてはこんな感じ。

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
	<h1>Test</h1>
	<div id="sp-fixed-menu" class="for-sp">
		<ul>
			<li><a href="#">お買い得品</a></li>
			<li><a href="#">セール品</a></li>
			<li><a href="#">カート</a></li>
		</ul>
	</div>
</body>
</html>

#sp-fixed-menu {
	position: fixed;
	width: 100%;
	bottom: 0px;
	font-size: 0;
	opacity: 0.9;
	z-index: 99;
}

#sp-fixed-menu ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

#sp-fixed-menu li {
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 0;
	margin: 0;
	font-size: 14px;
	border-right: 1px solid #fff;
}

#sp-fixed-menu li:first-child {
	background: #38b435;
}
#sp-fixed-menu li:nth-child(2) {
	background: #38b435;
}
#sp-fixed-menu li:last-child{
   background: #f3a324;
}

#sp-fixed-menu li a {
	color: #fff;
	text-align: center;
	display: block;
	width: 100%;
	padding: 10px;
	padding-left: 0px;
}

/* spのみ表示 */
@media (min-width: 768px){
	.for-sp {
		display: none;
	}
}

OK
さーワイヤー書くか。
一日中ワイヤー書くと、疲労感が半端ないんだよなー。

[CSS] スクロールしても横固定のメニュー

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<header id="header"></header>
<main id="main">
	<h2>MAIN BLOCK</h2>
</main>

<aside id="sub">
	<h2>Menu</h2>
	<ul>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
	</ul>
	<h2>Menu</h2>
	<ul>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
	</ul>
	<h2>Menu</h2>
	<ul>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
		<li>Subject</li>
	</ul>
</aside>
</body>
</html>

body {
	margin: 0;
	padding: 0;
}
#header {
	box-sizing: border-box;
	background: #ccc;
	height: 50px;
}
#main {
	box-sizing: border-box;
	margin-left: 220px;
	padding: 20px 40px;
}
#sub {
	box-sizing: border-box;
	top: 50px;
	height: 100%;
	width: 220px;
	position: fixed;
	overflow: auto;
	background: #eee;
	padding: 20px;
}

OK, keep goin
出掛けよう

[jQuery] マウスのhoverで写真表示を変える

amazonの様にマウスでホバーするとメイン画像の表示を切り替えたい

hoverしたらメイン画像のsrcをreplaceする。

<body>
	<img src="img/item1.jpg" class="item" width="610px" height="420px"><br>
	<img id="item1" src="img/item1.jpg" width="200px" height="140px">
	<img id="item2"src="img/item2.jpg" width="200px" height="140px">
	<img id="item3" src="img/item3.jpg" width="200px" height="140px">
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
	<script>
		$('.item').each(function(){
			let img_off = $(this).attr('src');
			let img_on_2 = $(this).attr('src').replace('1', '2');
			let img_on_3 = $(this).attr('src').replace('1', '3');

			let item2 = document.getElementById('item2');
			let item3 = document.getElementById('item3');
			$(item2).hover(
				function(){
					$('.item').attr('src', img_on_2);
				},
				function(){
					$('.item').attr('src', img_off)
				});
			$(item3).hover(
				function(){
					$('.item').attr('src', img_on_3);
				},
				function(){
					$('.item').attr('src', img_off)
				});
		});
	</script>

</body>

ああ、これは作ってて面白いね。

[Vue.js]Selectの初期値をdataで渡す

注文数の個数の変更の箇所をinputではなく、selectにしたい

select文を作成して、vue.jsのdataでvalueをv-modelに渡せば良い

<body>
	<div id="app">
		<form>
			<select v-model="selected_item">
				<?php for($i=0; $i<10; $i++){
					echo "<option value='$i'>$i</option>";
				}
				?>
			</select>
		</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	<script>

		const num = 5;

		var vm = new Vue({
			el: '#app',
			data: {
				selected_item: num,
			}
		});
	</script>

</body>
</html>

ずーと悩んでたけど、割と簡単にできたな🔥🔥🔥

### Vueと言えばこの本

yahoo shoppingの買い物カゴの挙動とID

ヤフーショッピングの買い物カゴの挙動を調査する

### 商品詳細ページ


yahooも商品ID:523085をURLにしています。

https://store.shopping.yahoo.co.jp/insair-y/523085.html
https://store.shopping.yahoo.co.jp/${shopID}/${itemID}.html

vwitem:523085, vwcatalog:insair-y, vwquantity
addcartでカートに商品を入れている。

<form name="addCart" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form" method="post" accept-charset="EUC-JP" onsubmit="return false;">
                            
                            
<input name="vwitem" type="hidden" value="523085">
<input name="vwcatalog" type="hidden" value="insair-y">
<input name=".autodone" type="hidden" value="https://store.shopping.yahoo.co.jp/insair-y/523085.html">

// 省略
<input name="vwquantity" type="text" value="1" class="elTextBox" maxlength="3" onclick="this.select(0, this.value.length);" data-updown-quantity-box="">

js

$(function() {
    YAHOO.JP.shp.common.getSeleptah.init({
        domain     : 'https://store.shopping.yahoo.co.jp',
        deviceType : 'pc',
        position   : 1,
        moduleNum  : 5,
        itemId     : 'insair-y_523085',
        pcatId     : '22664',
        genre      : '49495',
        brand      : '113',
        price      : 12000,
        service    : 'shp',
        targetId   : 'seleptahItems',
        apicrumb    : 'hogehoge',
        ruleBucketId : '',
    });
});

商品をカートに入れる

<p class="elWrpButton" id="cartbtn">
        <a href="javascript:void(0);" class="elCartButton elButton" data-ylk="sec:cartbtn;slk:addcart;pos:0;">
            <span>商品をカートに入れる</span>
        </a>
    </p>

Commerce21iframeJsの記載があり、Commerce21をベンダーに使っている様に見える。

### ショッピングカート

数量変更

<a href="javascript:void(0);" style="display:none;" id="afterBuy-insair-y-0" data-ylk="slk:buyltr;pos:1"></a>                                     <script>
                                        document.write('<ul class="elFunction"><li class="elLater"><label><input type="checkbox" name="chk-insair-y-0" value="サウンドバー スピーカー サウンドスピーカー テレビスピーカー スピーカー Bluetooth 壁掛け 高音質 HT-SB-115  ホームシアター アイリスオーヤマ"><span class="elLabel">後で注文する</span></label></li></ul>');
                                    </script>

削除

<script>
                        document.write('<input type="text" name="item_num-0" id="dcNum03hogehoge" maxlength="3" class="dcNum dcMeiryo" value="1" >\
                        <input type="submit"name="delete-293201139" value="削除" class="dcOrderDelete" id="dhogehoge" data-ylk="slk:delete;pos:1">');
                        </script>

js

 item: [{name: "サウンドバー スピーカー サウンドスピーカー テレビスピーカー スピーカー Bluetooth 壁掛け 高音質 HT-SB-115  ホームシアター アイリスオーヤマ", id: "insair-y_523085", store_id: "insair-y", product_category: "22664", price: 12000, num: 1, sum_price: 12000, point: 120, rate_point: 1}]

商品詳細とカートの挙動は大枠は掴めたので次はテストコードと行きたい。

rakutenの買い物カゴの挙動とID

楽天の買い物カゴの挙動とIDの使われ方を調査する

### 商品詳細ページ

ソースを見ると、URLの”gcv1-bk-w”が商品IDで、”item_number”として全てのkeyになっている様に見える。
item_numberとは別にitem_id 10000201がある。
shop_idはintの6桁の数字

<input value="331955" type="hidden" name="shop_id"><input value="ネスプレッソ公式 楽天市場店" type="hidden" name="shop_name"><input value="10000201" type="hidden" name="item_id"><input value="【公式】ネスプレッソ カプセル式コーヒーメーカー ヴァーチュオ ネクスト C クラシックブラック GCV1-BK-W | コーヒーメーカー コーヒーマシン エスプレッソマシーン おしゃれ 一人暮らし 家庭用 本格 一人用 コーヒー カプセル お手入れ簡単 Nespresso" type="hidden" name="item_name"><input value="GCV1-BK-W" type="hidden" name="item_number"><input value="nespresso" type="hidden" name="shopurl"><input value="/nespresso/gcv1-bk-w/" type="hidden" name="pageurl">

買い物かごへのbutton
->
-> 数量はunitsで管理している。

<form method="post" id="purchaseForm" data-timesale-id="10000201" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set?l2-id=item_PC_SingleNormalItem">
// 省略
<td class="floatingCartPurchaseButtonsContainer"><span class="unit">個数&nbsp;
</span><input value="1" type="text" size="4" name="units" id="units" class="rItemUnits"><span class="floatingCartSplitButtons"><span class="floatingCartSplitButtons">
// 省略
<span class="cart-button-container"><button data-ratParam="all" data-ratId="fixed_add" data-ratEvent="pv,appear" class="cart-button add-cart new-cart-button "><span class="normal"><img src="https://r.r10s.jp/com/img/rms/storefront/pc/page/plussign_23x23.png"><span>商品をかごに追加</span></span></button>

__event、shop_bid(shopid), item_id, inventory_flagを送っている。

<input value="ES01_003_001" type="hidden" name="__event"><input value="331955" type="hidden" name="shop_bid"><input value="10000201" type="hidden" name="item_id"><input value="1" type="hidden" name="inventory_flag">

買い物カゴへの追加はページ遷移していないので、onClickイベントでJSでやっているっぽい。

### 買い物カゴのページ

数量変更

				<select id="units_hogehoge" class="change-units" name="units&#91;0&#93;" autocomplete="off">

 
					<option value="1"  selected>1</option>
	<option value="2" >2</option>
	<option value="3" >3</option>
	<option value="4" >4</option>
	<option value="5" >5</option>

削除

<span class="remove-button">
				<a href="#" id="cartdelete_331955_hogehoge" class="cart-delete ratCustomEvent" data-rat-key="ratcart" data-rat-val="delete_pc">削除</a>
			</span>

js

	grp15_ias_prm = {
		rakuten_pid: 2,
		service: 'ICHIBA',
		page: 'cart',
		d: 'pc',
		shopid: ['331955'],
		itemid: ['nespresso:10000201'],
		genreid: ['565115'],
		itemname: 
                 // 省略

ratTag
-> shopIDとitemIDで管理している。
-> ItemGenreのIDもあり。

<form class="ratForm" name="ratForm" id="ratForm" style="display:none;">
		<input type="hidden" name="rat" id="ratAccountId" value="1">
		<input type="hidden" name="rat" id="ratServiceId" value="3">
		<input type="hidden" name="rat" id="ratPageLayout" value="pc">
		<input type="hidden" name="rat" id="ratSiteSection" value="checkout">
		<input type="hidden" name="rat" id="ratAdobeSiteSection" value="cart">
		<input type="hidden" name="rat" id="ratPageType" value="cart_modify">
		<input type="hidden" name="rat" id="ratPageName" value="step0_shopping_basket">
		<input type="hidden" name="rat" id="ratCheckout" value="">
		<input type="hidden" name="rat" id="ratItemId" value="331955/10000201">
		<input type="hidden" name="rat" id="ratPrice" value="25300">
		<input type="hidden" name="rat" id="ratItemCount" value="1">
		<input type="hidden" name="rat" id="ratItemGenre" value="565115">
		<input type="hidden" name="rat" id="ratItemTag" value="">
		<input type="hidden" name="rat" id="ratItemVariation" value="&#91;{}&#93;">
		<input type="hidden" name="rat" id="ratOrderId" value="">
		<input type="hidden" name="rat" id="ratCouponId" value="">
		<input type="hidden" name="rat" id="ratCouponPrice" value="">
		<input type="hidden" name="rat" id="ratPointPrice" value="">
		<input type="hidden" name="rat" id="ratShippingFee" value="">
		<input type="hidden" name="rat" id="ratOrderList" value="">
		<input type="hidden" name="rat" id="ratTotalPrice" value="">
		<input type="hidden" name="rat" id="ratItemCountOrder" value="">
		<input type="hidden" name="rat" id="ratCvEvent" value="{'cart_go_checkout':1, 'cart_add':0}">
		<input type="hidden" name="rat" id="ratShopUrlList" value="nespresso">
		<input type="hidden" name="rat" id="ratCustomParameters" value="{'cart_type':'cart_view', 'display_of_card_packaged_registration':'0', 'asuraku_item_flg':'0', 'deal_item_flg':'1', 'rba_item_flg':'0', 'rba_order_flg':'', 'set_deliverydate':''}">

いやーこれ結構大変だなー

amazonの買い物カゴの挙動を見よう

amazonの買い物カゴで、IDをどう使っているのか調査する

### amazon

カートに入れるbuttonがinput type=”submit”としています。

<span class="a-declarative" data-action="dp-pre-atc-declarative" data-dp-pre-atc-declarative="{}" id="atc-declarative">
<span id="submit.add-to-cart" class="a-button a-spacing-small a-button-primary a-button-icon"><span class="a-button-inner"><i class="a-icon a-icon-cart"></i><input id="add-to-cart-button" name="submit.add-to-cart" title="カートに入れる" data-hover="左から&lt;b&gt;__dims__&lt;/b&gt;を選択して&lt;br&gt;ショッピングカートに追加" class="a-button-input" type="submit" value="カートに入れる" aria-labelledby="submit.add-to-cart-announce"><span id="submit.add-to-cart-announce" class="a-button-text" aria-hidden="true">カートに入れる</span></span></span>
</span>

“a”:”B08C9R7MVT”,”quantity”:”1″と書いてあるので、恐らくB08C9R7MVTが商品IDではないかと思う。

<script type="a-state" data-a-state="{&quot;key&quot;:&quot;turbo-checkout-page-state&quot;}">{"turboWeblab":"RCX_CHECKOUT_TURBO_DESKTOP_NONPRIME_87784","strings":{"TURBO_CHECKOUT_HEADER":"今すぐ購入：ナパバレーの日本人醸造家 ハヤシワインズ 2015 パウロニア・カベルネソーヴィニヨン [カリフォルニア／赤ワイン／750ml］","TURBO_LOADING_TEXT":"注文内容を読み込み中"},"inputs":{"a":"B08C9R7MVT","quantity":"1","oid":"","addressId":""},"configurations":{"isSignInEnabled":true,"initiateSelector":"#buy-now-button","prefetchEnabled":true},"buttonID":"buy-now","eligibility":{"isEligible":false},"turboWeblabTreatment":"T2","timeout":"5000"}</script>
</div>

商品ページのcookie

商品追加

やはり、”B08C9R7MVT”を渡しています。

<div id="huc-v2-order-row-item-B08C9R7MVT" data-asin="B08C9R7MVT" data-itemid="Ca5ba925d-a3ea-4f29-b288-38f3bfe04fe2" class="a-box a-box-thumbnail huc-middle-vertical huc-no-radius huc-v2-order-row-image-box huc-green-border huc-v2-order-row-item"><div class="a-box-inner">
    <img alt="" src="https://m.media-amazon.com/images/I/31j5L8Leq4L.jpg" class="huc-no-radius huc-v2-order-row-image huc-v2-table-col">
  </div></div>

ここで、Cookieを見ても、どの値が商品のCookieかは不明

カートの編集ページ

数量変更
-> name=”quantity”としているので、quantityで管理している事がわかる。

<span class="a-dropdown-container"><label class="a-native-dropdown">数量:<span class='sc-offscreen-label' aria-label='数量'></span></label><select name="quantity" autocomplete="off" data-a-touch-header="数量" tabindex="0" data-action="a-dropdown-select" class="a-native-dropdown a-declarative">
            
            
                <option value="0" data-a-css-class="quantity-option">
                    0 (削除)
                </option>
// quantity

<input name="submit.update-quantity.hogehoge38f3bfe04fe2"
       value="更新"
       data-action=""
       aria-label="更新"
       type="submit"
       class="a-color-link"/>

                    </span>

削除

<input name="submit.delete.hohoge"
       value="削除"
       data-action="delete"
       aria-label="削除 ナパバレーの日本人醸造家 ハヤシワインズ 2015 パウロニア・カベルネソーヴィニヨン &#91;カリフォルニア／赤ワイン／750ml］"
       type="submit"
       class="a-color-link"/>
            </span>

なるほど、商品カートは基本、商品IDとquantityで管理し、カートではquantity(数量)とdelete(削除)の機能があるって事がわかった。