Re:Start

いまはディレクターやってます

キャプチャをまとめて取るためにrubyでツール作った話

業務効率化にツール創るのってワクワクしますよね。

さて今回作ったものは、「実行すると指定したページのキャプチャを取ってきてくれるもの」

だったのですが、

ブラウザアプリのawesome的な、キャプチャ取得ツールの代わりになるかもしれないと思って、リライトしました。 ※実際に使っているファイルでは、basic認証とログインも書いています。

使うイメージとしては、はやりのデザインを定期で取りたいときに都度、キャプチャを取るのではなく、URLをjsonにまとめておいて、まとめて取っちゃおうぜ!って感じ。いちおう、日付とネーミングがファイルに付くので、あとは好きなようにしてください。ただし、アニメーションには弱いです。

caputrePage.rb

# encoding: utf-8
require 'json'
require 'watir-webdriver'
require 'open-uri'

class CaturePage
    # for filename
    NOWTIME = Time.now.strftime("%Y%m%d%H%M%S")
    DIR_NAME = "./capture/something/"

  def capture()
    b = Watir::Browser.new :ff
    # open json
    open("something.json","r:UTF-8") do |io|
    # print io.read
    # load json
    json = JSON.parse(io.read)
    json.each do |k|
        k.each do |l,n|
            if l == "url" then
                b.goto n
            elsif l == "title" then
                b.driver.save_screenshot DIR_NAME + NOWTIME + "_" + n + ".png"
            end
        end
    end
  end
  b.close
end
CaturePage.new.capture
end

something.json

[{
    "url": "http://ekubo.jp/",
    "title": "ekubo"
},
{
    "url": "http://noma.today/",
    "title": "noma"
},
{
    "url": "https://theuniversim.com/",
    "title": "theuniversim"
},
{
    "url": "http://www.kazmia.co.jp/",
    "title": "kazmia"
}]

これを実行すると、こんなのができます。

  • 20150906085649_kazmia.png
  • 20150906085649_noma.png
  • 20150906085649_theuniversim.png
  • 20150906085649_ekubo.png

ただ、左側側が少し切れてたり、スクロールするとページが変わっていくタイプには弱いです。。。

できたファイルは、Pinterestに入れておくのもいいかもしれませんね。 www.pinterest.com

CSS イベント「Back to Basics」に参加してました

peatix.com

なんで行ったかというと、CSSをなんとなーく書いていて、これを書けばこの事象は防げるぜ!っていう魔法の言葉はいくつか習得してきたものの、果たしてそれでいいのか?! という気持にきちんと向き合いたかったからです。

基本の前の基礎知識

CSSの仕様を読もう!っていうのが全体を通して感じたこと。最初のセッションでは、その仕様の記載方法と読み方について語っているようでした(ちょっと遅れちゃいました!)

unformedbuilding.com

仕様の読み方

  • 並置: 順序を守らなきゃいけない
  • && ダブルアンバサンド
  • || ダブルバー
  • | 2つ以上の構成要素の区切りで、それらの1つを記述
  • 優先度 並置 > && > || > |

などなどあるので、例えば、

<shadow> = inset? && <length>{2,4} && <color>?
  • inset と color は自由
  • lengthは2~4つ書く必要がある

ということ。これを踏まえると、よく見かける誰かのCSSではなくて、自分オリジンできちんと組めるようになりますよね!ミラクル!

CSS width property

  • initial 初期値
  • inherit 親からそのプロパティーの産出地を敬称
  • unset 継承されているかに応じて、initialまたはinherit (まだブラウザ対応少ないので、現場ではあまり使わないほうが)

以下、参考になったこと抜粋

  • @import は、引用符ありでもOK、<string>のみでの指定も可能 (ブラウザによっては、バグることもあるので、つけておいたほうがいい)
    <percentage>型:何を基準にするか指定できる
    <length>型 : 0のときは、単位省略可能
  • em : この単位が使用される要素の font-size プロパティーの産出地
  • ex : 利用可能な最初のフォントのxの高さ (x-height)
  • rem:常にルート要素を基準とするので使いやすい ( でも、ブラウザによっては対応していないらしく最近怒られた☆ )
  • Viewportに対する割合の長さの単位:vw (初期包含ロックの幅の1%), vh (初期包含ブロックの高さの1%) ⇒ width: 100vw; にすると、スクロールバーの幅が変わる?!
  • 物理単位NG、視野角単位はpxのみ⇒ 基本的に px で書いておけば問題ない
  • <abgle>型:deg 度数法、grad グラ事案(あまり使わない)、rad JSだと使うかも(円の全周は2rad)、turn(円の全周は1turn)
  • <time>型:s秒、msはミリ秒、0でも、単位の省略は不可
  • <frequency>型:これをサポートしているブラウザーは存在しない(なにっ!!)

