2017-03-16

ヒートマップ一覧

f:id:sntkk3:20170722173613p:plain

< 目次 >

ヒートマップを利用する

ヒートマップを利用する

「ヒートマップ」ってご存知ですか？

ヒートマップとは？
サイト訪問者がページのどこを見ているのか、
暖色(多)←→寒色(少)で表すツールです。
サイト運用者にとっては、サイトの解析ツールとして役立ちます。

以下、ヒートマップのサービス一覧をまとめてみました。

無料でも使えるサービス

無料ヒートマップ解析ツール User Heat : どこが読まれているか見えるアクセス解析 :
http://userheat.com/

【無料】ヒートマップ分析ツール - MIERUCA（ミエルカ） :
https://mieru-ca.com/heatmap/

ヒートマップ - [無料]GA連携でらくらくセグメント別分析｜brick : https://www.brick.tools/applications/heatmap/

スマホからPCまで解析できるヒートマップツールとは｜Ptengine : https://www.ptengine.jp/

自作しようと思う時に参考になる情報

ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法（heatmap.js＋Milkcocoa） | Milkcocoa Engineers' Blog :
http://blog.mlkcca.com/frontend/heatmap-with-milkcocoa/

はてなブログユーザーなら使いたいヒートマップツール「Ptengine」

以下記事が参考になります。
こんなのがあったとは嬉しい！

ヒートマップツール「Ptengine」がはてなブログ限定特典で無料で使える - 攻めは飛車角銀桂守りは金銀三枚 : http://www.fair-skinned-monster.com/entry/2017/01/06/070000

Ptengine（外部サービス） - はてなブログヘルプ :
http://help.hatenablog.com/entry/partners/ptengine

WordPressでヒートマップを使おうと思う時に参考になる情報

wordpress プラグイン『Ptengine』が超便利すぎる！アクセス解析やら色々できるよ！ | ブログマーケッターJUNICHI :
https://junichi-manga.com/plugin-ptengine/

2017-03-14

Google Apps 更新日自動入力

Webアプリ Webアプリ-Google Webアプリ-Google-Google Apps

f:id:sntkk3:20190114102859p:plain

更新日自動入力機能をGoogle スプレッドシートに追加

Google スプレッドシートは、最近仕事でチーム利用することが多くなりました。

今日は、スプレッドシートで管理している表中の値が更新された場合、その更新日を記録したいとのメンバー要望により、該当行に最終更新日が入るスクリプトを設定しました。

スクリプトは下記記事を参考にさせていただいております。

【参考記事】

[超簡単] spreadsheetを更新したら自動で更新日付を入れるGAS - Qiita : http://qiita.com/Yamotty/items/888ae6f93a05a8cfc16f

手順

1. Google スプレッドシートを起動
2. メニューの「ツール」-「スクリプトエディタ」を選択
3. エディタに下記コードを入力
4. トリガーを「値の変更」で設定します。(下図参照)
⇒　これで、値を更新した行にその最終更新日が設定されます。

サンプルスクリプト紹介

[コード]

function insertLastUpdated() { 
  var ss = SpreadsheetApp.getActiveSheet();  
  var sheet_name = ''; 
  sheet_name = ss.getName(); 
  //Browser.msgBox(sheet_name);   
  var currentRow = ss.getActiveCell().getRow();  
  var currentCell = ss.getActiveCell().getValue();  
  var updateRange = ss.getRange('A' + currentRow) //更新日をいれる列をstringで指定。この場合はA列 
  var str = "注意点" 
  Logger.log(updateRange); 
  //更新日の記入 
  if (str.indexOf(sheet_name) == -1) { 
   if(currentRow>4){  
    if(currentCell) {  
      updateRange.setValue(new Date()); 
    } 
   } 
  } 
}

[トリガー]
f:id:sntkk3:20170722184744p:plain

