www.yambal.net

Web制作で細心の注意が必要なのはフィードだ。

製作中のやまじゅん — Thu, 15 Dec 2011 14:13:47 +0000

通勤やちょっとした空き時間には、所謂RSSリーダでネタを探している。

最初、Google Reader（Androidアプリ）を、「なんて便利なんだ」って使ってたんだ。
今でも、ソレはシンプルで明快だから大好きだ。

でもGoogle readerと同期する「Feedly」っちゅうリーダーを使いはじめて、なるほど、これも良いなって使ってるんだ。
雑誌のようにフィードを閲覧できるんだよ。
（描画に少し難があるけど、まあ、耐えうる。）

んで、人気があるらしいので、「pulse」ってリーダーも使ってみた。
これもなかなか凄くって、フィードは勿論、ソーシャルなタイムラインも購読できる。雑貨感覚でね。
（もっとも、UIがくどくって、流し読みにも遷移がつらいので、利用をやめた）

そして数日前「Google Currents」がUSで公開された。
まだ日本では利用できないから、さっぱりわからないが、大いに期待できる。

さて、フィードを購読して、リーダーでサマリを選んで、面白そうなものを拾い読みする。

なにを読むかは、サマリのインパクトによる。

目を引く画像が入っていて、有用でネタになりそうだというリードがあるのがベストだ。

それらはAtomやRSSやOGP情報から生成されたり、description やページ本文から生成されたりするだろう。

これらの出来によって、Webページに誘導されるボリュームが変わるんだ。

ただの更新通知手段であった時代は終わろうとしてるんだ。

さほどリーダーが利用されるとは思わないかもしれない。
しかし平均して、人が携帯に接する時間は、PCより、書籍より長くなった。

リーダで購読されない、またはフィードにパワーの無いサイトは閲覧されない傾向になるだろう。

これは、ソーシャルメディアに露出されないサイトが弱い傾向にある事と同じ軸上にあるように思う。

運用においては勿論だけど、Webクリエイタは、ソーシャル対策と同じく、フィードについてのプランを企む必要がある。

フィードだけでの配信ってのもありうるかもしれん。

Web制作で細心の注意が必要なのはフィードだ。 is a post from: www.yambal.net

MT 入門

製作中のやまじゅん — Sat, 03 Dec 2011 00:46:00 +0000

以前一緒に仕事をしてくれたハセP君に MT のテーマ作成のアドバイスをする事になった。

MT ってのは、実に学習が難しい。
（WPはまぬけなリファレンスのせいで、もっと難しいけど。）

MT の独習者にとっての不幸は、カスタムのための出発点となるテンプレートや、テーマが無いことだ。

また、ウェブサイト、ウェブページ、ブログ、ブログ記事…
といった階層構造にピンと来るまでがなかなか時間がかかる。

基本的に静的生成なので、コメント機能などの動的機能はAJAX になる。これのスタイリングは、厄介だ。（動的機能は、さすがのWPなのである。）

さて、ハセPは今日しか時間が取れない。

そこでソコソコの成果を出すなら、僕がベースのコーディングをバリバリやるしかないな。

まず、裸のカスタムベースを作って、後にも利用できるようにしてあげたい。

もうすぐ京都だ。

休日に時間を取られて
でもわくわくしているのは、
最近、人に教えてあげる機会に飢えてるからなんだろう。

MT 入門 is a post from: www.yambal.net

Like（いいね）系ボタンと、Share（送信・共有・おすすめ）系ボタン

製作中のやまじゅん — Thu, 01 Dec 2011 13:32:48 +0000

WebコンテンツはSNSへ露出する方策を計画しなくちゃいけない。

Webサイトはアクセスしてもらう場所ではなくなりつつあります。人はそれぞれ気に入っている場所に居座るようになった今だからこそ、Webサイトのコンテンツを彼等がいる様々な場所へ届ける仕組みを設計しなければいけません。
長谷川恭久

だいいち、下手なSEOや広告より効果あるじゃねぇか…
山本純

まず、LikeとShareの違いをおさらい

Like（いいね）系ボタンてのは、ワンクリックで対象にマーキングするものだよね。

Facebook : Like（いいね）
Google Plus : +1

Share（送信・共有・おすすめ）系ボタンってのは、友人知人に対象を紹介するのだよね。

Facebook : Share（送信）
Google Plus : Share
Twitter : （tweet）

Webサイトに導入する際、LikeとShare、それぞれでニュアンスが違うので、できれば使い分けたい。