UAスタイルシートとリセットCSS

UACSSの話

User Agent Style Sheets:ブラウザの標準設定
Cascading Style SheetsCSSのこと

  • UAで指定されている上下の間隔は、基本的にはmarginで設定されている
  • ul,li,form系はpaddingで指定されていることが多い
    → 基本的にmarginをゼロにしてあげればいいということ

reset.cssかnormalise.cssか?

CSS Tools: Reset CSS
https://necolas.github.io/normalize.css/3.0.2/normalize.css

  • normalise.cssは、UAを活かしつつ、resetするという考え。
  • h1を変更すれば、h2以降はその継承だから、事足りるらしい!
  • ResetCSSとNormalize.cssの折衷版もいくつか出ている。
    sanitize.css
  • 間隔を詰める、プロパティを初期化したほうが構築しやすいなら ResetCSS
  • いろんなレベルの人でやる場合は、学習コストの低い resetCSSを選ぼう!!
  • UAスタイルシートは、HTMLの変化が出やすい
  • 重複して読んでなければいいと思うので、どちらかを使ってください

coliss.com

image

currentColorを使えば、色をまとめて指定することもできる。
同じ色をそのモジュール内の複数の箇所で使用する場合、currentColorを使うことで色の管理が楽になることも!

css-tricks.com

currentColorの振る舞いを知っていれば、冗長にならず、メンテナンスしやすいコードを書くことができる!!
IE9以上で使える・・・(ならムリだ―という声もチラホラ)

CSS Color Module Level 4

仕様書を読むのは楽しいので、普段なにげなく使っているプロパティの仕様を見たことがなければ、ぜひ調べてみてください

はい!

LT

パフォーマンス問題

読み込み速度 + 実行速度 = パフォーマンス

  • Gruntで自動化しようぜ!
  • 描画不可の軽減、CPUの利用 -> CSSでやろうぜ!!
  • レンダリングの流れ的に、要素の変更が多いと、レイアウト&ペイントも増えちゃって、多ければ多いほど重くなる
  • レイアウトに影響をおよぼすプロパティがあると、レイアウトしなおし!!
  • ペイントに影響をおよぼすのは、色系・・・

パフォーマンスを高くするならコレ!
opacity
transform (translate, scale, rotate)
GPUが利用されるため高速になる

  • ローディングなど使い終わった要素をdisplay:none;
  • クリティカルCSSもおすすめ
  • 時代や状況によって、求められるパフォーマンスは千差万別
  • 実装優先!だが、必要に応じて明確なパフォーマンス目標を設定する
  • 対象機種(特にモバイル) ツールで計測しながら最適化すること。
  • 感覚ではなく、ここは◯秒だから◯秒にしよう、というのが大事
  • 「その情報/機能はユーザーにとって、本当に必要?」というのは常に考える事

参考

blog.yuhiisk.com

background-(image|size) の深みへようこそ

それぞれ個別にbackgroundの要素を指定すると、思った動作が得られないことがあるという話(だと思う)困ったときは仕様を読んで、解決しようぜ!てきなやつ。

background-image

  • background-imageは、5つ指定できる?!
  • 先に指定したものが上に、後に指定したものは後ろに
  • background-sizeにcontainやcoverも入れられる

position:fixed;チョットデキル

  • fixed値を指定すると、デフォルトがインラインレベルの要素でも高さをもつことができる!
  • display:tableな要素は、fixedしても、blockになっちゃうから変わってくる
  • fixedされた要素はページに分断されて印刷されることはない
  • android 2.x はfixed難しい
  • fixedしたものに、transformできないのか?
    ⇒ fixedした要素の中の要素でtransformできるよ!

仕様と対応状況を理解すれば解決策を導くのも難しいことではない

  • calc()はIE9以上で利用可能
    background-positonに使うとブラウザがクラッシュ☆ 現在の最新版であれば、デスクトップブラウザは全てOK
  • IE8、Android
    ⇒要素内でスクロールする前提のデザインをしてもらう
  • デザインでできない場合は、
    モーダルな要素は、absoluteにしちゃう
    モーダル表出時にtop値を取ってきて、使ってみる

おすすめは、fixedのない生活です!!!

まとめ