(2019/01/14 追記)
補足説明：
上記スクリプトでは、
「注意点」という名前のシート以外で、5行目以下で値が入力・変更された場合、その行のA列に更新日を自動設定するという動作を実現しています。
なので、入力行が5行目より上、あるいは、もっと下の場合、
if(currentRow>4){
の 4の数字を適宜変更してください。

また、更新日時を設定したいシートが複数あるうちの特定のシートのみの場合、
if (str.indexOf(sheet_name) == -1) {
の箇所を書き換えて以下のようなスクリプトにします。

function insertLastUpdated() { 
  var ss = SpreadsheetApp.getActiveSheet();  
  var sheet_name = ''; 
  sheet_name = ss.getName(); 
  //Browser.msgBox(sheet_name);   
  var currentRow = ss.getActiveCell().getRow();  
  var currentCell = ss.getActiveCell().getValue();  
  var updateRange = ss.getRange('A' + currentRow) //更新日をいれる列をstringで指定。この場合はA列 
  var str = "注意点" 
  Logger.log(updateRange); 
  //更新日の記入 
  if (sheet_name === "注意点") { 
   if(currentRow>4){  
    if(currentCell) {  
      updateRange.setValue(new Date()); 
    } 
   } 
  } 
}

"注意点"のところはここでのシート名を表しているので、ここを必要なシート名に適宜変更してください。

[結果]
バッチリ、思った通りの動作となりました。

2017-03-08

【CSS3】アニメーション(ゆらゆらバナー)

HTML/CSS HTML/CSS-CSS3

ECサイト設置用 CSS3のアニメーションバナー

ECサイト設置用にCSS3のアニメーションバナー、
作りました。 ※以下はDemo用ダミーです。

f:id:sntkk3:20170406231359p:plain

Demo

以下、サンプル用のソースを共有します。

<style> 
/*   基本設定   */ 
html, body { 
  margin: 0; 
  padding: 0; 
} 
body { 
  font-family: 
  'Hiragino Kaku Gothic ProN', 
  Meiryo, sans-serif; 
  font-size:16px; 
  -webkit-text-size-adjust: 100%; 
} 
img{ 
  border-width:0px; 
} 
.article{ 
  font-size:16px; 
  line-height:170%; 
} 
/*記事・カテゴリ中の画像調整*/ 
img.slide_arrow { 
  max-width:100%; 
  height:auto !important; 
} 
/*   レイアウト設定   */ 
#arrowbutton { 
  float: left; 
  box-sizing: border-box; 
  background-color:#fff; 
  border-radius: 4px; 
  margin-bottom: 30px; 
} 
.clear{ 
  clear:both; 
} 
/*** ゆらゆらアニメーションバナー設定 ***/ 
@-moz-keyframes skew_button { 
0% { -moz-transform: skewX(9deg); } 
10% { -moz-transform: skewX(-8deg); } 
20% { -moz-transform: skewX(7deg); } 
30% { -moz-transform: skewX(-6deg); } 
40% { -moz-transform: skewX(5deg); } 
50% { -moz-transform: skewX(-4deg); } 
60% { -moz-transform: skewX(3deg); } 
70% { -moz-transform: skewX(-2deg); } 
80% { -moz-transform: skewX(1deg); } 
90% { -moz-transform: skewX(0deg); } 
100% { -moz-transform: skewX(0deg); } 
} 
@-o-keyframes skew_button { 
0% { -o-transform: skewX(9deg); } 
10% { -o-transform: skewX(-8deg); } 
20% { -o-transform: skewX(7deg); } 
30% { -o-transform: skewX(-6deg); } 
40% { -o-transform: skewX(5deg); } 
50% { -o-transform: skewX(-4deg); } 
60% { -o-transform: skewX(3deg); } 
70% { -o-transform: skewX(-2deg); } 
80% { -o-transform: skewX(1deg); } 
90% { -o-transform: skewX(0deg); } 
100% { -o-transform: skewX(0deg); } 
} 
@-webkit-keyframes skew_button { 
0% { -webkit-transform: skewX(9deg); } 
10% { -webkit-transform: skewX(-8deg); } 
20% { -webkit-transform: skewX(7deg); } 
30% { -webkit-transform: skewX(-6deg); } 
40% { -webkit-transform: skewX(5deg); } 
50% { -webkit-transform: skewX(-4deg); } 
60% { -webkit-transform: skewX(3deg); } 
70% { -webkit-transform: skewX(-2deg); } 
80% { -webkit-transform: skewX(1deg); } 
90% { -webkit-transform: skewX(0deg); } 
100% { -webkit-transform: skewX(0deg); } 
} 
@-moz-keyframes skew_arrow { 
0% { -moz-transform: translateX(0px); } 
45% { -moz-transform: translateX(20px); } 
50% { -moz-transform: translateX(25px); } 
55% { -moz-transform: translateX(20px); } 
95% { -moz-transform: translateX(0px); } 
100% { -moz-transform: translateX(0px); } 
} 
@-o-keyframes skew_arrow { 
0% { -o-transform: translateX(0px); } 
45% { -o-transform: translateX(20px); } 
50% { -o-transform: translateX(25px); } 
55% { -o-transform: translateX(20px); } 
95% { -o-transform: translateX(0px); } 
100% { -o-transform: translateX(0px); } 
} 
@-webkit-keyframes skew_arrow { 
0% { -webkit-transform: translateX(0px); } 
45% { -webkit-transform: translateX(20px); } 
50% { -webkit-transform: translateX(25px); } 
55% { -webkit-transform: translateX(20px); } 
95% { -webkit-transform: translateX(0px); } 
100% { -webkit-transform: translateX(0px); } 
} 
.a-btn { 
position: relative; 
display:block; 
width:100%; 
max-width:600px; 
padding:10px; 
padding-left:10%; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
margin-left:auto; 
margin-right:auto; 
} 
.shake 
{ 
-webkit-animation-duration:2s; 
-moz-animation-duration:2s; 
-ms-animation-duration:2s; 
-o-animation-duration:2s; 
animation-duration:2s; 
-webkit-animation-timing-function: ease-in; 
-moz-animation-timing-function: ease-in; 
-o-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-ms-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
margin-left:auto; 
margin-right:auto; 
z-index: 8; 
-webkit-animation-name: skew_button; 
-moz-animation-name: skew_button; 
-o-animation-name: skew_button; 
animation-name: skew_button; 
width:90%; 
} 
.slide_arrow { 
position: absolute; 
top:30%; 
left:-5px; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s; 
-webkit-animation-timing-function: ease-in; 
-moz-animation-timing-function: ease-in; 
-o-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-ms-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
-webkit-animation-name: skew_arrow; 
-moz-animation-name: skew_arrow; 
-o-animation-name: skew_arrow; 
animation-name: skew_arrow; 
z-index: 9; 
width:20%; 
max-width:100px; 
} 
.a-btn:hover img{ 
opacity:1; 
} 
p { 
    display: block; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
} 
</style>

<div id="arrowbutton"> 
<p><a class="a-btn" href="#" target="_blank" rel="nofollow"><img class="slide_arrow" src="画像ファイル01" alt="" width="100"><img class="shake aligncenter" src="画像ファイル02[f:id:sntkk3:20170406231359p:plain]" alt="" width="500" height="120"></a></p> 
</div><!--#arrowbutton-->

バナーデザイン　参考サイト

ついでにと言っては何ですが、
以下、バナーデザインの参考になるサイトです。

バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ） :
http://aka-design.sub.jp/bd/

2017-03-07

Webサイト解析の第一歩、Google Analyticsの設置・導入方法

Webサイト分析 Webサイト分析-Google Analytics Webアプリ Webアプリ-Google Webアプリ-Google-Google Analytics

今日は、新しく作ったサイトに Google Analytics を設置するなどの作業を行っておりました。

Google Analyticsとは

　
公式サイト： https://analytics.google.com

Googleが提供するアクセス解析ツールのことです。
サイトに導入(※)すると、サイト訪問者の動向・属性などを知ることができるようになる、とても便利なマーケティングツールです。

※トラッキングコードと呼ばれる専用のコードをサイトに埋め込むと、自身のAnalyticsサイトで各種データを確認することができるようになり、サイトの効果測定・改善に大いに役立ちます。

有料版もありますが、無料からでもサイト分析に充分すぎるほどのデータが得られます。

たとえば、アナリティクスの収集結果から、次のようなことが明らかになります。

例).

