2016-11-27

Google Analytics Certification Examの受験方法

こんにちは、emilyです！

Google Analytics Certification Exam（Google アナリティクス個人認定資格（GAIQ））の受験方法を書いておきます。

1. 試験を受けるために、下記ページよりGoogle Partnerのアカウントを作ります。

（英語で受験する場合）

www.google.com

（日本語で受験する場合）

Google Partners

2. JOINボタンを押した後、左のメニューからAnalyticsを選びます。

3. ページ右端にあるTake Examをクリックして受験します。

試験時間：９０分

問題数：７０問

合格ライン：８０％

なお、certifiedのステータスを維持するためには１８ヶ月ごとに試験を受け直す必要があります。

私も今年中に受験予定なので、追って詳細を報告します。

それでは！

2016-11-18

Zen Cart日本語版のインストール

ZEN CART

こんにちは、emilyです！

話がいろんなところに飛びまくって申し訳ないのですが、今回はzen cartのインストール方法について書いておきます。

アメリカで英語サイトの依頼の場合は、アメリカのサーバーのワンクリックインストールでzen cartの設置が終わる場合が多いのですが、日本だとそうもいかない場合が多いですよね？（きっと）

というわけで、レンタルサーバーに日本語版zen cartをマニュアルインストール（手動インストール）する方法です。独自のドメインがあり、MySQLにアクセスできる環境であることを前提として説明していきます。

ソースファイルを公式サイトからダウンロード
解凍後、サーバーにアップロード
ファイルのパーミッションを変更
ブラウザ上でインストールファイルにアクセス
データベース情報を入力
Zen Cartインストール終了！

STEP1. ソースファイルを公式サイトからダウンロード

まずは、ソースファイルをZen Cart日本語公式サイトからダウンロードします。

ダウンロード - Zen Cart 日本語公式サイト

現在の最新バージョンは、v1.5.1 ja（正式版）です。

STEP2. 解凍後、サーバーにアップロード

zc-v1-series-151-ja.zipという名前でzip保存されているので、解凍して、zc-v1-series-151-jaのフォルダ内のファイルをすべて、FTPなどを利用してサーバーのディレクトリにアップロードします。このディレクトリはオンラインショップを公開するときのURLと対応します。（以下、ソースファイル一覧です）

f:id:emily-web:20161118060551p:plain

STEP3. ファイルパーミッションの変更

以下の２つのファイル名を変更し、パーミッションを変更する。

/catalog/includes/dist-configure.php

/catalog/admin/includes/dist-configure.php

ファイル名を configure.php にして、パーミッションを 777 (read-write-execute for all)に変更。

さらに、以下のディレクトリもパーミッションを777に変更。

/catalog/cache
/catalog/images
/catalog/includes/languages/english/html_includes
/catalog/media
/catalog/pub
/catalog/admin/backups
/catalog/admin/images/graphs

以下のディレクトリ、サブディレクトリもパーミッションを777に変更。

/catalog/images/attributes
/catalog/images/dvd
/catalog/images/large
/catalog/images/large/dvd
/catalog/images/medium
/catalog/images/upload

STEP4. インストール

さて、準備が整ったら、いよいよインストールします。

ブラウザで　/zc_install/index.php　　を開きます。

例）ドメインが、xxx.comでルートにソースファイルをアップロードした場合なら、

http://xxx.com/zc_install/index.php　　

以下のようなスクリーンが表示されます。

f:id:emily-web:20161118072534p:plain

「続ける」ボタンを押して、次のページのライセンス規約内容に同意後、さらに「続ける」ボタンをクリック。

次のサーバー設定確認ページの一番下にある「インストールボタン」をクリック。

f:id:emily-web:20161118072846p:plain

データベース設定

f:id:emily-web:20161118073535p:plain

画面の指示に従って、インストールを進めていき、下のようなメッセージが表示されたら、インストール自体は完了です。

f:id:emily-web:20161118114727p:plain

ただ、さらに３つ作業があるので忘れないうちにしておきましょう。

１．サーバー上で、zc_installフォルダ名を変更、または、削除しておく。

　　これは、間違って上書きインストールなどをしてしまわないようにするためです。

２．adminフォルダを好きな名前に変更する。

　　これは、セキュリティ上の脆弱性を避けるためです。

３．以下のファイルのパーミッションを644（または444)に変更

　　/catalog/includes/configure.php
　　/catalog/admin/includes/configure.php

これで、一通りインストール＆後処理が終わりました。サイトを確認して、管理画面にログインできるか確認してみてください。

次は、データを入力して、カスタマイズしていきます。

2016-10-26

Chromeに入れておきたいExtension

便利なサービス

こんにちは、Emilyです。

このページでは、WEB開発・マーケティングに便利なChromeブラウザーのExtensionを紹介していこうと思います。随時アップしていきます。

What font

chrome.google.com

開発中に、あれ？ここのフォント何が使われてたっけ？とか、このサイトのフォント読みやすいけど、何だろう？というとき、ページ上で、右クリック＞Inspectでフォントファミリーを調べることはできますが、もっと手軽にできたらいいですよね！