CSSの基本は仕様の理解から!
ブログを見て、できた〜と満足するのではなく、仕様をちゃんと読むこと!!

togetter.com blog.kubosho.com

デザインの見かた講座に参加してました。

そう、参加してました。 peatix.com

デザイナーさんの作るスライドって、なんて美しいんだろう?といつも思います。

セミナー:デザインができること

  • 不可視の可視化 (かたちのないものに、かたちを与える)
    ex) 今いる場所を、ぱっと見で分かるようにする
  • 習慣をカタチにする
    たとえば、SUICAのタッチの角度は、人間工学にもとづいて13.5度に設定されている。
    今ではお馴染みの、PCでゴミ箱アイコンにドラッグすると削除されるという機能は、実はいちばん最後に出てきたアイデアらしい!
  • 逆に日常を取り込んだカタチも
    ex) 神社もデザイン。鳥居の手前と奥で世界が異なることを表現している
  • 同じ機能でも違う意味を持つ
    ex) AED
    だれでも手が届く。開けた時に音が鳴るのも緊急感があってよい。

WORKSHOP

街へ出て、清涼飲料水のいいと思うデザインと悪いと思うデザインを1つずつ買ってくる。以前飲んでおいしかった!ではなく、単純にパッケージからの印象で選ぶこと

スーパーを2つ歩いたんですが、「美味しくなさそう」なものを探すほうが盛り上がった気がします。「美味しそうなもの」を選ぶときは、本人の好みが大きく影響するので、ちょっと恥ずかしいといいますか・・・。なんか言葉にしにくいニュアンスがあったような。好きなもののほうが、意外と言語化できないのはなんでしょうね?

選んだもの

f:id:musicala:20150613151915j:plain

青い甘酒を「美味しくなさそう」として、選びました。他のチームは、おいしそう!に選んでいた気がしますw

「水、塩、糖の補給に」と訴求されてるけど、それを欲しい!って思った時に甘酒は選ばないでしょww

とか、和気あいあいと、パッケージの印象をただただ言い合うのも新鮮で面白かったです。実際買うときに、そんなにパッケージ見ないような気がするし。先生の打ち返しのコメントも面白くて、普段デザインを見ることをいかにサボっていたか反省できましたw

すべて終わった後は試飲。ほんと、ドロっとしていて、夏向きではないw これ飲めたら元気でしょ。

気付き

www.os-1.jp

「売る」ことをターゲットにしたものと、「機能」を全面的に打ち出すものとは、全然デザインの切り口が違うんだろうなということ。切羽詰まってる感じをグラフィックで現すのもまた大事。いつだって美しさ?インパクト?インプレッション?が求められるわけではないのです。デザインは、解決方法のひとーつ!!

2015年5月に読んだ本まとめ

honto電子書籍をたくさん買ったので、そのおかげで読書生活が捗るーな感じでした。 混雑した電車の中でもスマホでさくさく読めるし、ついスマホいじってたら目的地だ!なんてことも、防げたりする。混雑した電車だと、本を出すタイミングを失うと、そのままになってしまいがちだしね!

というわけで、特に印象的だった本だけ羅列します。

16冊中、5冊は★5つ!

ほんと、nendoの佐藤オオキさんの口調は素晴らしい。雑談からうまいことプロダクトに持ってって収束!という流れは私もできたらいいなぁと思いまくる。

問題解決ラボ
佐藤オオキ
読了日:05月14日
評価5

ついついデータだけの表を出して、どやーってしがちだけど、誰に伝えるかによって、そのデータの見せ方を変えないと何も意味が無いということを改めて知ら示された。

自然体だけど、精一杯目の前のモノに向き合う姿勢に打たれて、こんな生き方がしたいと思った。かっこいい。

薄い本なのに、メソッドが集約されているので、復習するには持ってこいだと思った。IDEOとD-School偏重なところは随所に感じるけど、それはそれw

たまーにこういう気合入れる系を読むと気が引き締まっていいと思う。7時間睡眠は、いまだに実践できてませんが・・・

2015年2月に読んだ本まとめ

2月は19冊と、1月よりも減ってしまいましたが・・・それもそのはず。

デジタルマーケターが読むべき100冊+α

デジタルマーケターが読むべき100冊+α

を読んだがために、ここに掲載されている本で、特に業務に近い物を中心に読み漁っているのでした。なので、☆4~5も過半数と、冬の収穫祭とあいなりました。ちゃんちゃん。

マーケ

次世代コミュニケーションプランニング

