2016年4月5日火曜日

WEB製作に知っておくと便利な「正規表現」

難しそうですが知っておくと便利です

二桁の数字を検索するための正規表現

\d{2}

三桁の数字を検索するための正規表現

\d{3}
投稿者 時刻: 0 件のコメント:

カスタマイズ簡単なシンプル構造のタブメニューを見つけた！

オーダーフォーム改造のためのタブメニューをあれこれ模索中ですが
どれも一長一短。
CSSでガチガチにデザインしてあるものは、HTMLの構造に無理があったり。
jQueryを使ったものでも、項目を増やすことが難しかったり・・・

前回のポストの時点でベストかなぁと思ってたタブメニューですが、ようやくシンプルなものが見つかりました。

CSSでのカスタマイズも簡単。
おまけに項目を増やすのもクラス名を追加するだけでできちゃうなかなかのすぐれもの。

今回見つけたのはこちらのエントリー。
いや、マジ感謝っす。

[jQuery] ものすごくシンプルなタブメニュー

タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result jQuery [code language="js"] $(function() { $(".tab li").click(function()...
デモはこちら



This is the content of TAB 1.
This is the content of TAB 2.
This is the content of TAB 3.

サンプルコードは下のような感じ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
* {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tab_menu_box {
text-align: center;
}
ul.tab_menu {
list-style: none;
margin-left: auto;
margin-right: auto;
}
ul.tab_menu li {
background-color: #f2f2f2;
color: #666;
cursor: pointer;
display: inline-block;
width: 100px;
}
ul.tab_menu li:hover {
color: #FF0000;
}
ul.tab_menu li.active {
background-color: #999;
color: #fff;
}
div.tabContent {
width: 300px;
display: none;
margin-left: auto;
margin-right: auto;
border: thin solid rgba(201,201,201,1.00);
}
div.active {
display: block;
-webkit-animation: fadein 1s linear 0s 1;
}
label {
width: 100%;
display: inline-block;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
 @-webkit-keyframes fadein {
 0% {
 opacity:0;
}
 100% {
 opacity:1;
}
}
</style>
</head>
<body>
<script type="text/javascript">$(function() {
    $(".tab_menu li").click(function() {
        var num = $(".tab_menu li").index(this);
        $(".tabContent").removeClass('active');
        $(".tabContent").eq(num).addClass('active');
        $(".tab_menu li").removeClass('active');
        $(this).addClass('active')
    });
});</script>
<div class="tab_menu_box">
  <ul class="tab_menu">
    <li class="active">
      <label >
        <input type="radio" name="use"  checked />
        NO1</label>
    </li>
    <li>
      <label >
        <input type="radio" name="use"   />
        NO2</label>
    </li>
    <li>
      <label >
        <input type="radio" name="use"   />
        NO3</label>
    </li>
  </ul>
</div>
<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>
</body>
</html>

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2016年4月4日月曜日

jQueryを使ったラジオボタンでタブ切り替え

ネットショップのオーダーフォームをリニューアルしようと思い、ラジオボタンを使ったタブメニューの切り替えをいろいろ模索してたところようやく簡単シンプルなものが見つかったのでメモ。

参考にしたのは下のリンク先の情報

ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた

トップページ > WEB製作 > ラジオボタンの選択値によってテーブルの内容を変更するスクリプトをjQueryで組んでみた 久々にjQueryネタでも。 本当にちょっとしたものなのですが、意外と使えそうなのでポストしてみます。 概要はタイトルにもある通り、ラジオボタンの選択値によって、指定したテーブルのTRタグ（無論DIVでも）の表示・非表示を変更し、内容を操作するというものです。 ラジオボタンの checked はスクリプトの仕様上、必須です。 では、切り替えるスクリプト。 まず最初に removeClassで表示させます。ラジオボタンに checked がない場合は、TRが3つ、普通に表示されてしまうので注意。 で、次にラジオボタンの値によりしかるべし TR に invisible クラスを与えるだけです。 テーブルでなく、DIV タグにしたい場合は、テーブルタグではなく div で書き、セレクタを tr の内容ではなく、div　にしてしまえば、ほぼそのまま流用可能。 (1)の trigger は、画面の初期表示時にイベントを自動実行させるためのものです。 この場合は、チェーンメソッドにして、change 自身を実行させています。便利。
上記のサイトではtableタグを使っていたので、それをDIVタグに変更。
あと項目が３つだけだったので１０個増やして全部で１３個のメニューから呼び出せるようにしました。

CSS周りは全然いじっていませんけど、デフォルトではクラス名「.invisible」が必須でほかは自由にデザインできるので適当に変更しちゃってください。
とりあえず全体のソース。
あ、jQueryはバージョン1.xじゃないと動きませんのでそのへんは注意してくださいね。


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryを使ったラジオボタンでタブメニュー切り替え</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('input[type=radio]').change(function() {
        $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').removeClass('invisible');

        if ($("input:radio[name='tabmenu1']:checked").val() == "1") {
            $('#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "2") {
            $('#tr1,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "3") {
            $('#tr1,#tr2,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "4") {
            $('#tr1,#tr2,#tr3,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "5") {
            $('#tr1,#tr2,#tr3,#tr4,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "6") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "7") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr8,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "8") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr9,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "9") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr10,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "10") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr11,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "11") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr12,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "12") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr13').addClass('invisible');
        } else if($("input:radio[name='tabmenu1']:checked").val() == "13") {
            $('#tr1,#tr2,#tr3,#tr4,#tr5,#tr6,#tr7,#tr8,#tr9,#tr10,#tr11,#tr12').addClass('invisible');
        }
    }).trigger('change'); //←(1)
});
</script>
<style>
.invisible {
display: none;
}
</style>
</head>
<body>


<div>
  <label >
    <input type="radio" name="tabmenu1" value="1" id="radio1"  checked />
    NO1</label>
</div>
<div>
  <label for="radio2">
    <input type="radio" name="tabmenu1" value="2" id="radio2"/>
    NO2</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="3" id="radio3" />
    NO3</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="4" id="radio4" />
    NO4</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="5" id="radio5" />
    NO5</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="6" id="radio6" />
    NO6</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="7" id="radio7" />
    NO7</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="8" id="radio8" />
    NO8</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="9" id="radio9" />
    NO9</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="10" id="radio10" />
    NO10</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="11" id="radio11" />
  NO11</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="12" id="radio12" />
    NO12</label>
</div>
<div>
  <label>
    <input type="radio" name="tabmenu1" value="13" id="radio13" />
    NO13</label>
</div>
<div id="tr1">
  <h5>機能</h5>
  <p>1</p>
</div>
<div>
  <div id="tr2">
    <h5>機能</h5>
    <p>2</p>
  </div>
  <div id="tr3">
    <h5>機能</h5>
    <p>3</p>
  </div>
  <div id="tr4">
    <h5>機能</h5>
    <p>4</p>
  </div>
  <div id="tr5">
    <h5>機能</h5>
    <p>5</p>
  </div>
  <div id="tr6">
    <h5>機能</h5>
    <p>6</p>
  </div>
  <div id="tr7">
    <h5>機能</h5>
    <p>7</p>
  </div>
  <div id="tr8">
    <h5>機能</h5>
    <p>8</p>
  </div>
  <div id="tr9">
    <h5>機能</h5>
    <p>9</p>
  </div>
  <div id="tr10">
    <h5>機能</h5>
    <p>10</p>
  </div>
  <div id="tr11">
    <h5>機能</h5>
    <p>11</p>
  </div>
  <div id="tr12">
    <h5>機能</h5>
    <p>12</p>
  </div>
  <div id="tr13">
    <h5>機能</h5>
    <p>13</p>
  </div>
</div>
</body>
</html>

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2016年3月22日火曜日

MacBook Pro に激安互換ACアダプターを使ってみた


MacBook Pro付属の純正電源アダプター「一万円って・・・・」高過ぎるだろ

Apple 60W MagSafe 2電源アダプタ（13インチMacBook Pro Retinaディスプレイモデル用）

Apple 60W MagSafe 2電源アダプタを使えば、13インチMacBook Proに接続して充電できます。
MacBook Protを購入する前から「予備の電源アダプタほしいなぁ」ッて思ってたんですけど、Appleのサイトで探してみたらお値段「一万円」です。
さすがにこれは高すぎでしょ。
Lenovoのアダプタなんて純正でも￥５０００程度でっせ。
っていうかね、電源アダプタまでこだわって作るのはいいと思うよ。
でもね、電源アダプタって消耗品チックなところあるじゃないですか。
下着みたいなもんじゃないですか！
必須だけど一生モンってわけじゃない、みたいな。
そんな下着が一万円。ダメです。ゼーったいダメ
こんな値段じゃ予備なんてお気軽に買えねーじゃん！

Amazon様。互換アダプタの出番です。


electown Apple アップル magsafe2 60W 電源アダプタA1465/A1425ACアダプタ MacBook Pro Retinaディスプレイモデル13インチ対応 Ｔ字高品質 バルク品【１年保証】

●超小型・軽量タイプのアップル用ACアダプタ。 ●ケーブルをスッキリまとめることができできます。かなり便利だ。 ご使用中のノートPCに対応したACアダプタをもう1個用意することで、ACアダプタ の持ち運びを不要にする。 例えば自宅に純正のACアダプタを 置いておき、会社や学校などの出先に本製品を置いておけば、移動中にACアダプタを持ち運ぶ必 ...
と、いうわけで互換アダプタの出番です。
Amazonで「MAGSAFE ６０w」で探すと幾つか候補が上がってきて、その中でも一番安かったのがこれ。
お値段￥２０００。純正の五分の一で手元にお届け。翌日お届け。朝頼めばその日のうちにお届け。
もうAppleなんて知らんもんねーって勢いで買っちゃいました。
ただし、この手の互換アダプタってネットで調べてもいい話が出てきません。
Amazonの他の商品についてるレビューを見ても微妙に不具合多めな感じのことが書いてあったりして、一瞬「え、MacBook壊れちゃうの？や、や、やっぱじゅんせい？」みたいな気分になりがちです。

しかーも、今回紹介した互換アダプタ、商品レビューが全くありませんでした（今は３件のレビューが付いてます。あ、一件は私のレビューです）。ただでさえ不安が募る互換アダプタを更に更に不安にさせるAmazonカスタマーレビュー無し。
正直言うとめっちゃ不安だったんですよ。
ホントに。

結論「Macの互換アダプターは使える」

ま、とりあえず買っちゃえ！お値段五分の一だし！っていう自分の声に押されてAmazonでポチ。
その１ヶ月後、更に追加でポチ。
んで現在に至る・・・

いや、もうね、普通に使えてますよ。これ。

一個は持ち歩き用としてかばんの中に待機。
もう一個は自宅で常駐用として。
どちらも普通にな～んにも問題なく使用中です。




Apple絡みの商品に対するカスタマーレビューが低評価になっちゃう理由

Amazonのカスタマーレビューがあれほど低いのが嘘みたいですが、ほんとに何も問題なく使えてます。
んじゃなぜあそこまでカスタマーレビューの評価が低いのか？
そもそも、レビューを書く動機って、すんごくいい思いをしたか、ちょっとでも不満なところがあった場合だと思うんですよ。
んで、この場合のお客様心理って、どうしても純正レベルの性能とか造作を求めてると思うんですよね。特にApple製品って細かいところまでよくデザインされてるじゃないですか。なので、互換アダプタにもそれを求めちゃってるから「ただ単に充電できるだけじゃダメ！美しくて機能的に！」みたいな期待をしちゃってて、少しでもその理想から離れると「あー！もうなにこれ！コードがちょっと固いジャーン！」ってことになっちゃって「こんなのAppleじゃなーい！あーもーイライラする。こんなのおしゃれなMacBook Proには使えない。使えないもの売りつけて腹が立つー」ってな具合でカスタマーレビューにその腹たちっぷりをぶつけてしまう・・・と。

でもね（いやいや互換だって・・・お値段五分の一の互換だって・・・）って思っちゃうんですよね〜

ワタクシはそこまで期待してなくて、普通に充電できればそれでOKなので、むしろ形までクリソツに作っちゃう業者さんの努力に頭がさがる思いすらいだいちゃうわけでして。
だってね、形なんかもう少し作りやすい形があると思うし、色も白じゃなくていいと思うし、コードを巻き付けるギミックなんていらないと思うし！

ってことで、ワタクシの評価はもちろん五つ星。この値段で充電できる。ってだけで満足ですし、おまけに純正とほぼおなじサイズの同じ形。これはもう大満足でしょ。

そりゃね、ちょこっとコードの色が違ったり、プラグのところのズレとかはありますよ。
でもそんなの気にしない。

ネットショップのお客様は「ちょっと期待しちゃうものを購入する」

自分でも商売やってますが、今回のことで教訓を得ました。
それは「お客様の持っている期待を少しでも上回れば良い評価を得られる」ってこと。
大事なのはお客様の持っている期待がどれほどのものなのかってのをよく考えなくちゃいけないな〜ってことです。
商品に対する期待もそうですし、梱包や対応、アフターサービスも含めて、ちょこっと期待値を上回れば、結構な確率で満足してくれるって思うんですよ。
なので最初からおもいっきり期待させちゃうような売り方はしないで、あんまり期待しないでね〜くらいの感じで購入していただけるように、いろんなバランス取んなくちゃダメなんだよね〜と今更ながらに肝に銘じておく次第でありますよ。

ごまかすことなく、誇張することなく、なるべくあるがままを伝えられるようなお店作りをこれからも心がけていこうと強く感じた互換アダプタでした。



投稿者 時刻: 0 件のコメント:
ラベル: ,

2016年3月20日日曜日

ソーシャルボタンをオリジナル画像で設置してみる

FacebookやらTwitterへの投稿を簡単にするソーシャルボタンを設置してみる

FacebookやらTwitterやらGoogle+などのソーシャルメディアへの投稿を簡単にするボタン。 詳しいことはこちらのリンクを参考にしていただくとして・・・

SNS色々ありすぎ！各ソーシャルボタンの特徴を簡潔にまとめてみた | 株式会社LIG

お疲れ様です。ディレクターの鮫島です。 今年もあと2ヵ月で終わりですね。来月になれば後1ヵ月。1年経てばやはり後2ヵ月です。 そうして人は歳をとり、一生を終えていくのですね。人は死んだら一体どうなるのでしょうか... さて、今回はサイト内に設置されるFacebookいいね等のソーシャルボタンをまとめてみました

よくありますよね。BLOGの投稿の下に並んでるボタン。 これらを自分のサイトにも実装してみました（今までしてなかったんかーい！というツッコミはなしにしてください）。

実はもう少し簡単に設置できるかと思っていましたが、ボタンデザインをオリジナルにしたい場合、思いのほか手間取ってしまったので、前半はデザイン無視の簡単設置の方法、後半でオリジナルボタンイメージでの設置方法を説明してあります。

とりあえずソーシャルボタン設置方法のまとめのまとめ

ソーシャルボタンの設置方法にもいろいろあるらしく、検索して幾つかの方法をざざっと頭に入れておくと後々楽になるかもしれません。 といっても基本的にはボタンに対応するタグを入れていくだけなんですけどね。 なので、今回ソーシャルボタンの設置に関して参考にさせていただいたサイトのリンクです。ここに紹介した以外にもいろいろ見つかりましたが、情報が古くてあまり役に立たない感じでしたので割愛しました。

SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

ソーシャルシェアボタンの設置方法とカスタマイズ方法を初心者向けに説明。コピペで使えるサンプルコードなど。

SNSボタンの設置とカスタマイズ方法 | murashun.jp

SNS ボタン(または、ソーシャルボタン)とは、ブログやニュースサイトに設置されているボタン型のインターフェースです。ユーザが SNS ボタンをクリックすると、記事をシェアしたり、ブックマークすることができます。代表的な SNS ボタンとしては、Twitter や Facebook の SNS ボタンがあります。

ソーシャルボタン設置方法その1
ソーシャルボタンジェネレータを使う方法

簡単なのは一括でボタンの設定までやってくれるサービスを利用すること。 HTMLとかエンコードとかよくわからんから、とにかくボタンだけ作りたい！ってことならこれらのサービスを利用するのが手っ取り早いです。

いいねボタン ツイートボタン ソーシャルボタン まとめて設置

ソーシャルボタン設置を一括まとめてできるツールです。facebook や ツイッター の いいねボタン をホームページ設置してみませんか？その他SNSにも対応可能ですのでご意見宜しくお願いします。

ソーシャルボタン設置方法その2
オリジナルデザインのボタンを使って設置する方法

オリジナルデザインのボタンを使ってソーシャルボタンを設置するには一手間掛ける必要があります。
といってもそれほど難しくはなく、単にリンクコードを設置していけばいいだけなのですが、<a>タグのリンク先に自分のURLを仕込む必要があります。
今回設置した「Facebook」「Twitter」「Google+」「はてなブックマーク」「Pocket」のタグサンプルと今回作成したボタンデータを紹介しておきます。

まずは下準備　自分のWEBサイトURLをボタン用にエンコードしておく

「エンコードってなんじゃい？」って感じですけど、詳しいことは知る必要ないので、URLを<a>タグ内部に書き込むために必要な作業だと思ってください。

URLのエンコードは下記のサイトのジェネレータを利用させて頂きました。
エンコードする場合の文字コードは「UTF-8」を選択してください。

Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト

URLエンコードとデコードを行えるフォームです。変換したい文字列を入力し、変換ボタンをクリックするだけ。

ソーシャルボタンに使用するボタンイメージ

今回は拡大してもシャギーにならない「SVG」形式のイメージを作成しました。
んで、ここでもそれを表示させようと思ったんですけど、BloggerってSVGファイルのアップロードができないんですね・・・
なので、ソーシャルボタンを配布しているサイト紹介しているサイトを紹介しておきます・・・（申し訳ないっす）

facebook,twitter,はてブなどのSNSアイコンがセットになった素材まとめ | NESTonline Blog

皆さんこんにちは、ライターのakirayです。 今回は、SNSアイコンがセットになった素材を紹介致します。 今や印刷物でもwebでもSNSのアイコンが無い制作物を探す方が難しいほど、いたるところでSNSアイコンをみかけます。 いつでも使うものだからこそ、ほんの少しこだわることでセンスよく見せれるようになります。

「Facebook」「Twitter」「Google+」「はてなブックマーク」「Pocket」のタグサンプル

それぞれの<a>タグ内部にある「★★エンコード済みURL★★」の部分を設置したいサイトのURLに置き換えて、テキスト部分を置き換える、またはボタン画像のソースを指定すればOKです。
設置に関してはボタンを<ul>タグでリスト化して<div>タグでボックスを作っておくとCSSでいじる際に便利だと思います。
<a>タグのターゲットはdefaultになってますんで、そちらも「_blank」にするなりなんなりしてください。

Twitter
<!-- Twitter ボタンをオリジナルのデザインにカスタマイズする -->
<a href="https://twitter.com/share?url=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->Twitterでシェアする
<img src="イメージソース" alt="" width="60"/>
</a>
Facebook
<!-- Facebook ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://www.facebook.com/sharer.php?u=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->Facebookでシェアする
<img src="イメージソース" alt="" width="60"/>
</a>
Google+
<!-- Google+ ボタンをオリジナルのデザインにカスタマイズする --
<a href="https://plus.google.com/share?url=★★エンコード済みURL★★f">
<!-- ここに任意のテキストや画像を配置する -->Google+でシェアする
<img src="イメージソース" alt="" width="60"/>
</a>
はてなブックマーク
 <!-- はてなブックマークボタンをオリジナルのデザインにカスタマイズする --
<a href="http://b.hatena.ne.jp/add?url=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->はてなブックマークにブックマークする
<img src="イメージソース" alt="" width="60"/>
</a>
pocketブックマーク
<!-- pocket ボタンをオリジナルのデザインにカスタマイズする -->
<a href="http://getpocket.com/edit?url=★★エンコード済みURL★★">
<!-- ここに任意のテキストや画像を配置する -->pocket にブックマークする
<img src="イメージソース" alt="" width="60"/>
</a>

ソーシャルボタン設置方法は他にもいろいろあるみたい・・・

ソーシャルボタンの設置には今回紹介したHTML埋込み型の他にもJavaScriptを使用したもの（URLの取得が簡単だったりする）とかPHPを使ったものやらいろいろあるみたいです。

残念ながらワタクシは簡単なスクリプトすら理解できていないので今回のようなHTML埋込み型を使うしかないわけですが、もしちょこっとしたスクリプト組めるよ！って人なら、そっちを使ったほうが便利かもしれませんね。
ま、どうやって設置するかより、設置したボタンを使いたくなるようなコンテンツをコツコツ積み上げることが大事なんですけど、こういうちまちました作業が意外と楽しかったりするネットショップ運営なのでした。

投稿者 時刻: 0 件のコメント:
ラベル: ,

2016年2月18日木曜日

Macのファイル整理が超絶やりにくい・・・

表題の件そのまんまです。

ノートPCをMacBook Proに乗り換えてはや一ヶ月。
操作にもなれて、「Windowsノートじゃこうはいかんだろ」ってな便利な部分も感じつつ。（ハード面っていうかい筐体としての操作性は抜群です）
便利な面が多いってのはわかるんですけど、どーしても慣れないのが「Finder」を使ったファイル操作。

こればっかりはWindowsエクスプローラーのほうが完全に上。
もうね、MacのFinderってアホ。

例えば写真の整理するとして・・・

Windowsエクスプローラーの場合フォルダにめがけてそのままドラッグ・アンド・ドロップ



Windowsの場合、エクスプローラーでフォルダの中身を表示させたら
写真なりファイルを選択してそのまま整理したいフォルダにドラッグ・アンド・ドロップ。
ファイルのサムネイルを見るのも簡単だし、表示サイズも自由に選べるし。
選んですぐポンポンほうりこんで行けばOK。
Windowsユーザーなら当たり前って感じなんですけど・・・
Macじゃこうはイカンのです。

Finderでのファイル整理。サムネイルのサイズすらサクッと変えられない・・・


Macでのファイル操作は「Finder」を使って行うわけですが、このFinderが親切なのかなんだかわかんないくらいめんどくさい。

まずファイルのサムネイルの大きさを変えるのが面倒。
いちいちメニューを開いて調節しなきゃいけないわけで、「あ、もうちょっと大きい方が見やすいな」って時にメニューを開かなきゃいけないってのはかなりめんどくさい。
これがWindowsだと、Ctrlキーを押しながらマウスホイールをコリコリやればいいわけですよ。

んで、いざファイルを選んでフォルダに移動するのも、サイドにフォルダの一覧が出ないのでドラッグしたまま移動先のフォルダを探してやらないといけないわけで…

macユーザーってのはこういうとこの不満がないんだろうかと。

結論。ファイルの整理はWindowsの方がはるかにわかりやすい！

ってなわけで、写真も含めてファイルの整理はWindowsエクスプローラの使い勝手にはかないません。macのfinderではストレス溜まりまくりなので、paralleldesktopを起動してWindows上でごにゃごにゃすることにしました


投稿者 時刻: 0 件のコメント:

2016年1月30日土曜日

Macで大きすぎる写真をiPadに送ったら全然見れなくなっちゃった・・・

いつものようにMacBook Proちゃんで作業をしていたんですよ。

んで、新しく製作中のウェブサイトをMacでスクリーンショット撮って、MacからiPadに送って電車の中でチェックしようと思いまして。

Macでブラウザのフルスクリーンショット（っていうのか？）を撮るのは専用のアプリを使えば簡単に撮れちゃいます。

撮ったスクリーンショットは上から下までの長〜い画像。

それをAirDropを使ってiPadに送信。

いざiPadでスクリーンショットを開こうとしたら、なぜか写真アプリがダウン・・・
アプリ自体も開けない状態に・・・

Macから送られてきたスクリーンショットを削除しようにも、アプリが開けないので削除しようもなく、途方に暮れていろいろググってみた結果


iPhoneのカメラロール写真をMacを使ってパッと削除する方法

こんばんは。ちょっと前までiPhoneカメラロールに写真が3,000枚ほど溜まっていた@knk_nです。 2900枚... RT @ akio0911: 皆さん、カメラロールに写真は何枚入ってますか？ - けんけん◎Kensuke Nさん (@knk_n) 3月 19, 2012 今回はiPhoneのカメラロール内の写真をパッと削除する方法をご紹介します。 ...
こちらの情報が見つかりました。

なるほどMac標準のイメージキャプチャってのを使うわけですね。
んで、試したところ、すんなり削除完了！

しかし、Macってのは標準アプリでいろいろできちゃうもんですね・・・
ん？もしかしたらWindowsでも同じようなことできるのか？

ま、いいやｗ
投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2016年1月22日金曜日

アイデアやメモをまとめるのに最適なツール　MindNodeでマインドマッピング

アイデアやメモをまとめるのって結構たいへんだと思うんですよ。

「あ、これ閃いた！」と思い立ってメモを取るとするじゃないですか。
でもあとからまとめようとすると
「あれ、あのメモどこいったっけ？」みたいな・・・

これってスマホとかパソコン使っても同じなんですよね。
どっかいっちゃう系のミスって何使ってもあんま変わんないような。
一番いいのはメモを取るのを何か一つに決めちゃうってことだと思うんです。

システム手帳なんかがまさにそうなんですけど。
今時そんなもん持ち歩いてらんない。
んじゃスマホでさくっと・・・・

って、この「さくっと」ってのが問題ありあり。

Evernote使うにしてもiPhoneのメモ帳使うにしても
さくっとかけるのはいいけど、少し時間が経ったら何をどこに書いたかってのが一覧できないってのが結構問題なわけです。

アプリを開いてもぱっと見一覧できないから、せっかくひらめいたアイデアも生かせないまま・・・
ってこともよくある話。

んじゃ どうすればいいのか。
そこで登場するのがマインドマップ。
一種のメモ術の一つなんですが、これが書きやすいし見やすい。
紙に大きく書いたみたいにあらゆることが一目瞭然。

実際どのくらい役に立つのかどうかはとりあえず使ってもらうとして。

あ、それでアプリは下のMindNodeがおすすめなのです。

MindNode

MindNode makes mind mapping easy. Mind maps are a visual representation of your ideas, starting with a central thought and growing from there. This allows you to brainstorm & organize your thoughts in an intuitive way, so you can focus on the idea behind it.

2016年1月22日追記

iPhoneと、iPadでアプリをアップデートしたら過去に制作したマインドマップが開けない症状が出ちゃってますので対処法をメモしておきます。

MindNode で過去のFileが開けない現象を解消する方法


  1. マップの選択画面で「□」と「↑」が組み合わさったマークをタップ
  2. メニューが出てくるので「バージョンをブラウズ」を選択
  3. 「前のバージョン」の一番上を選択
  4. 「このバージョンを復元しますか？」と出てくるので迷わず「復元」
  5. 「復元中」のくるくるマークが出てくるのでしばらく待機
  6. 復元が成功したらマップがオープンして完成
  7. iOSのアプリで復元したファイルはMacの「MindNode」でもちゃんと開くことができます
なかなか復元作業が終わらないこともありますが、上記の手順ですべてのファイルを復元することができました。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2016年1月21日木曜日

MacにFTPクライアント「FileZilla 」をインストールしたよ　

Macに初めてのFTPクライアントソフトをインストールしてみました

とりあえずダウンロード先を貼っときます

FileZilla

FileZilla download. FileZilla 2016-01-13 14:57:35 free download. FileZilla A fast cross-platform FTP client
投稿者 時刻: 0 件のコメント:
ラベル: , ,

ParallelDesktop11でWindows7からWindows10にアップデートしてみた　たぶん一番簡単な方法で。

私のMacBook ProちゃんにはParallelDesktopがインストールしてあるわけですけど。
クライアントOSとしてWindows７がインストールしてあるのですよ。

ということはやっぱり試してみたくなりますね
Windows10

Windows8は全く興味がわきませんでしたが、Windows10からスタートメニューも復活して、ようやく正統派Windowsって感じになったなぁと。

んで、あれこれ調べてからいざアップデート！
ところがうまく行きません。

あっちゃこっちゃでアップデートが行き詰まってしまいました。

どこでアップデートが躓いたのか

  1. Windows7の更新プログラムがダウンロードされない
  2. Mac上のParallelDesktopのメモリ割り当てが足りない
  3. Windows10の更新プログラムが適用されない

うまくいった方法。たぶんこれが一番簡単

  1. Mac上で余計な常駐アプリは閉じておく
  2. ParallelDesktopにWindows7をインストールする
  3. Windows Updateはしない
  4. Windows7のアクティベーションは済ませておく
  5. MacでWindows10のISOファイルをダウンロードしておく
  6. MacでWindows10のISOファイルをマウントしておく
  7. ParallelDesktopのWindows7からマウントしたWindows10を起動
  8. たぶんセットアップのウィンドウが開くのでそのままインストール

投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2016年1月19日火曜日

Google Chromeを起動するとハングアウトも一緒に起動してきてしまうのをどうにかしたい！

Google Chromeを起動するとハングアウトも一緒に起動してしまうのをどうにかしたいと思ってぐぐってみたところ、意外と簡単な設定で同時起動をストップすることができたので説明します。
  1. ハングアウトを起動したら左上のハンバーガーメニューで設定を開く
  2. 「ハングアウトアプリの設定」項目の中の「Chromeの起動時に〜」のチェックを外す
これで鬱陶しい同時起動をストップすることができます
いや〜カンタンカンタン

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2016年1月17日日曜日

MacBookProがやってきた

思い立ったが吉日と言わんばかりの勢いでアップルストアでポチッとしたMacBook Proちゃん。とうとう我が家にやってまいりました。

ヤマト運輸のオニーサンから受け取った時にはあまりの簡素な段ボール箱にちょいと驚いちゃったんですけどね。なんせ、どこにもAppleの文字はなく、これがなんなのかパッと見わかんないくらい。こんくらいシンプルにしないと、もしかしたら盗まれちゃうこともあるんでしょうかね。

確かにデカデカと「Apple」って書いてあるとなんかの拍子に悪いやつが持って行ってしまうこともあるのかもしれません。

段ボール箱ごときで自社の宣伝なんぞするか！っていうAppleの自信の程が見て伺えます。
ダンボールを慎重に（マジで慎重にカッターナイフで封を切りましたよ）開封。
中からピカピカのMacBook Proちゃん本体のお出まし。

本体が収められていた化粧箱もAppleらしく寸分の狂いもないぴったりサイズの化粧箱でございました。
あんまりぴったりサイズで、蓋を取る時もスーッとゆっくりゆっくり開いていく感じです。ま、どんだけ綺麗なのかは写真を見ていただくとして、とりあえずAppleオンラインでの買い物は最初から最後までほぼ完璧だったっちゅーことで。
箱を開けたら「これでもか〜ってくらいの丈夫な緩衝材にホールドされたMacBook Proちゃん」
緩衝材を外して中身を取り出したところ。ホントきれーだわ
横っちょ。あんまり開けたくないって気持ちにさせるところがさすがアップル
んで正面から対峙　もーね、ものの見事に綺麗なんだわ
ご開帳。燦然と輝くMacBook Proちゃん本体のおでまし
恐る恐る本体を取り出すと、iPhoneなんかでもおなじみのインナーパッケージ
MacBook Proちゃん本体を開いてみたところ。この紙すら売れちゃいそうなくらいだわ
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2016年1月15日金曜日

アップルオンラインストアでMacBook Proを買っちゃった！のでいろいろメモしとこっかなと

なんだか勢い余っちゃった感じはありますが、MacBook Pro買っちゃいました 13.3インチのRetinaディスプレイ搭載 お値段20万円オーバーのかなり高級なパソコンです。 今までWindows一辺倒だった私がMacでっせ。 いや、まあいい、 そんなことはどうでもいい とりあえず買ったんだし。 というわけでメモしとくべきことを書いとこ アップルストアからの連絡はSMSをでやってくる。 これはびっくりしたけど、なかなかいい感じのシステム。 っていうかこれどうやってんでしょ。 もちろんメールでも送られてくるんだけど、SMSだとぱぱっと確認できて便利かも！と思った次第。 この辺は真似したいよなぁッて思う。 さすがアップル。 細かいところまで手を抜かない。
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2016年1月12日火曜日

いよいよMacBookデビューなるか！

絶賛使用中のノートパソコンがいよいよ調子悪くなってきたので買い替えを検討中。

スペックやらiPhoneとiPadと連携考えたら
やっぱMacBook かなぁって

んもー穴が開くくらいApple Storeの写真を見つめてます

airにするか
Proにするか

って
もうほぼ決まってんじゃんな感じ

Macのキーボードに慣れるかなぁ

カバーは付けようかななぁ

着けるなら何色がいいかなぁ

欲しいなぁ…

投稿者 時刻: 0 件のコメント:

2016年1月11日月曜日

ネットショップのWEBサイトを作るのときにゼーったいぶつかる壁にぶち当たった時にチェックしておきたいウェブサイトのリンク

見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話 | たねっぱ！ CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！ CSSの【display table編】プロパティでよく使うものをあつめてみた。(第二回) | たねっぱ！
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2016年1月10日日曜日

Appleのデザインを参考に注文フォームのデザインをリニューアル中

運営しているショップのオーダーフォームを全面改装中なわけです。

参考にしたのがこちらのページ

「Mac Proを購入 - Apple (日本)」

Macプロに限らず、Appleのオーダーフォームは、おそらくカスタマイズ系のオーダーフォームの中ではダントツで世界最高峰のデザインじゃないかと思います。

参考にするったって、なんせ相手は世界トップクラスのデザインを持つ会社。
ソースを参考にすることもほぼ不可能・・・（だってほとんどPHPで構成してあるんだもん）

なのであくまでも参考にする程度なんですけどね。

オーダーフォーム自体は

北海道のWEB制作会社がリリースしている
「メールフォームプロCGI」

こちらを使わせて頂いております。

これをあれやこれやとカスタマイズしていくわけですが、デザインスキルも、技術スキルも素人な私にはホント骨の折れる作業でございますよ。

こんなのお金に余裕があれば、外注一発でできちゃうんだろうけどねぇ・・・
投稿者 時刻: 0 件のコメント:
ラベル: , ,

クラウド移行ほぼ完了かな

昨日から続いたクラウドの移行もほぼ完了

移行したってだけでまだ実作業には入ってませんが、とりあえずお店作りの要であるDREAMWEAVERの設定はOk

これで心置きなくお店作りに励めます。

DREAMWEAVER使えないとなんもできないですからね…

投稿者 時刻: 0 件のコメント:
ラベル: ,

2016年は暖冬なんだってさ

今冬はどうやら暖冬らしいっす

暖冬つったら北朝鮮の核弾頭実験
怖いねぇ

ああいうのやるから自衛隊も強化しなきゃいけなくなるんだろうし

そういや、北朝鮮に脅威はないなんて言ってた共産党の人はどうやって辻褄合わせるんだろ

政治家っていつでも何かしらアピールしなきゃいけないから辛いよね。
本音は違っても

「とりあえずなんか言うとかなあかんやろ
よっしゃ！これでも言うといたろ！」

ってなことを口に出さずにはいられない〜♪

なので、政治家さんの言うことは話1割以下くらいで聞いとくのがいいと思ってます。


ホットな暖冬にホットな弾頭のお話でございました。


投稿者 時刻: 0 件のコメント:
ラベル:

2016年1月9日土曜日

シルエットカメオで使用中のメディア　カッティングステッカー編

シルエットカメオで使用中のメディアをメモしておこうと思います。

今回はカッティングステッカーで使用するメディアです。

あ、メディアってのは、簡単に言うとステッカー用紙のこと。
カッティングステッカーに使うのは薄いプラスティックフィルムなのですが、古今東西さまざまなメーカーから販売されているようです。

メーカーやブランドを羅列しても仕方ないので、とりあえず私が今使用しているものだけ記載しておきます。

ORACAL　651
ドイツののメーカーからリリースされているカッティングステッカー用のメディアです。

とにかくカッティングのミスが少なくて、細かめの文字でもかす取りしやすい！
今まで使用していた。ユーロポート取り扱いのカッティングシートに比べると雲泥の差。
もう戻れません。

ネットではなかなか販売されていませんので、わざわざ北海道のネットショップから購入しています。

北海道からの送料を入れても断然お買い得なお値段もこれまた素敵。

ちなみに購入しているお店はこちらです。

「北海道マーキングフィルム」
http://hmfilm.shop-pro.jp/?mode=cate&cbid=1459246&csid=2

もし、お値段手頃で扱いやすいメディアをお探しでしたら
こちらを是非どうぞ。
投稿者 時刻: 0 件のコメント:
ラベル:

さり気なくプレゼントするのがなにげに嬉しいステッカー作り

シルエットカメオを購入してからステッカー作成が日常の仕事（？）になってしまいました。

ま、これはこれで結構楽しいわけで。

しかもステッカーってのがお客様にも結構評判よくてですね、ちまちま作ってためておくのがなかなか楽しい時間になってます。

今日も空いた時間を使ってギコギコシルエットカメオが稼働してます。

ステッカーを作る手順はだいたい次のような感じ。


  1. Illustratorでデータを作る
  2. DXF形式で書き出し
  3. シルエットカメオ付属のソフト「シルエットスタジオ」で読み込み
  4. サイズやらカッティングの設定を整えて
  5. カッティング
  6. カス取り
  7. アプリケーションシートをかぶせて
  8. 一枚一枚切り出して
  9. 完成
とまあこんな感じです。

データを作って完成まではだいたい1時間ほど。
カッティングするデータにもよりますが息抜きにはちょうどいい時間じゃないでしょか。

作ったステッカーは、小分けの袋に入れてお客様の商品発送の際に同梱しておきます。
HPに大々的に「ステッカープレゼント！」なんてことは記載せず、さり気なく同梱しておくと結構喜んでいただけます。

この「さり気なく」ってのが大事で、「あれやります」「これもプレゼントします！」なんてのが書いてあると結構興醒めしちゃうような気がするのは私だけでしょうかね・・・

運営するお店の商材や対象にするお客様によって喜んでいただけるものは違ってくるとは思いますが、こういうあまり元手の掛からないプレゼントは積極的にプレゼントしていきたいなぁと思っています。
投稿者 時刻: 0 件のコメント:
ラベル: ,

シルエットカメオでうまく切れないときはナイフ本体のゴミづまりを疑ってみよう！




シルエットカメオを使っていて、どうにもうまくカッティングできないなぁって時。
それってたいていゴミづまりですね。
そんな場合はカッターを取り外して、中に詰まったゴミをとってあげると大体解決しちゃいます。

タダね、ナイフ本体が小さすぎて、ゴミが見えない時があるんですよ。
ゴミなのかナイフ本体なのか見分けがつきにくいっていうか・・・

実はこの写真を撮る直前にもやらかしてしまって、一枚￥870+送料のアイロンシートがパー。

あーもったいないことしちゃった。
ピンセットで摘んだあたりをクイッと回すと・・・
ネジになっていてフタが取れます

フタを取るとナイフ本体とボールベアリング
特にナイフ本体の周りがカスで詰まっていることが多いです

投稿者 時刻: 0 件のコメント:
ラベル:

ショップオリジナルグッズを仕入れるならこのお店

http://www.tshirt.st/

お店を始めて、自分のブランドを持つようになるといろいろやりたくなりますよね。

自分専用の名刺とかショップオリジナルステッカーとかはいいとして。
エスカレートしてくると、オリジナルTシャツとか、オリジナルトートバッグとか。

はい、私もこういう工作系大好きなんですよ。
そんな高価なものじゃなくていいんですよね。
ステッカーみたいにたくさん作って配るわけでもないですし。

とりあえずグッズ本体に、プリントしてあればそれらしく見えます。

問題は本体をどうやって手に入れるか。

こういう人のために無地の本体だけを売っているお店があるんですよ。
ま、アマゾンや楽天で買ってもいいですが、ユナイテッドアスレのものに関しては
このお店が一番安いんじゃないかと思います。

ちなみに今回購入したのは

United Athle(ユナイテッドアスレ) | キャンバストートバッグ(中)（ポケ付） | 56%OFF
http://www.tshirt.st/item/2452.html

United Athle(ユナイテッドアスレ) | 4.0オンス コットン ショッピングバッグ | 45%OFF
http://www.tshirt.st/item/4911.html

こちらの商品を二個ずつ。

これにオリジナルのロゴマークを入れて
プレゼントしようと思っています。

あ、こういうの作るときは間違っても売ろうとしちゃダメですよ。
売れるわけ無いですから。

売れたとしても、単価安いので儲かりません
あくまで趣味の延長として楽しむのがいいんじゃないなかと思ってます。
投稿者 時刻: 0 件のコメント:
ラベル: , ,

シルエットカメオ2でアイロンシート あー失敗


シルエットカメオでアイロンシートをカッティングしたのはいいけど、データを反転するのをすっかり忘れてました・・・

ま、気を取り直して再度作成しましたが、アイロンシートは結構高いんすよ・・・
投稿者 時刻: 0 件のコメント:
ラベル: ,

副業サラリーマンのクラウド活用

とりあえず今まではマイクロソフトのOneDriveを使用していました。
ところが同期がうまく行かなかったりやらなんやらでかなりストレスが溜まる機会が多く、これを機にGoogle Driveに乗り換えようかと。

現在使用中のOneDriveのプランは
200GB月額￥304

今度から使用を検討しているGoogle Driveのプランは
100GB月額＄1.99

１GBあたりの単価は若干高いものの
同期の不具合がないのはクラウドを使用する上で絶対外せないと思うんですよね。

あ、もちろんDropboxも検討しましたが、
１TBで月額￥1200

と若干セレブな価格設定。
大容量なのはいいとして、こんなに使いませんし。

現状でも使用容量が70GBほどなので、Google Driveの100GBプランでも充分事足りそうです。

投稿者 時刻: 0 件のコメント:
ラベル: ,

Googleドライブに変更してみました

ワンドライブがあまりにも使えないので
Googleドライブに変更してみました。


プランとか料金は以前のエントリーでもお知らせした通り「100GBプラン一ヶ月＄1.99」なんですが
移行にはかなり時間がかかりました。
っていうかまだ完了してません…

以下、かかった手順と時間のメモ

クラウドにあげるデータの総量は70GBほど

とりあえず、Googledrive専用のフォルダを作成して、Onedriveからファイルを丸ごと移動。
これに約4時間
並行してGoogledriveにアップロード。
これが一晩明けた今でも終わってない〜

といわけでメモにならないようなエントリーで申し訳ないですが、クラウドサービスの移行にはかなり時間がかかっちゃいますので、それなりに余裕があるときじゃないとやっちゃいかんですね。


投稿者 時刻: 0 件のコメント:
ラベル:

ごあいさつ

現在ネットショップを運営しています。
サラリーマンでありながら忙しい合間をぬって運営するコツとか
備忘録とか
いろいろ書いていこうかなと。

忙しい忙しいだけじゃ人生なんもできませんって。

面白い文章じゃないかもしれませんが、そこんとこは勘弁して下さい。
投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)