ワークフローをGitHubで公開する #alfred
12日ですが、 これはAlfred Advent Calendar 2014 11日目の記事です。 いろいろやり方に悩んでたんですが、良さそうな方法をメモしておきます。 まずAlfred.appでBlank Workflow作るWorkflowsの画面の左下にある + をクリックして Blank Workflowを選びます。必要項目を記入して、Createを押します。この時点で、 /Users/{ユーザ名}/Library/Application\ Support/Alfred\ 2/Alfred.alfredpreferences/workflows/user.workflow.{ユニークなID} というディレクトリが作成され、そのワークフローの情報を持った info.plist がそのディレクトリに作成されます。Gitで管理するつぎにそのディレクトリを開きます。開くときはWorkflo
MicroViewについてのいろいろ
Arduino Advent Calendar 2014 2日目の記事です。 会社の開発合宿で、MicroViewを扱った時に、いろいろ調べたので羅列しておきます。 MicroViewってなに単色の液晶付きの手のひらサイズのArduinoです。 Kickstarterで出資して手に入れたけど、今はSparkfun で購入することができます。 そのMicroViewのチュートリアルである MicroView Learning Kit を見れば、基本的なことがわかる。 このチュートリアルは配線もステップを踏んで確認しながら作業を進めることができる。 そして、チュートリアルをやっていく時、ブラウザでArduinoのプログラムを書き、Arduinoに転送できるようにするChrome拡張を提供している codebender を利用するととても捗る。 MicroViewのピンアウトhttp://kit
僕が作ったワークフロー #alfred
Alfred Advent Calendar 2014 4日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年？じゃないものも含まれる気がしますが、今までに作ったワークフローを一挙紹介します。 意外とたくさん作ったと思ってる。 dictithttps://github.com/geckotang/alfredworkflow/blob/master/dictit.alfredworkflow テキストを選択して、設定したホットキーを押すと、選択した単語を 辞書.app に投げて、sayコマンド で発音させるワークフロー。 英単語の発音調べたりするために作った。 HatebuListhttps://github.com/geckotang/alfred-hatebulist はてブの全文検索APIを叩いて自分のブックマークを検索できるワークフロー。 はてなのWSSE認証
Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景
CSS珍百景 Calendar 2014 3日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年の9月ごろにChromeとSafariで発現した珍百景です。 Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。 ちなみに後述しますがFirefoxではちゃんと適用されます。 ということで再現してみた以下の様なHTMLとCSSでこの現象は再現できます。 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. /*css*/ table { box-shadow: 0 0 10px black; padding: 10px; } tr { box-shadow: 0 0 10
CSS Variables 2014/05/22
2014年1月ごろにCodeGridで、CSS Variablesを使うという記事を書きました。 CSS Variablesは、CSSの中で独自のプロパティを定義し、その値を変数として使うことができるという仕様です。 ちなみに、今はその記事中にあるサンプルはどれも動きません。かなしいね。 間違いとか、ご意見ありましたら @GeckoTangまでどうぞ。 カスタムプロパティの接頭辞が変わった以前は以下の様に、varを接頭辞としてカスタムプロパティを定義し、値として利用する際は、 var関数の中で接頭辞を除いたカスタムプロパティ名を指定していました。 /*css*/ :root { /* 定義 */ var-fontsize: 20px; } .medium { /* 利用 */ font-size: var(fontsize); /* 20px */ } CodeGridの記事を書いてから、
Sass3.3.0の「&」の扱い
Sassの3.3.0.rc.xのバージョンは触っていなかったのですが、 先日カレントバージョンが3.3.0になり、手元の環境を3.3.0にしてみようと思い触っていました。 Gemfileはこんなん。 #Gemfile source "https://rubygems.org/" gem "sass", "3.3.0" gem "compass", "1.0.0.alpha.18" Sassの3.3.0.rc.2から3.3.0.rc.3に上がった段階で「&」の扱いに変更があり、それについて、あまり記事になってないのでメモしておく。 3.3.0.rc.1または3.3.0.rc.2から3.3.0に移行する時の注意いろいろしてみたサンプルコード個人的に思うこと間違いとか、ご意見ありましたら @GeckoTangまでどうぞ。 3.3.0.rc.1または3.3.0.rc.2から3.3.0に移行する時の
BEMツールに触れてみる
BEM Advent Calendar 2013の2日目の記事です。 本当はここ最近考えている命名ルールとか書こうかなとか思っていたのですが、「試して欲しい」という声があったのでよくわからないままbem toolを試すことにしました。 今回作ったサンプルプロジェクトはgithubにアップしてあります。 BEMとはBEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 概念やルールについては以下を参考に調べてみてください。 http://bem.info/BEM-Methodology Definitionsの日本語訳CodeGridのBEMによるフロントエンドの設計 基本概念とルール今回は、概念の部分ではなくbem.infoで提供されているbem tool
僕の好きなCSSのプロパティ2013
CSS Property Advent Calendar 2013の1日目の記事です。 私の好きなCSSプロパティをランキング形式でご紹介します。 好きなプロパティ第3位安定の「-webkit-animation-timing-function」プロパティです！ 好きな理由なんといっても長い！ JavaScriptを使用して値を書き換える際など「webkitAnimationTimingFunction」とかもう長い。 すごい長い。 3位になってしまった理由はググラビリティが低いということ。 直接「-webkit-animation-timing-function」で検索すると 「-webkit-animation-timing-function に一致する情報は見つかりませんでした。」 になって引用符で囲むという… 好きなプロパティ第2位安定の「display」プロパティです！ 歳を重ね
Re: ﾏｰｶｯﾊﾟたちがどうやってhtml/cssと出会ったか
ということで、今までのことを誰得だが書いておこうと思う。 なので特に面白く無いです。 最初の最初エディタ：ガラケー手打ち 中学3年の頃、携帯電話(F503i)を買ってもらう。 メールの仕様のバグなのか仕様なのか、メール上でタグが使える事がわかり、blinkやmarqueeなどを使うことで なんか点滅したりするとかなんか出来るということを知る。 はじめてのHTMLエディタ：ガラケー手打ち 買ってもらった携帯電話でネットサーフィンしパケ死する。 「魔法のiらんど」というサービスを知り、特に難しいいことはせずホームページ(?)を作っていた。 そのおかげでパケ死が加速していた。 はじめてのPC向けホームページエディタ：ホームページNinja 高校になり自分のPCを持つ。 相変わらずHTMLはよくわからないが、テキストサイトを作る。 エディタというか、ホームページを作っていたのはホームページNinj
Gabaの給付金コースを終えて給付金の事とか。
マンツーマン英会話のGabaで一定期間で一定レベルに達すると 教育訓練給付金がもらえるコースがあります。 それが終わり、各種資料をもらったので誰かのためにメモしておく。 ちなみに、行ってよかったと思うし、後悔はしてない。 資料をもらう。領収書クレジット契約証明書 訓練経費総額 : ¥567,000訓練経費内訳 : 入会金 ¥30,000 / 受講料 ¥510,000 / 消費税 ¥27,000クレジット契約額 : 267,000頭金 : ¥300,000※特典等で実質返還された額：¥25,620※ちなみにレベル毎のテキストは別に払ってます（授業でそれそのものは使わない）教育訓練給付金支給申請書教育訓練給付金支給申請書記載にあたっての注意事項教育訓練給付の支給申請手続きについて教育訓練修了証明書 教育訓練経費 : ¥541,380 (返還された ¥25,620 が控除されている)教育訓練経費
Frontrend Vol.4に行って来ましたメモ
Frontrend Vol.4 powered by CyberAgent, Inc.に行って来ました。 とてもテストについてのお話を聞けたのでとても楽しかったです。 誤字、間違いなどありましたら教えてください。 ※アンケートへのリンクを削除しました。 GUIのお話Chrome Dev toolsのお話Chrome DevTools.next http://www.slideshare.net/yoshikawa_t/chrome-devtoolsnextショートカット便利Break PointXHRとかで使う Timelineボトルネックな部分調べるのが便利 Chromeの隠しURL的なのchrome://chrome-urls で一覧できる Charlesデバック用プロキシ MapLocalローカルのファイルと置き換える AutoResponser Throttle回線のエミュレート
2012年ゆるいまとめ
2012年に始めたものは以下。 転職アドベントカレンダー英会話サバゲScssVim毎日のやることノート転職転職っていうか行ったり来たり。 2011年7月ごろ入社したカヤックを2011年12月末で退社 2012年1月より前職場に出戻り。 アドベントカレンダーみんなよくやる… CSS Programming Advent Calendar 2012をやった。 １人が複数回書くことはあったけど、いろいろな人がCSSプログラミングの記事を書いたのは驚いたなぁ… 新しい実装がされたら、また来年のアドベントカレンダーが書けるかもしれない。 どうなることやら… 英会話とあるきっかけから。 2012年の2月からGabaに通っています。 10段階あるなかでレベル2からのスタートで今はレベル4に入りました。 1年間で70回行く事ができ、残り18回なのでレベル４を終わるのは難しそう。（１レベル終えるのに２０回は
17日目 : CSS Programming Advent Calendar 2012
これは CSS Programming Advent Calendar 2012 の 17 日目の記事です。 (4日ぶり4回目) 先ほどお話にも出てきた、日本CSSプログラミング界権威？のげこたん(@GeckoTang)です。 前回書き終わったあとにゲーム的なものを作ろう…何がいいかなぁと考えていたら 「CSSSniper」とかいいんじゃね！とかなんとかで名前だけが降臨し、実装しようと思って進めていました。 …が、作っている途中で「あれ…これアレと仕組みかぶっとるやんけ…」となって途中でやめてしまいました。 途中まで作ったもの黒い四角の中でマウスを動かすとスナイパーライフルの照準が動きます。 クリックしても何もありません（出来るのだけど。） 準備だけはしてあります。 覗き穴を作った色々省略していますが、覗き穴的な物を作るために box-shadowの4番目(影のサイズ)に大きい値を指定して
13日目 : CSS Programming Advent Calendar 2012
これは CSS Programming Advent Calendar 2012 の 13 日目の記事です。 (5日ぶり3回目) 今回はCSSプログラマー御用達、（個人的に）最強のプロパティ pointer-events について書こうと思います。 pointer-eventsとはpointer-events - CSS | MDN書くブラウザの対応状況 Can I usePointer Events & Disabling Current Page Links端折って説明すると pointer-events:none; を指定した要素の各種動作が起きなくなります。 詳しいことは気になったら調べてみてください。 何が出来るの？リンクを無効にしたりLINK/*css*/ .disable_link { pointer-events:none; } pointer-events: none;が
8日目 : CSS Programming Advent Calendar 2012
これは CSS Programming Advent Calendar 2012 の 8 日目の記事です。 8日目の今回は… JSを使わないで音を鳴らしてみよう！対象はChromeです。 普通に鳴らしてみる。ページ開いた途端に音がなりますね。 このままでは音声ファイルの読み込み待ちも発生するのでdataURIにしましょう。 mp3のdataURI化には http://jsfiddle.net/Tenderfeel/JyaPk/show/ が便利です。 ボタンを押したら音を鳴らそう。ユーザーがクリックしたら音がなるようにしてみます。 音を鳴らすdemo1 a要素をクリックしたらiframe要素の中に音だけのHTMLを読み込みます。 このままではHTMLの読み込み待ちも発生するのでdataURIにしましょう。 音を鳴らすdemo2 mp3をdataURI化し、それを読み込んだHTMLをdata
1日目 : CSS Programming Advent Calendar 2012
正直表は、ネタですが。 :activeや:targetの擬似クラスは多用します。 a要素、input要素、label要素が便利！aタグと:targetを組み合わせることで、aをクリックしたら別の要素の表示を変える事ができます。 urlのハッシュがbox_1の時は#box_1を表示する。urlのハッシュがbox_2の時は#box_2を表示する。urlのハッシュがない、box_1・box_2ではない時は、box_1・box_2を表示しないinputのradioを使って別の要素の表示を変える :checkedと間接セレクタを組み合わせるclassがb1のinputがcheckedになった時、box_1を表示。box_2は非表示classがb2のinputがcheckedになった時、box_2を表示。box_1は非表示labelを使用して:checkedを利用しやすくする labelのfor属性を
CSS Shadersのお勉強(その1)
まずは色々ググることから。 CSS ShadersについてCSS Shaders with WebGL WebGLとCSS Shadersの違いとかAdobeのサンプルへのURLとか WebGL のシェーダーでグリグリできる CSS Shaders の使い方 CSS Shaders のシェーダー言語は WebGL と同じく OpenGL ES 2.0 （ほぼ）互換です CSS Shaders & 3D 木を揺らしてみたりなんだり Webグラフィックをハックする（1）5分でわかるCSSグラフィック スタイルが適用されたDOM要素の表示領域がvertex-meshで指定された数のメッシュに分割され、メッシュのそれぞれの頂点がvertex-shaderで座標変換されます。これにより、transform属性では不可能な変形が実現できます。また、表示する際の各ピクセルにはfragment-shade
複数人でSassを運用する
あくまで僕のやり方です。ファイル名は.scssですがSassって書いときます■運用状況共同作業者は 3人作業者のバージョン管理ツールは TortoiseSVN作業者の変換ツールは ScoutOutput Modesは Production / Compressed運用ルール(?).cssは直接編集しない.scssを編集する前にアップデートすること.cssはいちいちコミットしないである程度できたタイミングでコミットすること それまではFiddler等で確認環境の.cssをローカルの.cssに差し替えて確認すること■Sassにしてよかったと思うこと行コメントがかける出力を1行に出来る変数使えるネストし放題@forとか@eachとかで楽できる■よくあるかわからない質問集SVNアップデートをした際に.cssがコンフリクトしたら?.scssがコンフリクトしていない場合ならローカルにある.cssを一旦
Androidのbackground-sizeのバグっぽいの
Android2.3.4で起きた。 たぶんどのAndroidでも起きる。 何が起きたかhttp://jsrun.it/GeckoTang/wbTo/ Androidで見てみてください。 background-imageで画像を１つしか指定してないのに background-sizeで複数指定するとその画像が複数背景指定される。 重なり順も指定した順でないからバグっぽい。 解決策background-image:url(“http://jsrun.it/assets/3/I/f/8/3If8f.png”), url(“”), url(“”), url(“”), url(“”), url(“”), url(“”), url(“”), url(“”); とかやっときゃいけるけどキモいしなんの解決にもなってない。 なぜ起きたかSassを使っていて、 @include background-size
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Developer Tools のSourcesタブで指定した行に飛びたい