はてなブックマーク

IntelliJ系IDEなどの統合開発環境にある便利機能に、コードジャンプという機能があります。 関数や変数など、カーソルが当たっているところの定義元を参照してくれる、自分みたいな忘れっぽい人に便利な機能です。 最近なんやかんやあってVimを使っているので、Vimでコードジャンプするための振り返りとしてまとめます。 Atomの場合は https://atom.io/packages/atom-ctags https://atom.io/packages/goto-definition Sublime Textの場合は List stylesheet variables(Sass変数リストアップ) Goto Definition(デフォルト機能) で事足りると思いますが、Ctagsを利用することもできます。 https://github.com/SublimeText/CTags VScod

2014年は生きるか死ぬかというぐらい運がないわたくしです。多分2014年を生き延びることができたら150歳ぐらいまで生きれると思ってます。おそらく大雪が降ったのも私のせいです。申し訳ありません。 先週ぐらいのついていないこととしては、クライアントの1台しかないPCが電源故障というトラブルに見まわれ、業務が回らないということで私の愛機であるMac Book Airちゃんをなくなく1週間ほど貸すハメになりました。 そのクライアントはエクセルと印刷、メールができりゃあいいよということだったので特にトラブルもねーだろーなーと思いましたが、さすがは2014年ついていないわたくしです。すぐさま連絡が来て、印刷できねーんだボケカスこれだから林檎厨はとか言われたわけですね。あれれー5月ぐらいに持っていって印刷した時は普通に印刷できたから問題ないはずなんだけどなーと思って直行したら本当に使えないでやんの。

これはSVG Advent Calendar 2014の参加記事です。 昨日（12/5）に引き続き僕が担当します。 明日（12/7）も空きがありますので、ぜひご参加下さい。 レスポンシブなSVGを作る SVGは、Retinaであっても綺麗に表示されるため、僕はテキストや図など、Retinaのために2倍サイズを書き出すのが面倒くさい箇所をSVGで書き出しています。 通常のimg要素であれば、 的な感じで、ウィンドウ幅が狭まっても横100%で画像が表示されるはずです。svgでも同じような感じにしてあげると、モダンブラウザではうまく表示されるはずです。 IEで表示がバグる ところがどっこい、IEだけはうまくいきませんでした。 （ここでのIEはIE9、10、11を指します。） ChromeとIEの比較。Firefox、SafariもChromeと同じ表示でしたが、IEだけは表示がおかしい。 サンプ

SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる2014.12.06 これはSVG Advent Calendar 2014の参加記事です。 昨日（12/4）はshino212さんの「はじめてSVGでアニメーションを作った時の話」でした。おじさんのアニメーションが可愛い。 6日に投稿しようと思ったのですが、空きがあるので5日も投稿することにしました。まだ空きがあるのでぜひご参加下さい。 SVGスプライトとは body直下などにインラインSVGを貼り付け、gタグの代わりにsymbolタグを用いて使いまわす手法です。リクエスト数を減らす効果があり、ページを書き換えるタイプのpjaxやSPAと一緒に用いるといい感じがします。 SVGスプライトでハマる 上記のように、ロゴを多用している箇所をSVGスプライト（symbol）を用いて対処しようとしてハマりました

2014年はじめから、不運続きで今日に至っては雪のせいでバスは直行だわジャンプも買えないだわで悲しい1日でした。全部雪のせいだ。言ってみたかっただけです。 常々考えているのが、どうやったらこの不運をはねのけられるほどの力、ようするにさいきょうになれるかなのですが、ぼくの中で結構固まってきたのでアウトプットします。（小野さんのパクリです） 流れ 簡単な流れとしては、 デザイン→フロントエンド→バックエンド（デプロイ） デザインは高速開発から除外で。 フロントエンド編 BEM HTML、CSSおよびPSDはもうコレがないと運用ができない体質になってしまいました。冗長だけど管理が楽。 headerにあるヘッダーナビの場合、名前付けは私の場合こんな感じ header→header__nav→header__nav--list あってるのかはわかりません。。。 Sass Stylusを使っていたんだ