どれくらいの人がサイトに訪問しているか
どのページがどれくらい閲覧されているか
どういったデバイスからサイトが閲覧されているか
サイトを訪問しているユーザー属性(年齢層、性別)はどうか
サイトの滞在時間はどれくらいか

など、

では、以下よりその設置方法についてお伝えします。

取得・設置方法

前提：Googleアカウントが必要です。

1) トラッキングID・コードの取得

1. ブラウザで以下アドレスにアクセス
https://analytics.google.com

2. Googleアカウントでログイン

3. Googleアナリティクス使用開始申し込みを実行(初回のみ)

　 f:id:sntkk3:20171029181352p:plain

4. 設置サイトのための新しいアカウントを作成

4.1. 以下必要項目を入力
　　 f:id:sntkk3:20171029182819p:plain

　　①アカウント名　　　　　：　好きなアカウント名を設定
　　②ウェブサイトの名前　　：　サイトタイトル
　　③ウェブサイトのURL　　：　サイトのURL(http://は入力不要)
　　④業種　　　　　　　　　：　サイトのジャンルを設定
　　⑤レポートのタイムゾーン：　「日本」を設定

　　「データの共有設定」は初期設定のままでOK　

　4.2. 「トラッキングIDを取得」ボタンをクリック
　　 f:id:sntkk3:20171029183511p:plain

5. 利用規約確認画面の内容を確認し、「同意」ボタンをクリック
　 ※利用規約画面左上の国名で「日本」を選択すること

　以上を経て、晴れてトラッキングID、トラッキングコードの取得完了です。

2)トラッキングコードをサイトに設置