次世代コミュニケーションプランニング

いまは、SNSの運営をPDCA回しながらやっています。自社ではなくて、お客さんの、色々規制があるやつを…。もどかしい所もたくさんあるし、社内でも全然知識がなく、学ぼうともせず、のれんに腕押し状態。ああ、もうクソがっ!と思いながら、やや諦めがちだった私に、もう一度頑張ろうという気にさせてくれたのがこの本でした。そう、ソーシャルって面白いんだよ!

コミュニケーションプランニング、シカケとシクミの掛け算が大事。とても単純な作業に見えて、貧乏くさくも見られがちなSNSですが、それによって結果が大きく変わるのですよ。

はじめての編集 [単行本]

はじめての編集 [単行本]

NAVERまとめを作る時に参考にしたという話だったので、気になって読みました。

「タイトルをつける時のポイント」って聞くと確かに「はじめての」なんだけど、小難しいこともなく、ウィットに富んでいる良本でした。繰り返し読みたい。

エンパワード ソーシャルメディアを最大活用する組織体制 (Harvard Business School Press)

エンパワード ソーシャルメディアを最大活用する組織体制 (Harvard Business School Press)

これ古いのに、全然色あせてないことが書いてある。
企業を変えるにはHEROの存在が必要不可欠なのに、それに対する体制って全然できてないよね。こういった面では日本には絶望しています。平等ってなんだろう。

転職活動

採用基準

採用基準

この本のおかげで、転職活動するときの心構えが変わったので、とてもありがたかったです。

私は私だし、求められるところにいけばいいんですよ。たとえ何を言われたとしても、それは「御社とはご縁がないようですね」とこちらから言えばいいだけのこと。

ミッション―新しい職場。燃える仕事。あの人を超えたい

ミッション―新しい職場。燃える仕事。あの人を超えたい

選択肢があったときは、難しい方を選ぶ。と10年ぐらい前から思い始めました。時には安定は敵です。かといって、将来から見て、安定を提供してくれる保証はどこにもない。

SMAPの苗字?みたいなのは引っかかりましたが、コンサルの中居さんの姿勢はほれぼれしました。そんな人が、社外から見る立場と社内で見る立場を両方経験したいと言っていた辺りで、私も気づいたのです。自社サー⇒受託⇒自社サー⇒受託⇒…と交互なんですよね。これは偶然なのか、気分屋なのか(うわ・・・)

英語

英語は「インド式」で学べ!

英語は「インド式」で学べ!

目の前にあるものを適当に英文にしてみたとして、本当に価値あるのか?と思ってましたが、その答えがここに。

BE動詞とDOとHAVEに頼りがちなそこのあなたは一読するといいです。ただ、本の構成は難ありなので、めげずにさらりと読んで実践しましょう。
sound, find, giveで日本語脳のまま、英語を話しましょ。

timesheet.js触ってみました。

久しぶりにグノシーのメール見たら、timesheet.jsなるものが上がってたので、気になって触ってみました。

こういう時に、サクっと試すには、codepenですよね。jsを適当なサーバー上に置いて、読み込ませて、あとはサクサク触るだけ・・・。なんですが、CSS力をアップすべく、CSSをSaSSに書き直してみました。普段、SCSS派なんですけど、どうもうまく動かなかったので、せっかくだし!ということで、SaSSに。書き方には全く慣れませんが、うまくいくこのもどかしさ!!

SaSS書くポイント

ネット上には詳しく記法が書かれたサイトは落ちていない(ここ大事)

要は、セミコロンのあとをスペースあけて、{}と;をひたすら消して、スタイルは1行に1つだけだぞ!と意識すれば大概行ける。

参考

結果

ほとんどサンプルのままですが、無事に動きました。
オンラインポートフォリオとか、ディスコグラフィとか、作りたいときにはうってつけですね。

引数で['開始年月', '終了年月', '項目名', '項目のスタイル(CSSに記載)']と指定していくだけで、あら簡単!できちゃった!てなもんでございます。もっと見た目をキレイにしたいのは、いつかまた別の機会で。

See the Pen JoZVYE by chie (@chie) on CodePen.

オウンドメディアの顧客体験デザイン(1/28)に行ってたよ

先日、1/28に博報堂アイスタジオの主催する勉強会「i-CAMPUS」に参加してきました。

場所は、有楽町駅のビッグカメラの近くの有楽町ビルと駅近!方向音痴にはうれしい次第です(館内でちょっと迷ったけど)