このExtensionを入れておけば、テキストの上でマウスオーバーするだけで、どのフォントタイプが使われているか教えてくれます！

Nimbus Screenshot and Screencast

chrome.google.com

(PCを使用している人は、）

PrintScrキーで、スクリーン全体のスクリーンショット

Alt + PrintScrキーで、アクティブウィンドウのスクリーンショット

が、取れますよね。しかし、アクティブウィンドウのさらに一部だけ・・・となると、一度とったスクリーンショットをさらに切り取る必要がありますよね。

この、Extensionがあれば、その場で欲しい部分だけスクリーンショットがとれます。さらに、スクリーン上の動作をビデオで保存することも可能です。クライアントさんに管理画面の操作を教えるときに、これで操作をビデオ保存して見せれば、スクリーンショット画像＋言葉で説明するよりわかりやすいのでとても便利です！

Keywards Everywhere

chrome.google.com

こちらは、WEBマーケティングで便利なExtension。グーグルの検索結果表示の際、そのキーワードがどのぐらい検索されているかを表示してくれます。

2016-10-26

レスポンシブサイトで、埋め込みビデオをリサイズ

レスポンシブ/CSS CSS

こんにちは、Emilyです。

あるサイト作成時、iframeで埋め込んだビデオが、デスクトップではきれいにレイアウトに収まっているものの、スマホでみるとびろーんとオーバーサイズしてました。

Youtubeは自動でリサイズされてたのですが、それ以外のソースのものが。

そこで、以下の方法で自動的にリサイズされるように修正を加えました。

www.smashingmagazine.com

少し前の記事ですが、役立ちます！

2016-10-19

はじめてのオブジェクト指向プログラミング

PRESTASHOP CMSページでHTMLタグとJavaScriptを使えるようにする方法

PRESTASHOP

こんにちは！Emilyです。

PrestaShop(ver.1.6）では、CMSページを追加する際、デフォルトでは限られたHTMLタグしか使えません。

今回、質問フォームを作って、その回答結果によって商品を紹介する機能を追加したかったので、CMSページで、FORMタグやJavaScriptを使えるように、少し変更を加えました。

その方法を紹介します。

まず、CMSのデフォルトのHTMLエディタは、tinyMCEが使われており下のような感じになっているかと思います。

f:id:emily-web:20161018064650g:plain

２つのファイルを編集します。

① まず、TinyMCSのエグゼファイル。

パスは、/js/tinymce.inc.js 　または　 /js/admin/tinymce.inc.js

このファイルの中身をすべて、以下の内容に書き換えます。

function tinySetup(config)
{
    if(!config)
        config = {};
  
    var editor_selector = 'rte';
    //if (typeof config['editor_selector'] !== 'undefined')
    //var editor_selector = config['editor_selector'];
    if (typeof config['editor_selector'] != 'undefined')
        config['selector'] = '.'+config['editor_selector'];
  
        //safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview
        default_config = {
        selector: ".rte" ,
        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",
        toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",
        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 
        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",
        toolbar4 : "visualblocks,|,charmap,|,hr,",
             
        external_filemanager_path: ad+"/filemanager/",
        filemanager_title: "File manager" ,
        external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
        extended_valid_elements: 'pre[*],script[*],style[*]', 
        valid_children: "+body[style|script|iframe|section],pre[iframe|section|script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
        valid_elements : '*[*]', 
        force_p_newlines : false, 
        cleanup: false,
        forced_root_block : false, 
        force_br_newlines : true,  
        convert_urls:true,
        relative_urls:false,
        remove_script_host:false,
           
        menu: {
            edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
            insert: {title: 'Insert', items: 'media image link | pagebreak'},
            view: {title: 'View', items: 'visualaid'},
            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
            table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
            tools: {title: 'Tools', items: 'code'}
        }
  
    }
  
    $.each(default_config, function(index, el)
    {
        if (config[index] === undefined )
            config[index] = el;
    });
  
    tinyMCE.init(config);
  
}
  
$().ready(function() {
   tinySetup(); 
});
 
 
これで、エディタ自体は置き換えられます。
 
次に、PrestaShop自体にある編集の際のタグ制限を外します。

②　ファイル＆パスは、/classes/Validate.php 
public static function isCleanHtml($html, $allow_iframe = false) { $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
$events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
$events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
$events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
$events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
$events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
$events .= '|onselectstart|onstart|onstop'; if (preg_match('/<[\s]*script/ims', $html) || preg_match('/('.$events.')[\s]*=/ims',
$html) || preg_match('/.*script\:/ims', $html)) return false; if (!$allow_iframe && preg_match('/<[\s]*(i?frame|form|input|embed|object)/ims',
$html)) return false; return true; }
 
上記のファンクションを以下の内容に書き換えます。
public static function isCleanHtml($html, $allow_iframe = false) { return true; }
保存して、サーバーへアップロードすれば、今までのtinyMCEがExtended versionになり、さらにFORMタグやJavaScriptも利用可能になります。
 
最後に、iFrameタグの使用に関しては、もう一つ設定が必要になります。
管理画面のpreferences > general　で、選択肢を　Yes　に設定してください。
以上です。
 
それでは、また！
 
 
 
 
 
 