ブロガー向けのアフィリエイトツールを作りました。

Blogtools

Amazon APIを使ってブログ用に作ったのがこのサイト。ブログを書く際に載せる書籍やガジェットのリンクをもっと簡単に載せられないものか、複数、商品をのせられないものかと試行錯誤してとりあえずこしらえました。

動作はHTML5が動作するIE9以上もしくはSafari,Google Chrome,Firefoxなどで確認済み。IE8は疑。中身はPHP+jQueryベースで出来ていてStyle付きのHTMLソースを出力してくれるのでブログのHTML編集・投稿画面にコピペすればそのまま使えます。

アフィリエイト、アソシエイトIDを入れて検索しないとデフォルトのIDが振られるようになっているのでそこだけ注意していただければと思います。

今後は要望などあれば機能追加などもしていきたいです。

  • Web制作の現場で使う+jQueryデザイン入門+(WEB+PROFESSIONAL)
  • jQuery+Mobile+スマートフォンサイト+デザイン入門
  • Webデザイナーのための+jQuery入門 魅力的なユーザーインターフェースを手軽に作る+(Books+for+Web+Creative)
  • jQuery+Mobile+ポケットリファレンス
  • jQueryデザインブック 仕事で絶対に使うプロのテクニック
  • つくって覚えるjQuery入門
  • jQuery+UI%2B厳選プラグイン41+実践サンプル集

linked by blog-tools

スティックタイプのインスタントティ、ticolino。

KURIMO(クーリモ)  ギフトサイト

Lightbox 1327826159691

昨日見つけたスティックタイプのインスタントティ、「ticolino」。

スティックの形をしているので熱いお湯にティーパックがすべて浸るようなことがなく、そのままかき回せばいいのでスプーンいらずなところが◎。

Lightbox 1327826246934Lightbox 1327826338722Lightbox 1327826622160

肝心な味はすごくおいしいこともまずいこともなく、そして苦みが少なくのみやすいお茶。

メーカーはアメリカのセレンゲティ社で茶葉は中国産。日本では楽天などで手に入ると思います。(¥1,500〜)

私は有楽町のJALプラザで見つけました(¥1,800/18袋)。

毎日飲むには少々お高い・・・来客用?にぜひ。

カラーパターン、マッチングのテスト



カラーパターンテスト, originally uploaded by cdbk.

5月ぐらいのリリースを目指して、仕事の合間と週末でひたすら作っているサイトで使う色?キーカラーのテスト用に作ったドットのカラーパターン。

1秒ごとにランダムに切り替わる用にプログラムを組んでいるのでずっと見ているとチカチカシマス。

どんな内容のサイトかは、まだ公表できませんが、今のところスマホ向けに考えております。

興味のある方は連絡いただければベータ版リリース時にお知らせします。

EvernoteからWordPressに投稿する方法。

Evernoteにブログのネタを書き溜めたりする方は多いと思うのですが、共有からブログへアップロードといった機能がないのでどうしようかと思っていたところ、とりあえずコピペで記事だけでも出来ないかと思い、試してみました。
結論としてはあっさりコピペで記事を貼付けることが出来るようで、この記事もEvetnoteからコピペで更新してみました。
欠点としては文章が<p>ではなく<div>で区切られるため、レイアウトを考慮するためには、投稿記事の表示エリアの<div>に対してCSSで指定をする必要があるところ。
それ以外は画像も表示されているので問題なさそうでした。
もしかするとアメブロなども可能かもしれません(試していないのでわかりませんが・・・)
普段はMarsEditを使って記事を書いているのですが、Evernoteがあれば思いついたときにすぐ記事を書き始めることが出来便利ですね。

スマートフォン向けサイトのブラウザー確認でinitial-scaleを考慮する

スマートフォン向けサイトを作る際、手間がかかるのがブラウザーでの確認。

実機で見るのが一番なのですが、すぐ見たいときはFireFoxのアドオン、FireMobileSimulatorとDefault Full Zoom Levelを使って確認をしています。

FiremobileSimulatorでUserAgent偽装とウインドウ幅の指定ができ、これだけでも十分なことがほとんどなのですが、パソコンのブラウザー内ではViewportのinitial-scale、画面の拡大縮小の設定が考慮されないため、Default Full Zoom Levelを使って表示幅を拡大、縮小させて確認しています。