当日は途中から参加したのですが、満員御礼のため、別室でサテライト参加になってしまいました。
おかげで気づけたことは、生身で見てないと会った感じがしないことと、チリチリした髪型だと、実際に会ったときにも探しやすいということでした。
覚えられにくいよ、とお嘆きのかたは、ぜひチリチリヘアーを取り入れてみたらいかがでしょうか?

第一部:コンテンツマーケティングの話

(途中参戦ですが、おそらく実際にコンテンツを決めるまでの道筋を紹介してました。)

  1. KPIの定義:重要
  2. 現状調査
  3. サイトテーマを決める
  4. 記事作成

特に印象的だったところだけ、ピックアップします。

  • [1]集客を先に、そのあと、送客を考えるようにする。商品の話ばかりを先に行うと、[興味喚起]という点で弱いので、まず集めようとすることが大事。
  • [2]主に、競合サイトのコンテンツと訪問者(どのような人がいるのか)を調査する
  • [3]ターゲットは初めに絞りすぎないこと。広く集客できなくなります。
  • [3]コンテンツは固めすぎないこと。固めすぎてしまうと、記事内容が制限され、バズりにくい。PDCA前提でコンテンツを変えていくことが大事
  • [3]SNSでのバズによる短期型集客とSEOでのロングテール型集客の2方向から攻めることが大事。SNS向けとして考えると、グルメ周辺情報記事や、思わず笑ってしまう、誰かに教えたくなるネタ記事を考えるようにする。さもないと、自分たちもきつくなっていくので注意
  • [4]それぞれバズらせたいSNSによって、戦略を変える。たとえば、FBは読後感が大事だし、Twは、 フォロワー数の多い人から発信できるか 、LINEは生々しさ、はてぶは実用的かどうか。
  • [4]誰が発信するか、どんな人が拡散してくれるかまで意識を配る姿勢が大事。もちろん、初動を誰がつぶやくのかということも大事になってくる。
  • [4]成功キーワード例:twitterxまんが, 肉, 美女, 健康(逆説), 腹筋(体幹)

ちょうど、現在関わっているプロジェクトで、「集客」が済んだところで、さて次どうしようかしら?と思っているところだったので、タイムリーすぎてガッツリ聞いてしまいました。もっと聞きたかったぐらい!

気づきとして、「誰に拡散してもらうか」という設計は全く考慮になかったので、それも考えてみようということ。
世間で流行ってるなーってところをもっと意識的に見て、キーワードまで落とし込むこと。

この二つに注力してしばらく取り組んでいきたいです。

他に言ってた大事なこと

  • 編集プロダクションにオリエンする際に、メディア独自のルールを作っていくことが大事
  • コンテンツマーケティングは本当にバズるのか?という懸念は生まれがちなので、KPI、PDCAを前提に動かしていくのが大事かも

第2部:デジタルサイネージを活用したインタラクティブコミュニケーション

  1. 黎明期
    ODMの利点は、ロケーションやオケージョンを活用して効果的に訴求できることにあるが、その活用の幅が広がった
  2. ネットワーク化期
    インターネットに接続、インフラコストが大幅に低下。※アドネットワークは、2018年に今の2~3倍である8千億円市場になると推測されている
  3. インタラクティブ化期
    ネットワークを活用して、ほかのデバイスと連携するなどして、インタラクティブな仕組みが可能となった。よりリッチな顧客体験ができるように!単なるアドではなく、マーケティングコミュニケーションの装置として利用できるようになった

格段にコストダウンしたとはいえ、かかるってのと。
顧客がその装置にどれだけ馴染んでいるかという視点で、どのデバイスを選ぶのかということも大事になってくるだろうし、あーもー、苦楽しい感じになりそうですね!(ぼやき)

クリエイティブアイデアとテクノロジーをちゃんと掛け合わせよう。 ※Hackistという名前でいろいろ試してみてるそうです。 - ネットワークの特性を活用できるテクノロジー - インサイトを突いたクリエイティブアイデア 最新のテクノロジーはチェックし続けよう!たとえば、、4K/8Kの普及。5兆円規模と推測されている。(アメリカのサイネージなんてそりゃもうすごいことに!)

難しいよね。知ってることは大事だけど、それを組めるまで行った時に、その肩書はなんなんだろう?とか。あとは、技術偏向になりかねなくて、それはそれで企画や見た目のデザインといった観点からはズレてしまうような気もしてる。ま、部活やブログ程度の実験を会社として担保する、といった感覚ならいいのかな?

ってことで、がんばりまつ。