【Shopify】アプリの種類についてまとめてみた

大きく分けて3つあるが、
使用できる基本的な機能は同じ。
ただし作り方や、一部(後述)のAPIが違う。

1)Private App

名前の通り、App Storeで公開はせず、内部だけでの使用を前提としたアプリ。
以下の3)でも説明するがPrivate Appでは「Embedded SDK API」が使用できない。

2)Public App

App Storeで販売されているアプリは全て「Public App」の分類になる。
今後、AppStoreでの販売や配布を予定されている方は、Public App形式で
アプリを作成する必要がある。

3)Unlisted App

作り方はPublic Appと同じだが、違いは「App Storeに公開されていない」ということ。
Private Appと比較し、Public AppやUnlisted Appを利用するメリットは、
「Embedded SDK API」が使用できることだ。

「Embedded SDK API」は簡単に言うと、

Shopifyのサイト内でアプリ画面を開くことができる

ということ。
※iframeみたいなイメージ

Private Appで作成する場合は、「Embedded SDK API」が
使用できないため、別サイトに情報を表示または操作するUIを作成しないと行けない。
Public Appであれば、Shopifyの管理ページ内から直にApp画面を開くことができるため
作業が捗るだろう。

[参考]
https://www.littlestreamsoftware.com/articles/shopify-app-types/

【Elasticsearch】5.x系でElasticsearch-headを使う時の注意点

既に色んなサイトにも載っているが、
5.x系でElasticsearch-headを使用する場合は、プラグインとしてではなく
1つのスタンドアローンサーバとして使用する事になる。

ローカル環境で使用するため、
公式サイトの説明通りに、まずはインストールする。

環境設定

インストール

$ git clone git://github.com/mobz/elasticsearch-head.git
$ cd elasticsearch-head
$ npm install

起動

npm run start

確認

「http://localhost:9100/」を開く。

※Elasticsearchは「localhost:9200」で動作している前提

注意点

さて、上記の設定のままlocalhost:9200にアクセスすると
elasticsearch-headのページ自体は確認できるが

「cluster health: not connected」

と表示されたのではないだろうか。

実は、別途elasticsearch.yml内に
以下の追加設定をする必要がある。

http.cors.enabled: true
http.cors.allow-origin: "*"

以下公式サイトの引用。

Enable CORS in elasticsearch

When not running as a plugin of elasticsearch (which is not even possible from version 5) you must enable CORS in elasticsearch otherwise your browser will rejects requests which appear insecure.


In elasticsearch configuration;

add http.cors.enabled: true
you must also set http.cors.allow-origin because no origin allowed by default. http.cors.allow-origin: "*" is valid value, however it’s considered as a security risk as your cluster is open to cross origin from anywhere.

github.com

最後の一文にもあるが、http.cors.allow-origin: "*"の設定は
どこからでも接続を許可するという設定であり
セキュリティ的にリスクがあるため、扱いには注意が必要。

【Go】作業効率アップ!ファイル監視 -> 自動コンパイル -> 自動実行の完全自動化

開発時に、以下のような工程を繰り返している場合、

①ファイル編集
②「go run」または「go build」して実行

開発効率が落ちる。
LivereloadのようなことがGoでも出来ないか調べてみたら
まさにぴったりのパッケージがあった。

GitHub - codegangsta/gin: Live reload utility for Go web servers

使い方

①インストール
go get github.com/codegangsta/gin
②動作確認
gin -h
③使用

基本的な使い方

gin run main.go

コンパイル後、自動的に再実行したい場合は以下

gin -i run main.go

【Go入門】さくらVPS(CentOS)にGoをインストールしてみた。

1)yumでインストール

$ yum install epel-release
$ yum install golang

2)環境変数「GOPATH」の設定

Goのプロジェクトを作成したり
パッケージをインストールするための起点になる
GOPATHを設定する。

$ cd ~
$ vi .bash_profile
# .bash_profile
export GOPATH=$HOME/go
$ source .bash_profile

3)プログラムの作成

app.goを作成。

$ cd ~/go
$ mkdir hello
$ cd hello
$ vim app.go
package main

import (
  "fmt"
)

func main() {
  fmt.Println("Hello, Golang!")
}

4)動作確認

$ go run app.go

【Go入門】Echoを使ってみた - Webフレームワーク

1)Echoフレームワークの取得

※(現時点で取得したバージョンはv3.2.1)

# お決まりの「go get」 で取得
$ go get github.com/labstack/echo

# プロジェクトディレクトリの作成&移動
$ cd $GOPATH/src
$ mkdir sample
$ cd sample

2)Echoを使ったページを作る。

page.goというファイルを作成

package main

import (
  "net/http"
  "github.com/labstack/echo"
)

func main() {
  e := echo.New()
  e.GET("/", func(c echo.Context) error {
      return c.String(http.StatusOK, "Hello, World!")
  })
  e.Start(":5050")
}

3)「go run」&ブラウザでアクセス

$ go run page.go

↓のように表示されたら
⇨ http server started on [::]:5050

URLにアクセス
http://localhost:5050



簡単♪

【AMP】スマホページが要らなくなる?WordPressとの連携方法

AMPとは、「Accelerated Mobile Pages」のことで
GoogleTwitterが協同で策定したプロジェクト。

詳細については、以下のサイトさんがよくまとまっている。

qiita.com

AMPについて検索してみると
AMPは「カルーセルのみに表示される」のように
書いているサイトさんも見受けられるが
現在は通常の検索結果でもAMPが表示されている。

「渋谷 イタリアン」で検索した例)
f:id:Thoames1212:20170829044205p:plain

AMPでは外部Javascriptが使用できないため
リッチなサイトの作成は難しそうだが

などのコンポーネントは使えるため、
オーソドックスなサイト作成には、問題ないと思われる。

AMPの広告対応も、Adsenseだけではなく

  • A8net
  • AccessTrade
  • ValueCommerce

なども対応しているようだ。

[参考]
amp-ad / amp-embed – AMP

WordPressでのAMP作成方法

AMPの作成方法には

の方法がある。手っ取り早く使いたい場合は
プラグインが良いだろう。

記事作成時点では以下のWordPressプラグインが存在するが
AMP」のプラグインがメジャーっぽい。
※記事作成時のGithubのスター数で比較。「AMP」が1009、「AMP for WP」が61

[AMP]
ja.wordpress.org

[AMP for WP]
wordpress.org

[AMP]を使用する前提で書くが
デフォルトのデザインは簡易なものなので
CSSの変更は必須。

<?php

add_action( 'amp_post_template_css', 'amp_base_css' );

function amp_base_css( $amp_template ) {
    echo file_get_contents(get_stylesheet_directory_uri() .'/amp-base.css');
}

その他以下のような変更がフィルターを設定するだけで可能だ。

Feature画像の非表示
<?php

add_filter( 'amp_post_template_data', 'xyz_amp_remove_featured_image' );

function xyz_amp_remove_featured_image( $data ) {
    $data['featured_image'] = false;
    return $data;
}
コンテンツ幅の変更
<?php

add_filter( 'amp_content_max_width', 'xyz_amp_change_content_width' );

function xyz_amp_change_content_width( $content_max_width ) {
	return 1200;
}
Schema.orgメタデータの変更
<?php

add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
		'height' => 60,
		'width' => 600,
	);

	return $metadata;
}

詳細は以下のリンクを参照
GitHub - Automattic/amp-wp: WordPress plugin for adding AMP support