FiremobileSimulatorの説明は検索をするといろいろ出てくるので割愛して今回はDefault Full Zoom Levelについて少し触れたいと思います。

FireFoxのアドオンサイトからインストールしたあと、そのままではブラウザーのツールなどに表示されないので、FireFoxの表示→ツールバー→カスタマイズを押してツールバーのアイコンを設置するためのウインドウを開きます。

Caps01

 

その後、Default Full Zoom Levelのアイコンをツールバーにドラッグして適用すればすぐに使える状態になります。

Caps02

 

一般的なスマートフォン向けサイトではintial-scaleを1~0.6で設定するので必要な場合は必要な設定を追加した上で表示を確認します。

Caps03

 

パソコンでの確認をベースに制作と進めてしまうと完成後にフォントサイズに違和感を感じたり、文字の改行がおかしくなったりしやすいので、それを未然に防ぐ意味でも拡大、縮小を、できればスマートフォン上でも文字のサイズ変更ができるので(Androidの場合など)一度形になった時点で確認することをお勧めします。

 

Webページのテスト表示にDropBoxをつかう

Dropbox

昨年末から本格的にDropBoxを使い始め、Web制作で何かと便利な代物だということに気づいてしばらく、Webページで使うjQueryなどの動作確認にDropBoxのPublicフォルダを活用してみることにしました。

DropBox Automatorというツールを使えば、自動的にアップすることもできるのですが、常に更新されるわけではないので、難しいことは一切せず、デフォルト機能のpublicフォルダに制作しているページと使っているデータ一式をコピペ。あとはコピペしたページを右クリック→DropBox→「パブリックリンクのコピー」。

そしてアドレスバーに貼り付ければ確認することができます。

CSSなどで絶対パスを使っていると同じディレクトリ構成にしないといけないので見れない場合もありますが、jQueryなどでデザイン、レイアウトを整形している場合などに活躍してくれます。

余談ですが、DropBoxに日ごろ入れているのは、

  • 複数の端末で使いたいダウンロードファイル
  • 制作中の制作データ
  • 制作、更新が必要なWebサイトのデータ
  • HTML5ベースのテンプレート(HTML5,js,cssのセット)
  • 外出先で使うこまごまとしたデータや画像(地図やQRコードなど)
  • スマホで使う着信用の音楽データ など

デザインは大画面のデスクトップですることがほとんどですが、コードはラップトップでやることが多くなり、記事のまとめなどはほとんどEvernoteでするようになりました。

Dropbox ×Evernote があれば外出先や移動中でもラップトップがあれば作業できるので重宝しています。ちなみにドコモのスマホユーザーならEvernoteのプレミアムプランが1年間無料で使えます。

http://db.tt/Jcjoz049 このアドレスからDropboxを登録してもらうともれなく2GB+250MBの容量で始めることができるのでこれからという人はぜひ!

2011年のWebデザイン関連ブックマークまとめのまとめ。

2011年のWebデザイン関連で役立ちそうな記事やブックマークを集めたサイトをいくつか見たのでブックマーク的に記事にしました。

今後も見つけ次第、時折更新すると思います。

2011年総まとめ:ウェブ制作に役立つエントリーBest 20(coliss)

2011年・個人的に参考になったWeb制作向けの国内記事リスト(かちびと.net)

2011年よくブックマークされた15のエントリー(Webpark)

ツイッター9月~12月のつぶやき まとめ 9/1 ~ 12/31 2011(Web Design RECIPES)


合間で見つけたので取り急ぎ。

Google Readerにはてブのタグ検索結果を登録しておくとトレンド的な記事はつかみやすいと思います。

このほかにもこんな記事あるよ!といったところはコメントorこの記事のTweetにRTでコメントなどしていただければと思います。

 


2011年振り返り

2011年は新しいことがいろいろはじまった1年でした。

スマートフォン、タブレット向けのサイト制作

2月から携わっている仕事でPC/スマホ/タブレットの3デバイス向けにサイトを作る機会があり、それを通じてXHTMLからHTML5へのシフトとPHPのみでやっていたデータ処理をある程度jQueryなどを使ってJavaScriptに。そしてCSS3を組み合わせてインタラクティブな動きのあるサイトを作る機会が少しずつ増えてきました。

そのおかげもあり年賀サイトは2010などのFlashではなくHTML5+jQueryのアニメーションで実装しています。

プライベートでもスマホを使うようになった