1. 以下管理アイコンをクリックし、管理画面を表示
　 f:id:sntkk3:20171029184630p:plain

2. 先程作成したアカウントのプロパティで「トラッキングコード」をクリック
　 f:id:sntkk3:20171029185025p:plain

3. 「ウェブサイトのトラッキング」にある、トラッキングコードをコピー

4. 設置したいサイトのheadタグ終了直前の箇所に貼り付け

　設置は以上で完了です。

補足

　上記設置作業に問題がなければ、設置から1～2日後にはサイトのデータが確認できるようになります。
　
　ちなみに、このはてなブログの場合、
　ダッシュボード＞設定＞詳細設定＞解析ツールの「Google Analytics 埋め込み」にトラッキングIDを入力するだけで設置完了です。
　
　以上、ご参考まで。

2017-02-16

CSSのみで簡単実装ハンバーガーメニューの作り方

HTML/CSS

f:id:sntkk3:20170722153324p:plain

スマホサイトでおなじみ、ハンバーガーメニュー

今日は、CSSのみで実装可能、
開閉動作付きハンバーガーメニューを作成しました。

f:id:sntkk3:20170711230110p:plain

Demo

以下、このたびのソースを公開しておきます。

ソース公開

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<script></script>

</head>
<body>
<div id="search">
<h2 class="search">条件を選んで絞り込む</h2>
<input type="checkbox" name = "checked"class="menuopen" id="checked">
      <div class="codecontent">
        <fieldset class="members">
          <legend>条件</legend>
          <ul>
            <li><input id="members01" type="checkbox" name="members[]" value="members01"><label class="check" for="members01">条件1</label></li>
            <li><input id="members02" type="checkbox" name="members[]" value="members02"><label class="check" for="members02">条件2</label></li>
            <li><input id="members03" type="checkbox" name="members[]" value="members03"><label class="check" for="members03">条件3</label></li>
            <li><input id="members04" type="checkbox" name="members[]" value="members04"><label class="check" for="members04">条件4</label></li>
          </ul>
          <span class="select">
          <select name="members_sp">
            <option value="members_all">こだわらない</option>
            <option value="members01">条件1</option>
            <option value="members02">条件2</option>
            <option value="members03">条件3</option>
            <option value="members04">上記以外</option>
          </select>
          </span>
        </fieldset>
      </div><!--.codecontent-->
</div><!--search-->
</body>
</html>

CSS

<style>
ul {
  list-style: none;
}
/******************** search ********************/
#search {
    width: 100%;
    margin: 0;
    padding: 15px 0 2px;
    background: #bafef8;
    box-sizing: border-box;
}

#search h2.search{
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 26px;
  font-weight: bold;
  padding: 16px;
  margin: 0 auto;
  position: relative;
  width: 800px;
}

#search h2.search:before {
    content: "";
    border: 15px solid transparent;
    border-top: solid 20px #fff;
    position: absolute;
    left: 20px;
    bottom: -35px;
}
/***************** menuopen button ********************/

/*@media screen and (max-width: 480px){*/

#search_form{
  width: 90%;
}

div.codecontent {
  display:none;
}

#checked:checked ~div.codecontent {
  display:block;
}

input.menuopen {
  display: block;
  position:absolute;
  top: 48px;
  right: 60px;
}


/*チェックボックスを消す*/
.menuopen {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-width: 0;
    width: 0;
    height: 0;
    outline:0;
}
.menuopen:focus{
    outline:0;
}

.menuopen:before,.menuopen:after{  
    position: absolute;
    content: "";
    display: block;
    height: 8px;
    width: 40px;
    border-top-style: solid;
    border-bottom-style: solid;
}
.menuopen:before{
    top: 2px;
    border-top-width: 4px;
    border-bottom-width: 2px;
    border-color: #000;
}
.menuopen:after{    
    top: 16px;
    border-top-width: 2px;
    border-bottom-width: 4px;
    border-color: #000;
}

/*閉じるボタン*/
.menuopen:checked:before, .menuopen:checked:after {
    top: 14px;
    height: 0;
}

.menuopen:checked:before {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}

.menuopen:checked:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

</style>

《参考サイト》

jQueryを使った開閉式スライドトグル＆フェードトグル（slideToggle, fadeToggle） – Diglog :
http://diglog.org/javascript/943.html

CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ | NxWorld :
http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

メニューの三本線「ハンバーガーメニュー」を HTML と CSS だけで実装する方法 :
https://jquery.nj-clucker.com/humberger-menu-by-html-css/

ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」！｜ Web Design Magazine :
http://webdesignmagazine.net/html-css/hamburgers/