素材をクライアントやメンバーに共有するときに皆さんはどのように行っていますか？ メール、テキスト、HTML、CMS、Evernote...などなど、様々な共有ツールがありますが、私はGoogle Spread Sheetをおすすめします！ Google Spread Sheetとは Googleが運営するExcel（のような表計算ツール）。 Excelにない関数 JavaScriptスクリプトによるマクロ Googleサービスとの連携 バッチ処理 などなど、様々な機能があるウェブベースの表計算ツールです。 最近アップデートがかかり、実質容量無制限、関数の制限などがなくなり私にとっては無くてはならないツールになりました。 デメリットとしてはエクセルでいうピボットテーブルが貧弱なこと（GetPivotData、グループ化、ソート機能の充実、テーブルが使えない）が挙げられますが、それを補って余り

WordPressは膨大な数の無料プラグインで成り立っていると言っても過言ではありません。 無料プラグインを紹介している所はたくさんありますが、有料プラグインを紹介している所は少ないので、私のいろんな経験から本当に使えるプラグインを3つだけ紹介します。 Gravity Forms WordPressのフォームといえばContact form 7。Contact Form 7を使わない場合はメールフォームプロというのが最近の定番ですが、フォームをバンバン作ったり、カスタマイズしたメールフォームを作りたい！という時にはGravity Formsがお勧めです。 Gravity Formsの凄い所 何ができるのかって言われると何でもできるフォームとしか言い様がないのですが、本当に大体なんでもできます。クイズを作れたり、PayPalと連携して決済まで出来たり、そこからTwilloを用いてSMSまで送

VagrantでWordPressを効率よく開発するためのVVV-smallを作りました2014.02.27 2014年9月1日、動かなかったのを修正しました。 VagrantでWordPressを開発するときに使うものといえば、VVVかVCCW。 VCCWは思想的に好みなのですが、Windowsで動かず複数人環境では導入できませんでした。 VVVはIPアドレスで仮想環境にアクセスすると、vvv.devが優先となり、他に3つのWordPressが入っています。正直3つもいらないので削り、WordPressを1つにし、vvv.devをサブにしたVVV-smallを作成しました。日本語のWordPress最新版をダウンロードする設定にしてあります。 VVV-small 注意事項 vagrant haltの後vagrant upするとmysqlが落ちたままです。（reloadでも同じ） vagr

GoogleもYahooも広告配信レポートを現在APIでダウンロードすることができません。Google AdwordsではAPIで簡易的にレポートを作成できますが、インプレッションシェアなどの指標を指定することが出来ず、中途半端です。 メールで作られたよと報告はされるのですが、どうせなら送ってほしいものですよね。 というわけで全部ダウンロードするスクリプトを書いたのですが、私のMac Book Airちゃんがぶっ壊れてタイムマシーンで2週間前に戻ってしまい、危機感を覚えたのでここにメモしておきます。作業途中的な感じですが、わたくしの記憶力が普通の人間と同じぐらいであれば1週間後には出来上がっていると思います。 ダウンロードスクリプト https://gist.github.com/tanshio/045c1e1193f97cfa5e05 使い方 要node.js、casperjs、spoo

