2013年01月19日

郵便番号で住所検索するjquery pluginを作りました。

ajaxzip2って昔お世話になったjsのライブラリがあったと思うのですが、それをちょっとカスタマイズしてjquery.pluginにしました。お手軽に使える感じになっているので、是非使ってみてください。詳細は下記のサイトを見てください。

demo: http://yamitake.github.com/jquery.ajaxzip.js/
ソース: https://github.com/yamitake/jquery.ajaxzip.js


http://yamitake.github.com/jquery.ajaxzip.js/
posted by ヤミタケ at 20:48| Comment(0) | TrackBack(0) | jquery | このブログの読者になる | 更新情報をチェックする

2012年11月11日

sublime text2にeclipse風のショートカットを設定する方法

Sublime Text - Download http://www.sublimetext.com/2

macのエディタの話ですが、最近sublime text2がよく話題に上がりますね。
シェアウェアなんですが、一応無料でも使えます。

僕もvimを使いたいとか良いながらeclipse(aptanaだけどね)に慣れすぎてなかなか抜け出せずにいました。
速度が速い(eclipseに比べてね)、様々なパッケージを入れる事ができてカスタマイズできるのが良いとこだと思います。
※パッケージのインストール等は http://mnemoniqs.com/web/sublimetext2/

そこでショートカットをeclipseに合わせたいと思っていたので調べて設定をメモして行きます。
アプリのメニューから Sublime Text 2 >> Preferences >> Key Bindings -Default を見るとデフォルトで設定されているショートカットが見えます。
Sublime Text 2 >> Preferences >> Key Bindings -User を開くと何も記述されていないファイルが開かれると思います。
ここに書いて保存するとデフォルトを上書いて使用する事ができます。エディタの機能的には高機能なんでほぼなんでもあります。

ちなみにeclipse(aptana)で僕のよく使う機能は下記のような感じです。
Cmd + t : ファイル名インクリメンタル検索 = たぶん僕は一番使う。コレに関してはaptanaもsublimeもショートカット一緒
Cmd + f : 検索 =コレも同様に使う
Ctrl + h :ファイル内検索 テキストがファイルに含まれるか検索できる。エラーを追うときなど便利
テキスト編集系
alt + 上キー or 下キー : カーソルがあるテキストの行を入れ替える
Cmd + alt + ↓: 選択行をコピーする
Cmd + d : 一行削除する。

僕の設定: Sublime Text 2 >> Preferences >> Key Bindings -User に下記のような設定にしました。
[
{ "keys": ["alt+up"], "command": "swap_line_up" },
{ "keys": ["alt+down"], "command": "swap_line_down" },
{ "keys": ["super+alt+down"], "command": "duplicate_line" },
{ "keys": ["ctrl+h"], "command": "show_panel", "args": {"panel": "find_in_files"} },
{ "keys": ["super+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} }
]
posted by ヤミタケ at 23:33| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年08月24日

肉うまいよ。

僕も試しで買ってみた肉です!まだ届いてないけどおいしいはず!




posted by ヤミタケ at 19:52| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年08月02日

railsでlessを使ってみる。 その1

Ruby on Rails ではcssを書くのにscssが標準ですが、最近流行のTwitter Bootstrap http://twitter.github.com/bootstrap/ がlessで書かれていたりするので、
twitter bootstrapをカスタムしつつlessを扱う為にrailsをless対応の手順を示します。

主にここのサイトに書いてある通りで行けます。
https://github.com/metaskills/less-rails/

まずはrails new (アプリ名は適当です。 -OはActive Record を作成しないオプション)
config.app_generators.stylesheet_engine :less


Gemfileを編集します。
gemfileの該当部を編集
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'therubyracer' # less-railsを使うのに必要
gem 'less-rails' # sass-railsを削除して、追加
gem 'coffee-rails', '~> 3.2.1'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platform => :ruby

gem 'uglifier', '>= 1.0.3'
end
終わったらbundle updateを叩く


config/application.rbを編集して下記を追加
config.app_generators.stylesheet_engine :less
ここまででganarateしてみます。
lestes]$ rails g controller top index
      create  app/controllers/top_controller.rb
       route  get "top/index"
      invoke  erb
      create    app/views/top
      create    app/views/top/index.html.erb
      invoke  test_unit
      create    test/functional/top_controller_test.rb
      invoke  helper
      create    app/helpers/top_helper.rb
      invoke    test_unit
      create      test/unit/helpers/top_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/top.js.coffee
      invoke    less
      create      app/assets/stylesheets/top.css.less

しっかりとlessで出力されて、lessを使う事ができます。
この後、rails sでサーバを起動して、 http://localhost:3000/top/index にアクセスすれば、top.css.lessがコンパイルされている事が分かると思います。

基本的にはcssを書いて行くのと同じノリです。
scssだとcompass等を入れてmixinを補いますが、
lessだと twitter bootstarpのlessおw見るのが良いと思います。
https://github.com/twitter/bootstrap/blob/master/less/mixins.less



///////
lessとscssを比べると、(僕の感想的には)scssの方が高機能なんだけど、
普通に使う分にはどっちも変わらないと思います。
詳しくは下記を見てみると良いと思います。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞ http://dxd8.com/archives/217/
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか http://d.hatena.ne.jp/nenjiru/20111101/css_scss_less




ラベル:less rials
posted by ヤミタケ at 00:19| Comment(0) | TrackBack(0) | プログラミング | このブログの読者になる | 更新情報をチェックする

2012年08月01日

┃ω・)ジー あなたのページのタブに気付いてもらえるjquery.plugin作りました!!

要素に対してテキストをちらりと表示するjquery pluginを作りました。
tabをたくさん開いている事が多いと思いますが、ブラウザのtabのtitleを弄って気になるアプリです。