CSS3とjQueryで作る「開閉に合わせて×ボタンに変化させる」ハンバーガーメニュー | クリエイタークリップ :
https://creatorclip.info/2015/06/css3-jquery-hamburger-menu-cross-mark-toggle/

2017-01-27

【CSS3】transparent で右向き三角を表現する

HTML/CSS HTML/CSS-CSS3

f:id:sntkk3:20160411101626j:plain

CSSで右向き三角ボタンを作る

transparentを使って下のボタンを作ってみました

f:id:sntkk3:20170717135833p:plain

ECサイトなどに使えそうなボタンです。
備忘録として、ソースを記載します。

[ソース] html

<a href="#" class="see_detail">詳細を見る</a>

[ソース] css

a.see_detail {
  width: 160px;
  font-size: 16px;
}
.see_detail::before {
  content: "";
  /* width: 0; */
  /* height: 0; */
  border: 10px solid #fff;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  /* left: 5px; */
  margin-top: 5px;
  display: inline-block;
}
.see_detail {
  font-weight:bold;
  text-decoration:none;
  color: #FFF;
  font-size: 12px;
  display:block;
  text-align:center;
  vertical-align: middle;
  margin-top: 70px;
  padding:6px 0 8px;
  background-color:#01991a;
  border-radius:6px;
  float: right;
}

[捕捉解説]このしくみについて

以下で使われている「transparent」について

border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;

透明を意味する「transparent」という言葉通り、
transparentには、対象を透明化するという機能があります。

今回のような図形の場合、
下図のように、上(top)、下(bottom)、左(left)、右(right) 4つの三角形が存在するものと考えます。

f:id:sntkk3:20170717150900p:plain

この時、それぞれの三角形はborderで表されているものとします。
この考え方から、
右向き三角形を作るには、左側の三角形のみを残す。
つまりは、それ以外のtop、right、bottomを消す（透明化）する必要があります。
そのため、結果として、以下のようなコードになります。

border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;

2017-01-05

【近況】 Webデザイナーとして転職しました

日記

2017年より、広告代理店勤務、Webデザイナーとして新たな一歩を踏み出しました。

職業訓練校でのWeb制作科卒業後から2年半、
その間はなかなかWebデザイナーとしての就業の機会が得られず、訓練校前と同様、システム開発の仕事に携わっていました。
（Web制作については、その間、独学を続けながら、個人で受託したりしておりました。）

気長に機会を待った甲斐あり、これでようやくフルタイムでWeb制作に携わることができます。

Web制作での日々の学び、気づきなどをシェアしていこうと思います。
どうぞよろしくお願いいたします。

（2014年7月に制作科受講終了以来、
その後の活動は、「まだまだ続くよ…」でと告知していましたが、
やっぱり引き続きこちらで続きを投稿します。

どうぞよろしくお願いいたします。）

2015-11-15

MACにGoogle日本語入力を入れてみました

デバイスデバイス-MAC

f:id:sntkk3:20170718224122p:plain

Google日本語入力をインストールしました。

以下、手順を記載します。

1. 以下サイトより、プログラムファイルをダウンロードします。www.google.co.jp

2. 以下、ダウンロードしたプログラムファイルをダブルクリックし、インストーラを起動します。
GoogleJapaneseInput.dmg

3. プログラム実行確認画面で「続ける」をクリックします。

4. インストール先を指定します。（通常はそのままでも可）
アプリケーションの登録が開始されます。
f:id:sntkk3:20151123094706p:plain

5. パスワード入力を求められたら入力し、「Google日本語入力の有効化」で「有効」にします。
f:id:sntkk3:20151123094721p:plain

6. インストールが完了します。
f:id:sntkk3:20151123094740p:plain

2015-07-12

Surface 3 購入：感想 / Surfaceのファンクションキーを使いやすく設定する

f:id:sntkk3:20151212115047j:plain

Surface3を購入しました。

まずは、その感想です。

1) 感想

[ 良かったこと ]
タブレットとPCの両方の性質を兼ね備えていること。
スペックがそんなに良くなくても、意外とWeb制作にも使えてます。
軽い！
薄い！
キーボードはなかなか快適！

[ イマイチだったこと ]

1. タッチパネルの反応
タッチパネルの反応は今ひとつ( iPhone, iPad 程に反応は良くない)
キーボードが使えるので、さして問題なく使えているが、タッチパネルだけだとストレス感じそう。

