Headless Chrome を触ってみた。 | バシャログ。
どうもfujiharaです。今年の寒さは例年とちょっと違いますね、多分。 昨年の寒さを覚えていないのですが、朝が寒すぎて辛すぎる思いが去年より強いです。 本日は発表されてだいぶ経ちますが、触ったことがないHeadless Chromeの基本的な使い方を紹介します。 Chrome59 から搭載されたUIを使用しないでChromeを実行でき、コマンドラインでChromeの各機能が使えるものです。 参考：Headless Chrome 使い方 今回は参考URL内で紹介されているDomの出力とPDF、スクリーンショットをご紹介します。今回の実行はMacで行いました。 chromeコマンドをaliasに登録してあげると楽です。 ~/.bashrc内追記 alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chro
第14回 HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！に参加したよ！ | バシャログ。
なぜか今月のバシャログ担当が2回のyanagimachiです。 5/24に開催されたHTML5ビギナーズに参加してきました。 簡単ですが、それぞれのセッション内容＆スライドのURLをご紹介します。 Foresee 見極めること：菊池 崇さん 多角的な視野で見ること、視点を変えること 変わらないことは自らの価値（価格）を下げること 社長の視点で考える。マーケットを分析しよう。自分のエゴは捨てよう もともと突っ走りやすいので、こういう視点は大切にしていましたが、社長視点も取り入れるよう頑張りたいですね。 ※このとき私の隣には弊社社長がいました。 スライド：Foresee 見極めること // Speaker Deck 慣れる！JS 素早く原因究明？デバッグ入門：国分 佑樹さん 原因究明の時間が多すぎ！ 多段式エラープルーフを使おう 時間のかかり方や守備範囲が違う複数のデバック方法を使う 上のレイ
つかえる。チェックツールまとめ | バシャログ。
こんにちは。mackyです。 今日は、安心の品質をお届けするために使える賢いちょっとしたツールたちを紹介して、私はGW気分に突入しようと思います。GWは実はまだ予定がない…家に引きこもってサイトでも作ってみようかな…ちくしょー！というそこの君。是非、使ってみてほしい。 ちなみに、今日ご紹介するツールは主にAlt、Title、META情報、リンクに関するもので、Chromeの拡張機能になります。 Popup Image Alt Attribute 一番シンプルなチェックツール。チェックしたい画像にカーソルを載せるだけで、フワりとAltが表示されます。はい。そんなに、画像数が多くない場合はこれでいいかもしれません。ただ、超急いでるときはそのフワり感にイラっとしてしまうかも。 Alt & Meta viewer フワらなくていいからスパッと出してくれ。という方や、画像数の多いECサイトなどにはこ
Heroku で始める簡単開発 | バシャログ。
皆さんこんにちは。先輩社員の方々にこのトークは面白くなくて良いと アドバイスを頂き安堵している fujihara です。なので早速本編に入っていきます。 背景にはブログ内の記事で公開したプログラムを確認できる場所があればと思い、 探していたところ Heroku 良いね！ってなり導入した手順を紹介したいと思います。 (過去の記事では JSFiddle も使用しましたが 言語が js のみなので 今後は併用していくと思われます。 内容 Herokuはさまざまな言語やサンプルアプリケーションのプラットフォームを提供するものですが 本記事では複雑な事は行わず、PHP の環境を作成してとりあえずプログラムを実行させる手順を紹介します。 流れ 導入までの手順は以下になります。(Windows 編) 1. まずHerokuにアクセスしてユーザ登録を行います。 2. 登録したアカウントでログインし、Get
どれ使おう？仕事で使えるチャットツール3つ | バシャログ。
暖かくなってきてごきげんな kimoto です。 現在シーブレインでは、社内のチャットツールには Skype を利用しています。 しかし、音声通話はともかく、チャットとなるといろいろと痒いところに手が届かないと思うこともしばしば。 グループ作った人にしかそのグループの管理ができない、相手がログアウトしてると相手からの会話が届かない、などなど… しかし昨今、世の中には色々と便利なチャットツールがあります。今日はそのうち、実際弊社で試用して便利！と思った 3 つを紹介します。 chatwork いま色々な会社で導入してるのはこの chatwork ではないでしょうか。 会話をそのままタスクにしてタスク管理にできたり、他の外部サービスと連携できたりと、便利な機能が満載です。 良い Todo 管理ツールが無いかと検討してる人にもオススメできます。 純日本産のサービスというのも、安心ポイントの一つだ
chrome デベロッパーツールのマルチデバイス開発向け機能「デバイスモード」 | バシャログ。
朝晩が寒くなりつつあり、戦々恐々としている kimoto です。寒いの嫌い。暑いのも嫌いだけど。 さて、すでに知っている人はもちろん沢山いると思いますが、chrome のデベロッパーツールの中の「デバイスモード」が便利なので、さらっとご紹介。 デベロッパーツールとは デベロッパーツールは右上の「三」みたいなアイコンから、「その他ツール」→「デベロッパーツール」で使えます。 デベロッパーツールは、HTML 構造の確認や読み込み時間の測定、JavaScript のデバッグツールなど、機能は多岐にわたります。 その中で今回紹介するのは「デバイスモード」です。 デベロッパーツールの左上の携帯アイコンからデバイスモードに入れます。 デバイスモードのここが便利！いろいろなデバイスをシミュレートできる デバイスモードに入ると、画面はこんな感じになります。 左上の「Device」というところのプルダウンを
【ツール】CSSのフォントサイズの相対指定に活躍！「PXtoEM.com」 | バシャログ。
こんにちは Latin です。いや～、ワールドカップのブラジル×ドイツ戦、凄い試合でしたね！（見てないけど） 決勝は欧州勢になりそうな予感。 さて今回は、フォントサイズの相対指定時に便利なツール「PXtoEM.com」をご紹介します。 フォントサイズの一覧や任意のサイズを出力してくれるツール「PXtoEM.com」 このツールの特長は大きく3つあります。 基準サイズからの相対サイズを一覧で表示 任意のサイズの相対サイズを出力 「px」と「em」の相互変換が可能 といった感じ。 例えば、ベースのフォントサイズが「14px」で、「20px」を指定したかった場合に、「1.429em だね！」って感じで一々、計算しなくて済むので便利です。 サイトのフォントサイズに「rem」を採用している場合にも同じで、ルートのフォントサイズを基準値とし、「em」の倍率をそのまま「rem」として使ってあげればOKで
Chrome Developer ToolでUserAgent機能を設定変更してみよう。 | バシャログ。
神奈川県て…雪国だったんですね。 はじめまして、昨年入社しました雪国出身の新人デザイナー、mackyです。 どうぞよろしくお願いします。 先月v32にアップデートされたChromeですが、 今回のバージョンアップでUserAgentの設定場所がコンソール内に移動されたんですよね。最初、「うそやん。なくなった？」...なんて仕事はじめ早々ドキドキしましたが。 それくらい大事ってことで。 まだ発見できていないかた＆まだ使ったことのないかたは手順を紹介しますので探して使ってみてください。 1）デベロッパーツールを開く F12キーもしくは図のようにたどってもOK 2）Settingsのページを開く 次に、右上のギアアイコンをクリックして、Settingsのページを開きます。 3）Overridesを選択 Overridesを選択し（既に表示されているかも）「show 'Emulation'view
Webマスター必見！パンダ・ペンギンアップデート判定ツール「syachi.jp」 | バシャログ。
週末に昔の「水曜どうでしょう」を見てたんですが、大泉さんの福山雅治モノマネにお腹痛くなるほど笑わせてもらいました Latin です。 「Googleさんがまた大型アプデするんだって All rights☆！」 ということで、先日弊社の kimoto もブログ内で取り上げておりましたが、数週間後にまた大規模なペンギンアップデートがあるらしいですね。 今回は一連のパンダ・ペンギンアップデートと自社サイトのプロファイルを比較する事ができる便利なサービス「syachi.jp」をご紹介します。 自社サイトの自然検索流入数とパンダ・ペンギンアップデートの時期を比較できる syachi.jp は、Google Analyticsと連携させる事で、一連のパンダ・ペンギンアップデートと自社サイトの自然検索流入数を比較する事が可能になるツールです。 「なんで流入数が減ったんだ～」と思う事もしばしばですよね。そ
Google Maps API V3 での細かな設定 | バシャログ。
最近だんだん暖かくなってきて嬉しい kimoto です。今日は啓蟄ということで、冬眠から覚めた虫も這い出てくるそうです。 さて、前回書いた Google Map API V3 ですが、前回は基本的なことをざっと紹介しました。 今回は、そこからちょっとだけ踏み込んで、よくある設定を簡単にご紹介します。 マウスホイールでのズーム デフォルト設定だと、マウスホイールで縮尺が変更になります。 ホイールで拡大縮小ができるのは便利といえば便利なのですが、ページをスクロールしようとしてるのに、マップにポインタが重なった瞬間にページがスクロールせずマップが縮小されて行ったりします。 これは意外と不便なので場合によってはオフにした方が良いでしょう。 google.maps.event.addDomListener(window, 'load', function() { var map = document
2012 年バシャログ。人気エントリーまとめ [デザイナー・コーダー編] | バシャログ。
年末ですね。お正月に向けて冬眠の準備を始めた seki です。 昨日に続きまして、バシャログ。1 年の人気記事まとめをお送りいたします。 振り返ってみると、今年の流行がまるわかり！復習もかねてフムフムと読み返してみて下さい。 バシャログ。2012 年人気エントリーまとめ [デザイナー・コーダー編] 様々なイケてるUIを参考にできるサイト Google HTML/CSS Style Guide の推奨ガイドラインまとめ web高速化のためのコーダー向け圧縮ツール・サービスまとめ 【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた Illustrator の時間短縮！ウェブやチラシで使うアクセスマップの作り方 【WordPress】お問い合わせ内容も管理画面で管理できてトレビア～ンなフォームプラグインinquiry form creator フォームを改めて考え
![2012 年バシャログ。人気エントリーまとめ [デザイナー・コーダー編] | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/53143fc321ea2d6c3b8d026b6dd8433bd6a625f6/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_webdesign.png)
Chrome Developer Tools を使いこなす！必読エントリー5つ | バシャログ。
こんにちはLatinです。もうすぐ世界が終わるらしいのでバシャログ。も今回が最後のエントリーになりそうです･･･。 あ、万が一終わらなかったらもちろんブログは継続していきます。（汗） 今回はChrome Developer Tools のエントリーのまとめです。 私自身はこれまで Firefox の Firebug を使っていましたが、やはりあの重たいブラウザ動作がイヤになり、 自然と Chrome を立ち上げる機会が増えていきました。 Firebug も Chrome Developer Tools も基本的に出来る事は同じなのですが、UI が変わっただけで結構最初は使い辛い印象をもったりしますよね。 そんな使い初めの時に参考にさせていただいたエントリーを紹介とともに、まとめさせていただきました。皆様、ありがとうございますです。 ～入門編～ 動画レッスン Chrome Developer
チェック作業の時間短縮！文字コード/改行コードの判定・変換ツール「FCChecker」 | バシャログ。
仮面ライダーウィザードのウィザードリングが5つ集まりました ishida です。 コレ以上あつめると嫁さんに怒られるので、リング集めはもう辞めます。でもベルトがほしいよぉー さてさて、本日はファイルも文字コードと改行コードチェックに便利なツールのご詳細です。 プロジェクトではそれぞれコーディングルールも異なります。 HTMLのバージョンだったり、文字コード、改行コード、対象ブラウザなど。 複数プロジェクトが同時進行の場合は、注意が必要です。 特に改行コードについては、目に見えるものではないので分かりにくいですよね。 Dreamweaverは環境設定で改行コードを変更できますが、プロジェクトごとに変更はできないので、改行コードをつい前回作業したままの状態になっていることも多いです。 そこで、便利なツールがこれ。 FileCode Checker ファイルの文字コードと改行コードを一覧表示して
【小ネタ】office 製品に貼り付けられた画像ファイルを抜き出したい！ | バシャログ。
突如寒くなってきて朝布団から出るのがつらい…kimoto です。 今回は、ちょっとした小ネタを。 いや、元ネタは小ネタどころではなく凄い記事なのですが。 Office 製品のファイルから画像のデータのみを抜き出したい時などに役立つ tips です。 まずはワード 先日、Word のファイルから画像を抜き出したい時に Word を起動すらしなくて良い方法が話題にあがっておりました。 やりかたは簡単。拡張子を「.docx」を「.zip」にし、そのまま解凍するだけです。 すると「_rels」「docProps」「word」というディレクトリができるので、「word」の中を見てみます。 画像データがあれば、ここに「media」というディレクトリができており、その中に画像ファイルが入っています。 べんり！ じゃあエクセルは？ これはすごい！ということで、他のファイルはどうかを試してみました。 まずは
【PowerPoint2003】選択するだけで、オブジェクトが微妙にズレてしまう問題の対策 | バシャログ。
リボンインターフェースに馴染めないので PowerPoint は 2003 を使い続けている sakai です。 Windows7 で PowerPoint2003 を使っていると、気になる挙動の問題があります。 それは、オブジェクトを選択するだけでオブジェクトがランダムにちょっとズレる、という現象です。 これには解決策がありましたので、ご紹介します。 解決策その1 【表示】→【グリッドとガイド】で「描画オブジェクトをグリッド線に合わせる」にチェックが入っていると、見えない（非表示の）グリッドにオブジェクトが勝手に位置揃えしてしまうため、ズレてしまうということがあります。 「描画オブジェクトをグリッド線に合わせる」のチェックを外しましょう。 解決策その2 上記でだいぶましになりますが、それでもまだオブジェクトがズレる問題が発生することがあります。 悩んでいましたが、以下に答えがありました。
これは便利！いろいろ役立つ便利ツールがたくさん置いてあるサイト | バシャログ。
よーし運動するぞ！と息巻いてジョギングシューズを買った kimoto です。 2 回走ったら背中を痛めてベッドから起き上がるのもままならなくなったため、現在は安静中です。 本日は、すごく便利なサイトがあったのでご紹介します。 いや、僕が知らなかっただけでかなり前からあるサイトらしく、知ってる人は知ってるとは思いますけども。 既に知ってる人はスルーしちゃってください。 ここで紹介するのはすべて同じサイトのツールです。素晴らしい。 データ形式を一発変換！ データ変換ツール 今日たまたま、BASE64 形式のデータをプレーンテキストにしようと思って、なんか良い物ないか？と思ってググったらこのページが出てきたのが始まりでした。 BASE64 だけでなく URLエンコードやHEX(16進ダンプ)等のデータを相互変換することができます。 さらに文字コードを指定したり、ハッシュ化することも可能。便利です
ソーシャルリクルーティング用 Facebook アプリ「Jinz」リリース | バシャログ。
急に寒くなってきて、スマホ対応手袋が欲しい！kimoto です。 最近 LinktIn の日本語化ニュースもありましたし、ここのところソーシャルリクルーティングという単語を良く耳にするようになってきています。 てことで、弊社シーブレインも開発に関わりました Facebook アプリ「Jinz」が昨日リリースされたのでご紹介しようと思います。 ソーシャルリクルーティング Jinz 「Jinz」は、お持ちの Facebook ページに、リクルーティングに特化したコンテンツを簡単に追加できるアプリです。 Welcome ページやフリーの固有ページをつくったりするアプリは世の中いろいろありますが、Jinz は採用に特化したアプリなので採用ページに必要なコンテンツを簡単に作る事ができます。 ログインは会員登録いらず Facebook アプリなので、Facebook のアカウントさえあればクリックひと
Facebook のソーシャルプラグインを導入しよう | バシャログ。
久々に揺れた！（8/17 9:25 頃） 現在進行形の話題を出してライブ感を醸し出してみました。kimoto です。 本日はいろんなサイトで最近よく見かけるであろう Facebook のソーシャルプラグインをいくつかご紹介します。 ハッキリ言ってこのソーシャルプラグイン、解説するまでもなくむちゃくちゃ簡単です。 こんな簡単なの、なにドヤ顔で記事にしてんの？って思われる方もいらっしゃるかもしれませんが、そこはご容赦くださいませ。 Facebook のソーシャルプラグインのページはこちら。 2012/1/19 追記 その 2 を書きました。よければこちらもどうぞ。 Like Button まずはFacebook の代名詞とも言える、「いいね！ボタン」です。 基本的にはそのページの URL を指定して、「このページ、このくらいいいね！って言われてますよ！あなたもどうぞ！」っていうのを閲覧者見せる
「ページ編集 + 共有」=「BO.LT」 | バシャログ。
月曜の朝は、祝日なのをいいことになでしこジャパンの優勝をリアルタイムで観戦し、なおかつひとりでハラハラと感涙していた kimoto です。 海外発の「ページ編集 + 共有」というようなサービス「BO.LT」をご紹介。 じつは結構前に流行ったようなんですが、僕自身最近知ったのでとりあえず。 このサービスはまず、ページ自体のコピーを取れ、別の短い URL にする事ができます。この時点ではWeb魚拓のようなサービスですが、これを簡単に編集までできてしまうのがすごい。 簡単な使い方。 まずはトップでURLを入力して「Copy it」とするとページをコピーできます。 すると一番上に今取り込んだページが出てきますので「Edit Page」をクリック。 その後はエリアを消したり文字を書き変えたりやり放題です。 画像を選択して… ボン！ 消えました。 このように、好きなように編集し、さらに URL がある
黄金比をさっと算出！Metallic Ratio | バシャログ。
高木豊の次男がオランダ1部リーグ・ユトレヒト移籍！？いやあ、日本人の欧州リーグ移籍が活発ですね。kimoto です。 Web サイトに限らず、デザインをする時に黄金比を意識する事ってあると思います。 そこで、よく使われる比率をさっと算出してくれるサイトを紹介。 Metallic Ratio この Metallic Ratio というサイトでは、黄金比はもちろん白銀比や青銅比、単純な 4:3 など、よくある比率を一発で算出してくれるサイトです。 画面はこんな感じ。 上部の比率を現すエリアをクリックして算出したい比率を選択し… 下の数値入力フォームに数字を入れると、もう片方の辺の数値を出してくれます。 また、プルダウンで、入力フォームを横の辺にするか縦の辺にするかを選択でき、さらに、小数点をどこまで求めるかも選べます。 ちょっとした計算が億劫な時にいかがでしょうか。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