Like系
（ログインしていれば）ワンクリックでアクションが完了する
とにかくSNS系に露出したいという場合にはよい。
Share系
コメントの記入等のアクションが入るのでアクションがちょっとめんどくさい。
効果の高い露出が期待できる…かもしれない。
（FacebookのShareはLikeと統合されたのでちとややこしい）

ようするに、ユーザがそのコンテンツをSNSで取り上げる時の「濃さ」だね。
Likeは「お！」とか「読んだよ」とか、軽いカンジ。
Shareは「読んでこれ」というニュアンスだ。

コンテンツに「お！」と感じても「読んでコレ」とは思わないシーンの方が多いでしょう。
それでもSNSに露出してほしい場合にはLike系ボタンを設置した方がいいよね。

クリエイタ泣かせのLike系ボタン

Like系ボタンの何が気に食わんっちゅうと、デザインが自由にならないトコだ。
（がんばればなるかもしれないが、厄介）

結局Like系ボタンは「既にLikeしているか」というロジックが走るので、その中身はiFrameになってる事が多い。だから見た目がコントロールできないんだよ。

各SNSのLikeボタンはデザインがまちまちで、複数並べるとドンチャン騒ぎだ。
特に縦に並べようとすると無残。
アイコンだとかに変えたいが、先述のとおりムリ。
（ドロップダウンのような見せ方は一つの解かもしれない）

AddThis

AddThisはShare系、Like系ボタンを設置するための統合サービスだ。
（AddThisのAnalytics機能は効果測定に不可欠！）

結構スタイリッシュなスタイリングができそうな印象を受けるかもしれない。
https://www.addthis.com/get/

アイコンのみのスタイリングもできるようだよね。
縦並びもできる。
http://www.addthis.com/labs/floating-vertical-bar

オリジナルのアイコン画像も使えるね
https://www.addthis.com/help/toolbox
（Custom Images）

でも、よくよく見るとスタイリングできるのはShare系ボタンのみ

AddThisでLike系も扱えるが、AddThisだってLike系の見栄えをコントロールできない。
それは「Analytics機能と連動するオフィシャルボタンを生成して設置できる」というニュアンスで「Third-Party Buttons」として扱われてる。
https://www.addthis.com/help/third-party-buttons

結局Like系ボタンのスタイリングについてAddThisは便利なツールではない。
（それでもShare系ボタンと統合してAnalytics機能に乗せられる魅力は捨てがたい）

Like系ボタンはオフィシャル以上の事をするのは難しい

Facebook : Like Button
Goole Plus : +1 をウェブサイトに表示
Addthisで設定(option)を設定する : third-party-buttons を参照

逆にShare系ボタンのスタイリングは結構凝れる

How to customise AddThis Sharing icons | Wiliam Web Design Sydney Australia

そんなこんなで…

納得はできてないけど、以下のようになった
http://www.questetra.com/

Like（いいね）系ボタンと、Share（送信・共有・おすすめ）系ボタン is a post from: www.yambal.net

ellipsis : テキストがBoxからはみ出る場合に「…」を付けて省略する。

製作中のやまじゅん — Sun, 27 Nov 2011 13:07:23 +0000

テキストがBoxからはみ出る場合に「…」を付けて省略する。

.box{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }

↓ 実際にはこうなるね

生麦生米生卵ヘイ！生麦生米生卵ヘイ！

複数行の時にはどうすればいい？

この ellipsis は単一行にしか使えない。複数行のテキストを途切れていいから、Box要素のサイズに合わせて流し込みたいってケースはあるもんだ。色々調べてみると、Box要素の高さに収まるまで、末尾から文字をJavaScriptで徐々に削除するってのがある。

なるほど、なるほど

[ Insert ellipsis (…) into HTML tag if content too wide ]

しかし、JavaScriptの実行速度が速くなった最近だから使える大技だね。数年前ではちょっと考えられなかったけど、今では充分使えそうだ。一回で目減りさせる文字数を増やせば、精度は落ちるが速度は上がりそうだ。

ellipsis : テキストがBoxからはみ出る場合に「…」を付けて省略する。 is a post from: www.yambal.net

良いデザイン、新しいデザイン

製作中のやまじゅん — Fri, 18 Nov 2011 02:54:49 +0000

良いデザインとは、関わる全ての人の問題を解決し、ハッピーにするものである。
新しいデザインとは、新しい価値を生むものである。
デザインとは、それらを計画する事である。

よく表現できたので呟きを再掲。

デザインとは問題解決のための計画であり、そのスコープは「全て」である。