2. 電池の消費
電源をもっていない時に限り、スリープ状態だったSurface上で勝手にSecure Boot Control 機能が働いて電池消費しており、いざ使おうとした時に電池残量わずかになっていて焦ることしばしば。
この機能をオフにすれば良いかもしれないが、それはそれで心配だし、困ります。

3. Kindle ソフト
これだけの画面サイズがあれば、電子書籍リーダーとして、iPadの代用になると思ったのに。。。
なぜ、大幅に余白がぁ～！！
なので、書籍画面がちっちゃい！この点は大いに残念。ぜひ改善を求む。

2) Surfaceのファンクションキーを使いやすく設定する

Surfaceのファンクションキーは、初期設定のままだと通常のWindowsと同様にファンクションキーが機能してくれません。

ということで、以下記事を参考に、ファンクションキーを使いやすく設定してみました。

【参考記事】

Surface Pro 2のキーボードでハマりやすい点「日本語入力時にファンクションキーで変換しづらい」（Type Cover） :
http://dtp.jdash.info/archives/Surface-Pro-2-Type-Cover-Function-Key

2015-04-30

【本】PHPによるWordPressカスタマイズブック―3.x対応

WordPress 本

PHPによるWordPressカスタマイズブック―3.x対応

著者 : 藤本壱

ソシム

発売日 : 2010-09

ブクログでレビューを見る»

WordPressをカスタマイズするにあたり、
特に、カスタム投稿タイプ、カスタムフィールドの利用について参考にしたくてこの本を購入しました。

購入時点ですでに絶版のため、中古本での購入。
WordPressのバージョンも少し古かったため、Custom Post Type UI（プラグイン）の画面もその時点の実際の画面と異なる点があるなどして、最初少々戸惑った点はありましたが、内容的にはとても充実しています。

WordPressの基本としては、バージョンを重ねても今のところ、大きく異なる点はないと思われるため、多少のUIに違いが出てきたとしても、今後も長く役立つ一冊だと思います。
※サンプルファイルのダウンロード特典が利用可能なのも嬉しい点です。

WordPressを自由にカスタマイズしていくうえで、知っておくべきWordPressの特徴、しくみが丁寧に説明されています。

価格についても、この本の場合、中古本となるため、探せば1,000円以下での購入が可能。

なので、かなりお値段以上、
WordPressのカスタマイズをしてみたいという方には、おすすめの一冊です。

2015-02-24

2015/02/24 Excelのセル内改行をいっぺんに取り除く方法は？

ソフトウェアソフトウェア-Microsoft ソフトウェア-Microsoft-Excel Webアプリ Webアプリ-phpMyAdmin

【本日のWeb制作学習メモ】

ひとつ前の記事の関連となりますが、
phpMyAdmin で CSVインポートがうまく行かなかった原因の一つに、
元データとして受け取っていたExcelシートにセル内改行が含まれていたという問題がありました。

数百件に及ぶデータの中からセル内改行を一つ一つ見つけては修正、なんてことはとてもやっていられませんでした。

では、いっぺんにセル内改行を取り除く方法は？

Excelのセル内改行を削除するには

[Ctrl] + [J] キーで OK

1. [Ctrl] + [H] キーで、「検索と置換」ダイアログを表示

　検索する文字列：　[Ctrl] + [J] と入力
　置換後の文字列：　何も入力しない

2. 「すべて置換」ボタンをクリック

これでシート内のセル内改行はすべて削除されました。

myweb-way2.hatenadiary.jp

2015-02-23

2015/02/23 phpMyAdminを用いてCSVファイルでインポートする方法

Webアプリプログラミングプログラミング-PHP プログラミング-SQL Webアプリ-phpMyAdmin

【本日のWeb制作学習メモ】

phpMyAdminを用いてCSVファイルでインポートする方法（覚書）

CSVデータの読み込みに意外と手こずってしまったので、、、ということでの覚書です。

いろんなサイトを参考にさせていただきながら試行錯誤した何とか成功。

なお、実際にうまく行った際の設定は、こんな感じ
f:id:sntkk3:20151123174732p:plain

以下参考にさせていただいたサイト一覧です。

参考サイト一覧

phpMyAdminで、csvデータをインポートする方法。 | Wataame Frog :
http://wataame.sumomo.ne.jp/archives/4613

wataame.sumomo.ne.jp

phpMyAdminでCSVファイルのインポート | PHPの種ブログ :
http://www.php-seed.net/blog/archives/39

phpMyAdminでCSVファイルをインポートする手順 | メモヲカキコム :
http://memo.wokaki.com/import_csv_phpmyadmin/

Excelから出力したCSVファイルをphpMyAdminからインポートする - ITコンサルタント成長録 :
http://d.hatena.ne.jp/hosikiti/20090130/1233316430