でインストールは完了です。 SpookyJSの使い方 大体はcasperjsのリファレンスを見ればどうにか理解できるはず。 大体使うメソッドは決められているので大雑把に説明します。 利用例 ここでは、サイトをキャプチャし、２秒毎にタイトルを１つずつログ出力します。 コード try { var Spooky = require('spooky'); } catch (e) { var Spooky = require('../lib/spooky'); } var x = require('spooky').selectXPath; var spooky = new Spooky({ child: { transport: 'http' }, casper: { logLevel: 'debug', verbose: true } }, function (err) { if (err) {

Adwordsのレポートはメールでcsvが送られてきません。csvさえメールで送られてくれれば何も言うことはないのですが、送られてこないのはどうしようもないので自分でやるしかないです。 PhantomJSは使ったことがあったのですが、CasperJSは使ったことがなかったため練習がてら使ってみました。 のちのちパッケージ化しようと思ってるのでサンプルだけおいときます。 サンプルはダウンロードしたcsvが文字化けします。対処方法は casperjs download file character encoding utf8 issueを参考に該当箇所を書き換えて下さい。詳しくは次の記事でまとめると思います（多分） コード var casper = require('casper').create({ pageSettings: { webSecurityEnabled: false } })

Google AnalyticsでIPやCookieを判別できるようにする「PHPAnalyticsIP」を作った2014.06.02 2014年12月5日に動かなかったプログラムを修正しました。 タイプミスによりうまく動かなかったものを修正しました。 2014年7月21日に設定を変更しました。 セッションごとにcookieが変更されてしまうものを修正しました。 Google Analyticsといえば、多分世界で一番使われている解析ツール。 最高に便利なのですが、これがあればもっといいのになあと思う機能の一つに生ログがあります。残念ながらAnalyticsには1人1人を追跡する機能がないです。大体のサイトでコンバージョンとなる、フォームから送られてくるデータと照らし合わせ、特定する場合に、カスタムセグメント地獄に陥りやすく手間になります。 Analyticsはグループ化したデータを見るの

{<1>} wordmoveとは wordmove wordmoveは、WordPressをDBごと管理できるrubyのライブラリです。 ローカルからホストに、ホストからローカルに、SSH（FTP）を用いてDB、テーマ、プラグインなど利用法に合わせてアップロード・ダウンロードすることが出来ます。 Vagrant（VCCW、VVV）と一緒に使ったりすると便利です。 2014年9月18日更新 インストール方法 VCCWであれば2014年9月18日に取り込まれました。 ruby1.9.3～、rubygemsは最新であれば動きます。 使い方 wordmove help wordmoveのヘルプ wordmove help [TASK] wordmove help pull 等でpullの詳細オプションを表示 wordmove init wordmoveの設定に必要なyaml形式のMovefileを

最近新しいGemやらインストールするということも少なくなってきたんだけど、ドキュメント・スニペットアプリのDashで自分のチートシートをつくろうと思い、gem install cheatsetと打ったらコケました。 色々と探してみたら最近アップデートしたXcode5.1のclangの扱いが変わってしまったみたい。エラーの内容は下記。 エラー内容 % sudo gem install cheatset Password: Fetching: plist-3.1.0.gem (100%) Successfully installed plist-3.1.0 Fetching: redcarpet-3.1.1.gem (100%) Building native extensions. This could take a while... ERROR: Error installing chea

たんしお / Shota Tanno宮城県在住。1987年生まれ。小学生の頃からサイトやウェブアプリを作り続け、サイトデザイン・作成・広告運用まですべてやるタイプでやっていましたが、自分の技術力のなさにショックを受けたので今はフロントエンド・アプリケーションエンジニアとしての仕事を主に行い生活しています。 WebGL / React / Vue / TypeScript / Swift Figma / Sketch Adwords / Analytics AWS TwitterGitHub© 2020 tanshio.net

Ghostといえば、最近流行りのnode.jsで動くブログプラットフォーム。 WordPressは最近になってwordpress.comでMarkdownを導入、インストール版ではjetpackプラグインなどでMarkdownを簡易的にサポートしだしました。 一方、GhostはMarkdownでの投稿がメインであり、投稿画面はシンプル。どうにかしてこの投稿画面にWordPressもなんねーかなーと思っていたら、ついに登場してしまいました。 WordPressプラグインGust 最近私が導入していたMarkdownプラグインに、SplitDownというGhostモチーフのものがあったんですが、Gustは管理画面・投稿画面すらGhostを完コピしてしまうという有り様。Ghostを使ったことをある人でもない人でもこの投稿画面に一回触れたらもう戻れなくなるんじゃないかな！ インストール方法 既に公