小中規模のソフトウェア開発にはこの観点が弱い。
デザイナーは、ともすれば、ユーザーしか見ていない事がある。

開発のリソースやスキルを無視してユーザの理想を追うのは間違いである。

また、営業が売りにくいモノにしてしまうのも間違いである。

これらのそれに関わるヒトの幸せを計画するのが、デザインである。

だからソフトウェアにおけるデザイナは、言語やフレームワークについての知識、モチベーション、話題性、大義名分、市場等についての理解と良識を必要とするのだ。

造形というものの行為がどういう作用をするか、真剣に取り組む必要がある。

デザイナの役割が大きすぎる、と言われそうだが、例えば、カーデザイナー等のプロダクトデザイナの役割を見れば、合点がいく。
彼らは何千、何万という、その生産に関わるヒトの幸福を、スタイリングという造形で責任を負っている。

ソフトウェア開発の現場で、そこまでの覚悟があるデザイナは少ない。
まして、芸大や専門学校を出たばかりでは難しい。

ユーザ視点、またはUIやビジュアルにしか注目できていないデザイナは、狭義にはデザイナだが、僕はクリエイタとしている。

僕がデザイナと名乗るのを躊躇するのは、どれかの視点を欠いている自負があるからだ。

あえていえば、デザインとは生産活動を統合するもので、職人やプログラマ、営業、マーケタがその一旦を担う事は重要である。

日本語以外のデザインの意味するところは「設計」そのものだ。

つまり、デザイナーとは、これらの「企み」を成功に導く役割を追うものである。

良いデザイン、新しいデザイン is a post from: www.yambal.net

デザイン的思考のトレーニング

製作中のやまじゅん — Tue, 18 Oct 2011 16:26:23 +0000

長くデザインについて想いを馳せて、それに従事していると、デザイン的視点というものがうまれるのではないだろうか？

別に特別な事を言っているのではなく、いわゆる職業病みたいなものだ。
そればっかりしていると、世界がそれにしか見えなくなるものだ。

プログラマはエレベーターでそのロジックが言語に見えて、フラグの遷移がスイッチする様が見えるだろう。
大工は仕舞からその職人の手の動く様が見えるだろう。

わしの母はテトリスにハマり過ぎて、電車から見えるビルのシルエットを見て「あ、入る！」とか言っていた。

ともかく、デザインとは「問題解決のための計画」であり、そのためには、デザイナーなりの「切り口」が必要だ。
切り口とは「視点」であり、「たち位置」である。

つまり、デザイナは、その対象についての価値観を持ち合わせていなくてはならない。

また、デザインは、ユーザに対する思いやりが出発点であるから、「良識」も必要となる。

独りよがりな価値観だけでも、ブレた正義だけでも、デザインは成立しない。

駆け出しのクリエイタは、なかなか最初から的を得た成果を出せない事が多いだろう。
それは、その対象に対する価値観と良識を持ち合わせていないか、指示者と共有できていないからだ。

と、続きはまた今度。

デザイン的思考のトレーニング is a post from: www.yambal.net

Untitled

製作中のやまじゅん — Thu, 06 Oct 2011 16:22:00 +0000

Less をさわってみた。
Less って何かと言うと、CSS のフレームワークだ。
CSS がシンプルに、ロジカルに生成できる。

デバイスごとに最適なレイアウトをワンソースで実現するLess Framework という、紛らわしいテクニックもあるので注意したい。
（Less Frameworkは@media を利用したテクニックだけど、Less はCSS をコンパイルして生成する手段であって、Less Framework を包含することもできるだろう）

さて、そもそも始まりは話題の Twitter Bootstrap だが、このCSS はそもそもLess でコンパイルされたものだ。
少しカスタムしようとすると、オーバーライドするのがしんどくなってくる。
そこでコンパイル元のless ファイルを眺めてみると、なるほど、生産性が高く可読性も良い。

変数と四則演算を利用でき、定義済のスタイルをネストできるというのは、なんなともパワフルだ。

またオーバーライドするにしても、Bootstrap の変数を利用して自動化を図り、生産性とメンテナンス性を保ちFixを容易にするのは、正しい。

さて、旧来のCSS コーディングに慣れたクリエイタにとって、Less の作法はいささか敷居が高い印象を受けるだろう。

情報をググると、サーバサイドやら、コマンドで、とか、およそクリエイタが嫌うキーワードばかりだ。

しかし実はコンパイルはGUIでできるし、オンラインでもできるサービスもある。

そもそもコンパイルしないまま、クライアントでコンパイルして適用かのうだ

Untitled is a post from: www.yambal.net