d.hatena.ne.jp

phpmyadmin の　インポートの方法 :
http://tsuttayo.jpn.org/bbs/read.php?FID=2&TID=96

phpMyAdmin CSVファイルをインポートする -でじうぃき :
http://onlineconsultant.jp/pukiwiki/?phpMyAdmin%20CSV%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B

phpMyAdminを用いてCSVファイルでインポートする方法（覚書）｜ KSデザイン工房の日々 :
http://ks-d-k.com/ks_blog/?p=266

EXCELで作成したデータをmySQLに取り込もうと、csv形式で保存し… - 人力検索はてな :
http://q.hatena.ne.jp/1295871030

myweb-way2.hatenadiary.jp

2014-12-28

2014/12/28 jQueryのプラグイン「DataTables」を使ってみた

プログラミングプログラミング-JavaScript プログラミング-JavaScript-jQuery

DataTables とは、

HTMLテーブルをとっても高機能にしてくれる jQueryのプラグイン

たとえば、以下のような機能がとっても簡単に実装できます。

テーブルヘッダにソート機能を付け、列ソートができます。

フィルター機能で、検索がとっても簡単にできます。

1ページに表示する行数を選択でき、指定行以降は、ページングで表示することが可能です。

（作成例）　こんな感じになります　
f:id:sntkk3:20151115214723p:plain

（すべてHTMLで作成しているテーブルはもちろん、SQLデータベースから読み込んでいるテーブルにも使えます。）

プラグインの入手先は、ここ
http://datatables.net/index
です。

各種パラメータを設定することで、いろいろと便利にカスタマイズが可能です。

設定の仕方には、以下ページがとっても参考になります。

参考サイト

HTML テーブルをナイスに扱う DataTables 〜導入編〜 - A Memorandum :
http://etc9.hatenablog.com/entry/20121029/1351513986

ちなみに、課題練習で、大量データを扱うテーブルを作成する際、
このサイトに紹介していただいているようなサンプルCSVデータは、助かります。

役立つサイト

vallog: 無料CSVデータ :
http://valvallow.blogspot.jp/2010/04/csv.html

2014-09-09

2014/09/10 RSSフィードをサイトに実装する

プログラミングプログラミング-JavaScript プログラミング-JavaScript-jQuery

RSSフィードを簡単にサイトに表示するには

Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法

Google Feed APIを使うと、簡単にRSSフィードをサイトに表示することができると知りました。
試しに、自身のブログサイトからfeed用URLを取得し、やってみました。

[コード]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
    var feed = new google.feeds.Feed("http://times-diary.hatenablog.com/feed");
    feed.setNumEntries(10);
    feed.load(function(result) {
        if (!result.error) {
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                $("#ret").append(
                    $("<div>").append(
                        $("<a>").attr("href", entry.link).text(entry.title))
                );
            }
        }
    });
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="ret"></div>
</body>
</html>

[表示結果]
f:id:sntkk3:20151115204100p:plain

※なお、はてなブログの場合、自身のブログサイトURLに、/feed あるいは、/rss　を追加するとそのままフィード用URLとなることも知りました。
　feed は　Atom配信フォーマット
　rss は、RSS2.0フォーマット
との違いなんだそうですが、どちらを使っても表示上は変わりませんでした。

　参考：
　　はてなブログのRSS配信URLは２つあった！ - tarのブログるっ by @tarVolcano :
　　http://tar.blogru.me/entry/2014/04/03/024738

参考サイト

Google Feed API Developer's Guide | Google Feed API | Google Developers :
https://developers.google.com/feed/v1/devguide

JavaScript - Google Feed APIを使おう - Qiita :
http://qiita.com/sassy_watson/items/e3797b8719c51d25c190

【Google Feed API】フィードを読み込む（お手軽版） | Tips Note :
http://www.tam-tam.co.jp/tipsnote/javascript/post5010.html

【JavaScript】コピペで簡単!!Google Feed APIの使い方 | Web制作会社スタイル :
http://www.hp-stylelink.com/news/2014/05/20140508.php

その他　参考記事

簡単！RSS（XML）を取得&表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold :
http://zxcvbnmnbvcxz.com/jquery-google-feed-api/

2014-09-05

2014/09/05 本日のWeb道　学習メモ

日記ソフトウェアソフトウェア-XAMPP Webアプリプログラミングプログラミング-PHP プログラミング-SQL デバイスデバイス-MAC

【本日のWeb制作学習メモ】

MACを使いこなす（ファンクション編）
jQueryを使ったWebページ制作
mysql 文字化け対応

