キャプチャをまとめて取るために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」に参加してました
なんで行ったかというと、CSSをなんとなーく書いていて、これを書けばこの事象は防げるぜ!っていう魔法の言葉はいくつか習得してきたものの、果たしてそれでいいのか?! という気持にきちんと向き合いたかったからです。
基本の前の基礎知識
CSSの仕様を読もう!っていうのが全体を通して感じたこと。最初のセッションでは、その仕様の記載方法と読み方について語っているようでした(ちょっと遅れちゃいました!)
仕様の読み方
- 並置: 順序を守らなきゃいけない
- && ダブルアンバサンド
- || ダブルバー
- | 2つ以上の構成要素の区切りで、それらの1つを記述
- 優先度 並置 > && > || > |
などなどあるので、例えば、
<shadow> = inset? && <length>{2,4} && <color>?
- inset と color は自由
- lengthは2~4つ書く必要がある
ということ。これを踏まえると、よく見かける誰かのCSSではなくて、自分オリジンできちんと組めるようになりますよね!ミラクル!
- 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
UAとCSSの話
User Agent Style Sheets:ブラウザの標準設定
Cascading Style Sheets:CSSのこと
- 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の変化が出やすい
- 重複して読んでなければいいと思うので、どちらかを使ってください
image
currentColorを使えば、色をまとめて指定することもできる。
同じ色をそのモジュール内の複数の箇所で使用する場合、currentColorを使うことで色の管理が楽になることも!
currentColorの振る舞いを知っていれば、冗長にならず、メンテナンスしやすいコードを書くことができる!!
IE9以上で使える・・・(ならムリだ―という声もチラホラ)
仕様書を読むのは楽しいので、普段なにげなく使っているプロパティの仕様を見たことがなければ、ぜひ調べてみてください
はい!
LT
- Firefox 「伸び代ですね」
- PostCSS気になる speakerdeck.com
- 違うエンコーディングになったら、サーバの設定やBOMを見てみて
- Codepenでは、Cross Browser Testing もできる!
パフォーマンス問題
読み込み速度 + 実行速度 = パフォーマンス
- Gruntで自動化しようぜ!
- 描画不可の軽減、CPUの利用 -> CSSでやろうぜ!!
- レンダリングの流れ的に、要素の変更が多いと、レイアウト&ペイントも増えちゃって、多ければ多いほど重くなる
- レイアウトに影響をおよぼすプロパティがあると、レイアウトしなおし!!
- ペイントに影響をおよぼすのは、色系・・・
パフォーマンスを高くするならコレ!
opacity
transform (translate, scale, rotate)
⇒ GPUが利用されるため高速になる
- ローディングなど使い終わった要素をdisplay:none;
- クリティカルCSSもおすすめ
- 時代や状況によって、求められるパフォーマンスは千差万別
- 実装優先!だが、必要に応じて明確なパフォーマンス目標を設定する
- 対象機種(特にモバイル) ツールで計測しながら最適化すること。
- 感覚ではなく、ここは◯秒だから◯秒にしよう、というのが大事
- 「その情報/機能はユーザーにとって、本当に必要?」というのは常に考える事
参考
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の基本は仕様の理解から!
ブログを見て、できた〜と満足するのではなく、仕様をちゃんと読むこと!!
デザインの見かた講座に参加してました。
そう、参加してました。 peatix.com
デザイナーさんの作るスライドって、なんて美しいんだろう?といつも思います。
セミナー:デザインができること
- 不可視の可視化 (かたちのないものに、かたちを与える)
ex) 今いる場所を、ぱっと見で分かるようにする - 習慣をカタチにする
たとえば、SUICAのタッチの角度は、人間工学にもとづいて13.5度に設定されている。
今ではお馴染みの、PCでゴミ箱アイコンにドラッグすると削除されるという機能は、実はいちばん最後に出てきたアイデアらしい! - 逆に日常を取り込んだカタチも
ex) 神社もデザイン。鳥居の手前と奥で世界が異なることを表現している - 同じ機能でも違う意味を持つ
ex) AED
だれでも手が届く。開けた時に音が鳴るのも緊急感があってよい。
WORKSHOP
街へ出て、清涼飲料水のいいと思うデザインと悪いと思うデザインを1つずつ買ってくる。以前飲んでおいしかった!ではなく、単純にパッケージからの印象で選ぶこと
スーパーを2つ歩いたんですが、「美味しくなさそう」なものを探すほうが盛り上がった気がします。「美味しそうなもの」を選ぶときは、本人の好みが大きく影響するので、ちょっと恥ずかしいといいますか・・・。なんか言葉にしにくいニュアンスがあったような。好きなもののほうが、意外と言語化できないのはなんでしょうね?
選んだもの
青い甘酒を「美味しくなさそう」として、選びました。他のチームは、おいしそう!に選んでいた気がしますw
「水、塩、糖の補給に」と訴求されてるけど、それを欲しい!って思った時に甘酒は選ばないでしょww
とか、和気あいあいと、パッケージの印象をただただ言い合うのも新鮮で面白かったです。実際買うときに、そんなにパッケージ見ないような気がするし。先生の打ち返しのコメントも面白くて、普段デザインを見ることをいかにサボっていたか反省できましたw
すべて終わった後は試飲。ほんと、ドロっとしていて、夏向きではないw これ飲めたら元気でしょ。
気付き
「売る」ことをターゲットにしたものと、「機能」を全面的に打ち出すものとは、全然デザインの切り口が違うんだろうなということ。切羽詰まってる感じをグラフィックで現すのもまた大事。いつだって美しさ?インパクト?インプレッション?が求められるわけではないのです。デザインは、解決方法のひとーつ!!
2015年5月に読んだ本まとめ
hontoで電子書籍をたくさん買ったので、そのおかげで読書生活が捗るーな感じでした。 混雑した電車の中でもスマホでさくさく読めるし、ついスマホいじってたら目的地だ!なんてことも、防げたりする。混雑した電車だと、本を出すタイミングを失うと、そのままになってしまいがちだしね!
というわけで、特に印象的だった本だけ羅列します。
16冊中、5冊は★5つ!
ほんと、nendoの佐藤オオキさんの口調は素晴らしい。雑談からうまいことプロダクトに持ってって収束!という流れは私もできたらいいなぁと思いまくる。
ついついデータだけの表を出して、どやーってしがちだけど、誰に伝えるかによって、そのデータの見せ方を変えないと何も意味が無いということを改めて知ら示された。
自然体だけど、精一杯目の前のモノに向き合う姿勢に打たれて、こんな生き方がしたいと思った。かっこいい。
薄い本なのに、メソッドが集約されているので、復習するには持ってこいだと思った。IDEOとD-School偏重なところは随所に感じるけど、それはそれw
たまーにこういう気合入れる系を読むと気が引き締まっていいと思う。7時間睡眠は、いまだに実践できてませんが・・・
2015年2月に読んだ本まとめ
2月は19冊と、1月よりも減ってしまいましたが・・・それもそのはず。
- 作者: MarkeZine編集部
- 出版社/メーカー: 翔泳社
- 発売日: 2012/10/12
- メディア: 単行本(ソフトカバー)
- 購入: 1人 クリック: 40回
- この商品を含むブログ (7件) を見る
を読んだがために、ここに掲載されている本で、特に業務に近い物を中心に読み漁っているのでした。なので、☆4~5も過半数と、冬の収穫祭とあいなりました。ちゃんちゃん。
マーケ
- 作者: 高広伯彦
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2012/03/30
- メディア: 単行本
- 購入: 10人 クリック: 332回
- この商品を含むブログ (8件) を見る
いまは、SNSの運営をPDCA回しながらやっています。自社ではなくて、お客さんの、色々規制があるやつを…。もどかしい所もたくさんあるし、社内でも全然知識がなく、学ぼうともせず、のれんに腕押し状態。ああ、もうクソがっ!と思いながら、やや諦めがちだった私に、もう一度頑張ろうという気にさせてくれたのがこの本でした。そう、ソーシャルって面白いんだよ!
コミュニケーションプランニング、シカケとシクミの掛け算が大事。とても単純な作業に見えて、貧乏くさくも見られがちなSNSですが、それによって結果が大きく変わるのですよ。
- 作者: 菅付雅信
- 出版社/メーカー: アルテスパブリッシング
- 発売日: 2012/01/12
- メディア: 単行本
- 購入: 2人 クリック: 119回
- この商品を含むブログ (19件) を見る
NAVERまとめを作る時に参考にしたという話だったので、気になって読みました。
「タイトルをつける時のポイント」って聞くと確かに「はじめての」なんだけど、小難しいこともなく、ウィットに富んでいる良本でした。繰り返し読みたい。
エンパワード ソーシャルメディアを最大活用する組織体制 (Harvard Business School Press)
- 作者: ジョシュ・バーノフ,テッド・シャドラー,黒輪篤嗣
- 出版社/メーカー: 翔泳社
- 発売日: 2011/05/19
- メディア: 単行本
- 購入: 2人 クリック: 13回
- この商品を含むブログ (5件) を見る
これ古いのに、全然色あせてないことが書いてある。
企業を変えるにはHEROの存在が必要不可欠なのに、それに対する体制って全然できてないよね。こういった面では日本には絶望しています。平等ってなんだろう。
転職活動
- 作者: 伊賀泰代
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2012/11/09
- メディア: 単行本(ソフトカバー)
- 購入: 24人 クリック: 392回
- この商品を含むブログ (61件) を見る
この本のおかげで、転職活動するときの心構えが変わったので、とてもありがたかったです。
私は私だし、求められるところにいけばいいんですよ。たとえ何を言われたとしても、それは「御社とはご縁がないようですね」とこちらから言えばいいだけのこと。
- 作者: 鳥谷陽一
- 出版社/メーカー: プレジデント社
- 発売日: 2006/10/30
- メディア: 単行本
- クリック: 3回
- この商品を含むブログ (2件) を見る
選択肢があったときは、難しい方を選ぶ。と10年ぐらい前から思い始めました。時には安定は敵です。かといって、将来から見て、安定を提供してくれる保証はどこにもない。
SMAPの苗字?みたいなのは引っかかりましたが、コンサルの中居さんの姿勢はほれぼれしました。そんな人が、社外から見る立場と社内で見る立場を両方経験したいと言っていた辺りで、私も気づいたのです。自社サー⇒受託⇒自社サー⇒受託⇒…と交互なんですよね。これは偶然なのか、気分屋なのか(うわ・・・)
英語
- 作者: 安田正
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2013/09/28
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る
目の前にあるものを適当に英文にしてみたとして、本当に価値あるのか?と思ってましたが、その答えがここに。
BE動詞とDOとHAVEに頼りがちなそこのあなたは一読するといいです。ただ、本の構成は難ありなので、めげずにさらりと読んで実践しましょう。
sound, find, giveで日本語脳のまま、英語を話しましょ。
timesheet.js触ってみました。
久しぶりにグノシーのメール見たら、timesheet.jsなるものが上がってたので、気になって触ってみました。
こういう時に、サクっと試すには、codepenですよね。jsを適当なサーバー上に置いて、読み込ませて、あとはサクサク触るだけ・・・。なんですが、CSS力をアップすべく、CSSをSaSSに書き直してみました。普段、SCSS派なんですけど、どうもうまく動かなかったので、せっかくだし!ということで、SaSSに。書き方には全く慣れませんが、うまくいくこのもどかしさ!!
SaSS書くポイント
ネット上には詳しく記法が書かれたサイトは落ちていない(ここ大事)
要は、セミコロンのあとをスペースあけて、{}と;をひたすら消して、スタイルは1行に1つだけだぞ!と意識すれば大概行ける。
参考
結果
ほとんどサンプルのままですが、無事に動きました。
オンラインポートフォリオとか、ディスコグラフィとか、作りたいときにはうってつけですね。
引数で['開始年月', '終了年月', '項目名', '項目のスタイル(CSSに記載)']と指定していくだけで、あら簡単!できちゃった!てなもんでございます。もっと見た目をキレイにしたいのは、いつかまた別の機会で。
オウンドメディアの顧客体験デザイン(1/28)に行ってたよ
先日、1/28に博報堂アイスタジオの主催する勉強会「i-CAMPUS」に参加してきました。
場所は、有楽町駅のビッグカメラの近くの有楽町ビルと駅近!方向音痴にはうれしい次第です(館内でちょっと迷ったけど)
当日は途中から参加したのですが、満員御礼のため、別室でサテライト参加になってしまいました。
おかげで気づけたことは、生身で見てないと会った感じがしないことと、チリチリした髪型だと、実際に会ったときにも探しやすいということでした。
覚えられにくいよ、とお嘆きのかたは、ぜひチリチリヘアーを取り入れてみたらいかがでしょうか?
第一部:コンテンツマーケティングの話
(途中参戦ですが、おそらく実際にコンテンツを決めるまでの道筋を紹介してました。)
- KPIの定義:重要
- 現状調査
- サイトテーマを決める
- 記事作成
特に印象的だったところだけ、ピックアップします。
- [1]集客を先に、そのあと、送客を考えるようにする。商品の話ばかりを先に行うと、[興味喚起]という点で弱いので、まず集めようとすることが大事。
- [2]主に、競合サイトのコンテンツと訪問者(どのような人がいるのか)を調査する
- [3]ターゲットは初めに絞りすぎないこと。広く集客できなくなります。
- [3]コンテンツは固めすぎないこと。固めすぎてしまうと、記事内容が制限され、バズりにくい。PDCA前提でコンテンツを変えていくことが大事
- [3]SNSでのバズによる短期型集客とSEOでのロングテール型集客の2方向から攻めることが大事。SNS向けとして考えると、グルメ周辺情報記事や、思わず笑ってしまう、誰かに教えたくなるネタ記事を考えるようにする。さもないと、自分たちもきつくなっていくので注意
- [4]それぞれバズらせたいSNSによって、戦略を変える。たとえば、FBは読後感が大事だし、Twは、 フォロワー数の多い人から発信できるか 、LINEは生々しさ、はてぶは実用的かどうか。
- [4]誰が発信するか、どんな人が拡散してくれるかまで意識を配る姿勢が大事。もちろん、初動を誰がつぶやくのかということも大事になってくる。
- [4]成功キーワード例:twitterxまんが, 肉, 美女, 健康(逆説), 腹筋(体幹)
ちょうど、現在関わっているプロジェクトで、「集客」が済んだところで、さて次どうしようかしら?と思っているところだったので、タイムリーすぎてガッツリ聞いてしまいました。もっと聞きたかったぐらい!
気づきとして、「誰に拡散してもらうか」という設計は全く考慮になかったので、それも考えてみようということ。
世間で流行ってるなーってところをもっと意識的に見て、キーワードまで落とし込むこと。
この二つに注力してしばらく取り組んでいきたいです。
他に言ってた大事なこと
- 編集プロダクションにオリエンする際に、メディア独自のルールを作っていくことが大事
- コンテンツマーケティングは本当にバズるのか?という懸念は生まれがちなので、KPI、PDCAを前提に動かしていくのが大事かも
第2部:デジタルサイネージを活用したインタラクティブコミュニケーション
格段にコストダウンしたとはいえ、かかるってのと。
顧客がその装置にどれだけ馴染んでいるかという視点で、どのデバイスを選ぶのかということも大事になってくるだろうし、あーもー、苦楽しい感じになりそうですね!(ぼやき)
クリエイティブアイデアとテクノロジーをちゃんと掛け合わせよう。 ※Hackistという名前でいろいろ試してみてるそうです。 - ネットワークの特性を活用できるテクノロジー - インサイトを突いたクリエイティブアイデア 最新のテクノロジーはチェックし続けよう!たとえば、、4K/8Kの普及。5兆円規模と推測されている。(アメリカのサイネージなんてそりゃもうすごいことに!)
難しいよね。知ってることは大事だけど、それを組めるまで行った時に、その肩書はなんなんだろう?とか。あとは、技術偏向になりかねなくて、それはそれで企画や見た目のデザインといった観点からはズレてしまうような気もしてる。ま、部活やブログ程度の実験を会社として担保する、といった感覚ならいいのかな?
最新のテクノロジーを知ることと、それを活かしたアイデアを出すのは全く別の能力ですのよ。悔しくて狂おしい。
— CHIE✴ (@crea_memo) 2015, 1月 28
ってことで、がんばりまつ。