3月11日、オフィスから自宅へ歩いて帰るとき、同僚の持っていたiPhoneのマップが非常に役に立ったことと、仕事でスマートフォンの実機が必要だったこともありMEDIASに機種変。Galaxyシリーズなどグローバルモデルのような安定感は無いものの、FelicaでマクドナルドのクーポンやEdyが使えたり、会社帰りにワンセグでサッカーの試合を観戦できたり、そしてもちろんカメラも画像加工からソーシャルネットワークのサービスへ投稿までできるのでかなり重宝してます。

そして仕事柄インターネット回線が複数あった方がいいなと思っていたのでWiMAXを導入。自宅でネットが回線の故障でつながらないときや出先、帰省先でもネットにつながり、場所を選ばず仕事ができるようになりました。実際は移動中、iPod touchでいろいろチェックするようになったのでMEDIASを使う頻度が減ったことが一番大きな変化。

ソーシャルネットワークサービス、クラウドサービスの浸透

Facebookを使うことが多くなったこととスマートフォンと連携して撮影した写真をFlickrで自動保存したり、facebookで共有したりといったコミュニケーションが円滑になっていたところと、最初はSugerSyncを、その後Pogoplugを使いはじめ、HDDを持ち歩くこと無くネット経由でデータのやり取りが出来るようになったので、ノート一台あればどこでも仕事ができるようになっています。

MacBook→MacBook Airへ

約5年間使っていたMacBookからMacBook Airへスイッチ。13インチから11.6インチと画面は小さくなるものの解像度は広くなるので以前より作業はしやすくなりました。ただ、今まで500GBでトリプルブートをしていたものを64GBでデュアルにしたので本体には大量にデータを入れておくことは出来ず、結果として、クラウドサービスを使うようになりました。格段に薄くなったのでブリーフケースやバッグに入れても嵩張らないところが◎。

2011年よく使ったガジェット、サービス

facebook
mixiよりも実際に関わる人々とコミュニケーションが取りやすい。映画、「ソーシャルネットワーク」と3.11でより身近になった。

lightbox(アプリ)
カメラ機能とソーシャルサービスへの投稿機能がついたAndroid向けのアプリ。カメラ機能のクオリティが高かったのですが、今はカメラ機能のみ別のアプリになり、QuickSnapという名前で現存。

4ポートUSB充電器
スマートフォンやiPadやWiMAXのモバイルルーター など1A強の電流が必要なガジェットが増えたので4ポートで2A出力が可能なUSB充電器を2種類使っています。microusbのコードが少し厄介で500mA対応のものだとスマートフォンは充電できない場合があるのでブーストしてくれるガジェットをかますか、500mAを超える出力が出来るものが便利です。

 

 

Google Chromeでテキスト編集できるエディタ(SourceKit + DropBox)

Srckit

MacBook Airでコーディングする際、DreamWeaverでもできるのですが、モニターが小さいのでメインのウインドウ以外のプロパティなどのウインドウが邪魔になることもしばしば。
なのでいろいろ使えそうなエディタを探している中で見つけたGoogle Chrome 上で動くアプリ「SourceKit」。このアプリはファイルをアップロードしたりすることができないため、別途DropBoxのアカウントでDropBox上のファイルにアクセスする必要があります。

上の画像のようなレイアウトで左側が階層、右側がソースでソースのテキストや背景の色はいくつかテーマがあって選ぶことが出来ます。

Google Chromeにログインすればどこでも使え、軽いので簡単な編集などはこれで十分だと思います。

 

2012年もよろしくお願いいたします。

Nenga2012cdbk

2012年、よろしくお願いいたします。

今年の年賀状は「明るく、楽しく」がコンセプトでWeb用にアニメーションにした作品が上のデザイン。

昨年の2月から始まった仕事でスマートフォンやタブレット向けのデザインやマークアップを毎日するようになり、おかげさまでFlashと同じような動作をiPhoneやiPadでも魅せることが出来るようになりました。

業界の動きを見ていても今年はHTML5をベースとしたアプリケーションが次々と出てくる年になると思うので、このブログなどでいいアプリをどんどん紹介できればと考えています。

また、スマートフォン・タブレット(Android,iOS)向けのWebサイトを作る際のご相談も承っておりますのでこちらもよろしくお願いいたします。

 

掲載サイト

クリエイティブな2012年新春特設サイトまとめ