1. MACを使いこなす（ファンクション編）

WindowsからMACを使うようになって困ったこと

Windowsでは普通に使えていた入力変換ができない！？

Windowsでは、以下のような文字変換機能が使えて便利でしたが、
MACでは、そうはいかない。

《Windowsのファンクションキーでの変換機能》
[F6]キー：　ひらがな変換
[F7]キー：　カタカナ変換
[F8]キー：　半角英数変換
[F9]キー：　全角英数変換
[F10]キー：半角英数変換

Windows同様に、文字入力を簡単にするにはどうすれば！？
MACを使い始め、意外とストレスを感じる点でした。

ちなみに、MACのファンクションキーは、デフォルトではこんな感じ。

F1 - ディスプレイの輝度を下げる
F2 - ディスプレイの輝度を上げる
F3 - Mission Control
F4 - Launchpad
F5 - キーボードの輝度を下げる
F6 - キーボードの輝度を上げる
F7 - 前のトラック
F8 - 再生／一時停止
F9 - 次のトラック
F10 - 消音
F11 - 音量を下げる
F12 - 音量を上げる

参照記事：
FunctionFlip 2.2.3 - ファンクションキーの振る舞いをキーごとに設定 :
http://www.macsoft.jp/posts/view/1001

ただ、Windows同様の変換機能は、[Fn]キーを同時に使えばできることが分かりました。
また、「環境設定」で、「F1,F2などすべてのキーを標準のファンクションキーとして使用」にチェックを入れることで、[Fn]キーを押さなくても、Windows同様にファンクションキーを使えることも判明。

参照：
Windowsからmacへの移行で困った事 :
http://winmac.iinaa.net/page1.html

Macのファンクションキー設定をWindowsに合わせて標準の動作に変更する方法 :
http://www.starlod.net/mac-function-key.html

おまけ：
Macの英数・カタカナ変換はファンクションキーではなくControlキーを使う｜mattintosh note (跡地) :
http://mattintosh.blog.so-net.ne.jp/2012-07-15_mac_english_katakana_convert

ちなみに、調べてるうちに、以下の様な便利なソフトがあることも分かりました。

[便利なフリーソフト]
FunctionFlip 2.2.3 (E)
http://www.macsoft.jp/posts/view/1001

2. jQueryを使ったWebページ制作

jQuery使用時 - ミスの原因

WebページにjQueryを挿入して正常に動作しないようなら、以下の点を確認してみる。

スペルミス
記号（かっこ閉じの位置）
重複かっこ
jQueryライブラリ　重複

インターネットに接続できているか　（jQuery web参照時）

3. mysql 文字化け対応

XAMPP環境でMySQLによるDBの値が文字化けという現象発生。
以下の対処法があることを知りました。

[対応方法]
　3.1. my.cnf を編集する

参照記事：
MySQLで文字化けしたときの対処法 - Qiita :
http://qiita.com/WizowozY/items/5d7224be92aa8364a42a

[対応方法]
　3.2. php.ini　を編集する

参照記事：
XAMPP | PHP・MySQLで文字化け :
http://ortk.main.jp/blog/?p=67

ヒートマップを利用する

無料でも使えるサービス

自作しようと思う時に参考になる情報

はてなブログユーザーなら使いたいヒートマップツール「Ptengine」

WordPressでヒートマップを使おうと思う時に参考になる情報

更新日自動入力機能をGoogleスプレッドシートに追加

手順

サンプルスクリプト 紹介

ECサイト設置用 CSS3のアニメーションバナー

バナーデザイン 参考サイト

Google Analyticsとは

取得・設置方法

1) トラッキングID・コードの取得

2)トラッキングコードをサイトに設置

補足

スマホサイトでおなじみ、ハンバーガーメニュー

ソース公開

HTML

《参考サイト》

CSSで右向き三角ボタンを作る

[捕捉解説]このしくみについて

以下で使われている「transparent」について

Excelのセル内改行を削除するには

関連記事

phpMyAdminを用いてCSVファイルでインポートする方法（覚書）

参考サイト一覧

関連記事

DataTables とは、

参考サイト

役立つサイト

RSSフィードを簡単にサイトに表示するには

Google Feed APIを使って、簡単にRSSフィードをサイトに表示する方法

参考サイト

その他 参考記事

1. MACを使いこなす（ファンクション編）

2. jQueryを使ったWebページ制作

jQuery使用時 - ミスの原因

3. mysql 文字化け対応

更新日自動入力機能をGoogle スプレッドシートに追加

サンプルスクリプト紹介

バナーデザイン　参考サイト

その他　参考記事