試しに下記のページを開いて、10秒ほどタブを眺めてみてくください。
Jquery.glance.js by yamitake http://yamitake.github.com/jquery.glance.js/

表示の要素やタイマー等を調整できるプラグインです。
是非あなたのサイトで使ってください!

posted by ヤミタケ at 23:48| Comment(0) | TrackBack(0) | jquery | このブログの読者になる | 更新情報をチェックする

2012年07月13日

lessのスケルトンを作成するツールを作りました。

css拡張であるlessのテンプレートをhtmlからスケルトンを生成するツールを作りました!
Less + skeltonでlesskelって言います。

Lesskel
http://yamitake.github.com/lesskel/

拡散してくれたり、感想くれたり、イイネしてくれたら嬉しいです。

普段webの実装をするときは、僕はhtmlを先に全部書きます。
論理的な構造を作ってから、cssに取り組むのがベストです。

ちなみにオプションで適用されている要素の全スタイルを抜くオプションつけたのですが、
それはギャグなのでスルーしてくださいw
cssTextのチェックはhtmlへの直書きのものを出力してくれます。

scssとless両方使いましたが、lessの方が色々と洒落てていいですよ!
好みの部分もあると思いますが、scssならcompass,lessならtwitter bootstrapのmixinをパクってくればだいたいmixinは十分です。
あとレスポンシブデザインにするlessも用意されているので、最初はカスタマイズすると遊べます!

開発効率やメンテ性がかなり上がると思うのでlessを使ってみてください。
lesskelは「これあったらべんじゃね?」って作ったのですが、実はあまりいらなかったみたいですw

でもたまに使っているので、思い出したら使ってあげてください。
ラベル:CSS3 HTML5 javascript less
posted by ヤミタケ at 01:07| Comment(0) | TrackBack(0) | ツール | このブログの読者になる | 更新情報をチェックする

2012年06月10日

マックブックAirのケースが届いた! 8bit風ケース

 
yamitake / yamitake
マックairのケースが届いた! [pic] − http://t.co/qo7Bb0KZ at 06/09 02:41

 



買ったお店はここ、中国らしいけど一回届かなくて英語で「届いてないよ〜」って言ったらもういっかいおくってくれた。
日本だと1週間ぐらいで届きます。
Big Big Pixel http://bigbigpixel.com/

作りは結構丁寧でいい感じ!大きさは見た目のとおり13インチより一回り大きくなるので、
カバンとかはそれを考慮しておいたほうがいいです。

何より雰囲気がいい!ので歩いてすれ違うと「ん?」みたいな違和感を与えられるかも!
とりあえず値段とかデザインを考えても今のお気に入りです。これから活躍するはず!

お店には他にも8bitチックな商品が売っているので、気になる人はチェックしてみてください!
住所は日本語で入力しても大丈夫かも!(あくまで世界式の書き方で)
posted by ヤミタケ at 02:31| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年04月03日

SeesaaブログにGrow!ボタンを設置する方法

Grow!とは

Grow!はボタンを通じて、あなたの大好きなコンテンツを作っている人々を支援するサービスです。また、それを連携しているソーシャル・ネットワークで友達と共有することができます。Grow!してあなたの「お気に入り」を育てましょう!

 

1Grow!に1$相当の価値があります。10Grow!以上ためるとamazonギフト券に変換できます!

seesaaブログの方は是非、設置してみてください!

 

設置方法

ブログの管理画面から、設定画面へ

スクリーンショット 2012-04-03 17.01.52.png

 

1. 設定 > 外部サービス連携 でGrow!と認証

スクリーンショット 2012-04-03 17.03.45.png

 

2. 設定 > ソーシャルボタンでGrow!(形)を選択

スクリーンショット 2012-04-03 17.04.43.png

 

(3)場合によっては記事の再構築

以上、ブログへのGrow!ボタン設置は完了です。

 

すばらしい記事を書いてみんなからGrow!してもらいましょう!

 

 

ラベル:grow! やり方 HOW
posted by ヤミタケ at 16:52| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年03月20日

音声入力に対応しました! iwatter.net


tweetストリーミングサーチサービス | iwatter.net http://iwatter.net/

この度、google chrome限定ですが音声入力に対応しました!
右上の検索窓からマイクボタンをポチっとすると音声入力できます!(マイク必要です。)

iwatter.sc2.png

chromeだけの機能ですが、inputに属性をつけるだけで実現可能です。
入力されたイベントも下記のように拾うことができます。

<input type="text" name="q" id="search_word" maxlength="20" value="おめでとう" x-webkit-speech onwebkitspeechchange="$('#search_form').submit();" />



音声入力系のアイデアでパット思いつくので言えば
-「ちょっとまって」というとyoutubeを15秒巻戻してくれる
-「バルス」っていうと壊れる
-高橋メソッドジェネレーター

音声入力は色々夢が広がって楽しそう!

posted by ヤミタケ at 22:08| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2012年03月19日

一日一枚写真を撮ってます。

継続は力なりってことで、スマホでですけど、一日一枚帰り道をとることにしています。
忘れてた日は部屋の中とかになっていますが、ほどほどに継続していきます。

始めたきっかけは些細なもので、写真を撮るときにレイアウトを意識してとると
うまく撮れるとか、ほかにもうまい写真をとるノウハウをやりながら身につけるのが目的です。

気長にやっていきます。
ここ↓よろしければコメントとかくれると嬉しいです
Twitpic / yamitake http://twitpic.com/photos/yamitake#type=gallery

iPhoneの方がデフォルトでカメラがいい気がする。。。けど物のせいにしないで写真取れるように頑張ります!
posted by ヤミタケ at 00:39| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。