3月 2012
1件の投稿
IEだとcookieにpath=/hoge/foo.htmlみたいな指定は無理
知らんくてハマった。
javascript - RESTful cookie path fails in IE without trailing slash - Stack Overflow
Javascriptのdocument.cookieのpath
path=/hoge とかじゃないと効いてくれなかった。たぶん、path=/hoge/foo.html と指定すると、/hoge/foo.html/ 以下すべてで有効なcookieになるっぽい。つまり、 /hoge.html みたいなページだけに有効なcookieというのは、path=/ と指定しないとダメなため、実質、ページ固有で有効なcookieというのは、ディレクトリをちゃんと切らないと無理っぽい気がする。他のブラウザではページ固有のcookieは有効。
NOOOOOO
2月 2012
14件の投稿
gruntでcompassをやや複雑にビルド
例えばこんなの
htdocs
├── common // サイト共通ファイル格納ディレクトリ
│ ├── css
│ │ ├── all.css // コンパイルしたやつまとめたい (A)
│ │ ├── all.min.css // そんでminifyしたい (A)
│ │ └── fragments
│ │ ├── base.css
│ │ ├── modules.css
│ │ └── reset.css
│ └── scss
│ ├── base.scss // ↑cssにコンパイルしたい (A)
│ ├── modules.scss // ↑cssにコンパイルしたい (A)
│ └── reset.scss // ↑cssにコンパイルしたい...
$.ImgLoader + spin.js でローディング待ってギャラリー的な
画像をパラパラフェードして切り替える様なUIをJSで作る時、画像をプリロードしておかないとパラパラ画像が出てきてちょっとかっこわるい。でもプリロードするのはめんどかったり、ローディング待ちの表示を出すのもちょっとめんどい。
そもそも、ローディング待ちのくるくるスピナーなアニメGIFって、あれローディング終わったらもう用済みだし、使うにしてもそいつを先にプリロードしておかないと意味ないし、なんかすごい無駄感漂うので微妙って思ってた。
そこで、あのくるくる、CSS3でやっちゃうのあったなーとか思って見てたけど、んーIEがねーって思って色々ググってたら、spin.js ってのを見つけた。これは、ローディングのくるくるを、CSS3（フォールバックでVML）でやってくれちゃうと。これはすごい。これと、jQuery.ImgLoader...
jQuery.ImgLoader - 画像を大量にプリロードさせるやつ
画像を裏でプリロードするやつをCoffeeScriptの練習がてら書いた。過去にも似たようなの作ったけど…
Takazudo/jQuery.ImgLoader - GitHub
demo1
demo2
demo3
いけてるところは以下
パイプ機能。パイプサイズ4とか指定すると、4個までしか同時にローディングを走らせないとかそういうことができる。そうした場合、5個目以降は、ローディングが終わった順に実行されていく。大量の画像を一気に取りに行くとブラウザによってはめちゃくちゃ重くなるので、そういう時に有効。
...
gruntでcssをminify
gruntについて
gruntで快適JS/CSSビルド生活 - Takazudo hamalog
sqwishを-gでinstall
ded/sqwish - GitHub
npm install -g sqwish
grunt.js
var proc = require('child_process');
config.init({
concat: {
'common/css/all.css' : [
'common/css/_src/style1.css',
'common/css/_src/style2.css',
'common/css/_src/style3.css'
]
},
watch: {
files: [
'common/css/_src/style1.css',
...
compassとやら試した
sassがLESSがどうのと前々から言われていたけども僕はさっぱり1mmも試したこと無かったので試した。なんかcompassというやつがいいとのことで、インストールした。
どこぞのサイト見つつ
compass create
とかやったら
.
├── config.rb
├── sass
│ ├── ie.scss
│ ├── print.scss
│ └── screen.scss
└── stylesheets
├── ie.css
├── print.css
└── screen.css
ができた。config.rbが設定ファイルで、基本この中をいじれば設定が変えられる。画像のパス指定先とか。そんで、
compass watch
...
vimでインデントの方法をトグル
最近1インデント2スペースだの4スペースだの1タブだの色々あるんで、コマンドでちょろっと切り替えられるようにした。
https://gist.github.com/1894248
gruntで快適JS/CSSビルド生活
grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux)
cowboy/grunt - GitHub
このgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。
似たモノで、MakeとかRakeとかCakeとかそういうのがあります。多分、やってる人は前からやってるんですが、最近ちょっとCoffeeScriptをやり始めて、微妙に困ったことがあったので、どーすっぺと探してたら、これが自分にとってソリューションでした。
...
“このブログにTwitterの公式ボタンを配置していたのですが、Firefoxでは、なぜか表示されない。Firebugでみてみると、ツイートボタンやフォローボタンで...”
– Twitterの公式ツイートボタン・フォローボタンがFirefoxなど特定のブラウザだけ表示がされない場合の対処法 | THE HAM MEDIA BLOG
名前空間付きのノードをIE6でパースするのが大変
RSSをパースしてHTMLとして出力しようとした。で、XMLをjQueryでパースするぞーってんで <dc:date>2011-12-08T+09:00</dc:date> を取ろうとしても、IE6だと取れない。namespace付きのノードは、フツーには処理できんらしい。どーしようーってんで調べてみたら、IE6でやるには
new ActiveXObject('Microsoft.XMLDOM');
とかなんとか、ActiveXObjectを使わんとダメらしい。あと、別にIE6以外でも、getElementsByTagNameNS とかいうのでやったほうが安全そう。まーちょっとだから書くか…と思って書いてたけど、だんだんめんどくさくなって、結局、XMLをJSONに変換してからやっちゃえばいいんじゃない？って思いついたので、xmltojson JavaScript...
SpineでMVCでTwitter検索なやつ
Twitter検索してModelを更新してControllerがリフレッシュするようなやつ。シンプルに書ける風。
Spine - Controller Patterns
作ったやつ
# Template manager
# //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck
deck = $.TmplDeck 'templates.html'
# ============================================
# API wrapper
# ============================================
api =
getTweets: (query) ->
$.Deferred (defer) ->
$.ajax
url:...
Spine - Controllerの使い方
Spine のControllerとやらを試した
Spine - Controllers
Spine - Controllrs API
まず、基本的な機能
class Item extends Spine.Controller
# div element will be created if you don't create this instance like below.
# this 'tag' member can be skipped then it's 'div'
#
# new Item(el: $('selector'))
#
# if you created this instance like above,
# this instance handles the element you specified as 'el'.
...
Spine - Modelの使い方
Spine のModelとやらを試した
Spine - Model
Spine - Model API
class Person extends Spine.Model
# must run configure first.
# first arg is Class name. then specify instance members
@configure 'TestModel', 'first_name', 'last_name'
constructor: ->
super # invoke Spine.Model's constructor
console.log 'person instance was created', arguments
# your method
fullName: ->...
CoffeeScriptいいかも
存在は知ってたけどさっぱり興味のわかなかったCoffeeScriptなのですが、使ってみたらこれいいかもって思って、というかもうこれからはCoffeeScriptで書いていこうかなと思いだしてる中。CoffeeScriptが何かについては、以下を参照のこと。
今日から始めるCoffeeScript | tech.kayac.com - KAYAC engineers’ blog
Rails Hub情報局: ベターJavaScript!? CoffeeScriptが注目されるワケ
きっかけは JavaScript Web Applications という本を読んで、この本書いてる人が作ってる Spine...
ソースコードのドキュメント作るdoccoとかいうやつ
これ の これ とか、これ の これ とか、これすごい見やすいんですけどどうやってんのって調べたら、doccoとかいうものを使って作られていたことを知ったので試した。結果、できまして、こんなの（元ソース）。
どこぞからNode.js、coffeescript、Pygments、doccoをインストールし、
docco hoge.js
とかやるとできた。ブログとかにコードの解説見たいのを書く時、この形ベストじゃね？と思っていた。
doccoを使ってみたよ - 四角革命前夜
#21: Broken pipe - Issues - jashkenas/docco - GitHub
1月 2012
1件の投稿
classやidに-を使うとか使わないとか
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
を見て、自分はいつも-を使ってるので、その理由を書いてみる。
結論から言うと、-でも_でもキャメルでもどれでもいいと思う。で、自分が-を使っているのは、jQuery UIのcssがそのように書かれていて、僕が年中、ヘビーにjQuery UIのベースとなっているwidgetというフレームワークを使っているから。そして、仕事でやる場合にはだいたいコレを使うので、それに習っている感じ。参照：The jQuery UI CSS Framework
...
12月 2011
8件の投稿
jQuery.ui.checks
is a collection js/css decorated checkbox and radio buttons.
Takazudo/jQuery.ui.checks - GitHub
demo
how to use yuicompressor
It is the one which minifies css and js files.
YUI Compressor
If you are a Mac user and have homebrew installed, just do
brew install yuicompressor
(If not, fetch .jar file from the link above.)
Then, do
yuicompressor foo.js -o foo.min.js
Basially, that’s all.
If you want specify encoding, do
yuicompressor foo.js -o foo.min.js --charset shift_jis
Very easy and effective.
「よくわかるキリスト教」って本読んだ
半月ぐらい海外旅行でドイツとイタリア行ってて、博物館なり何なり見たりどうしたりとかして回ってたんですけど、そういう歴史的建造物それ自身だったり、中にある展示物だったりするものって、キリスト教に関係するものがめちゃくちゃ多かった。現代の人は殆どそうなんじゃないかと思いますけど、僕個人は、宗教とかさっぱり興味無くて、はーそういうの信じてるんすかーへ〜〜って感じなんですけど、なんかこんなにもキリストキリストばっかりで、さらに建物とか絵とかめっちゃすごいし、オーマイゴッドそりゃなんでそういうことになってるんだい？って興味があったので、キリスト教入門みたいな本を買ってみた。
よくわかるキリスト教 (Amazon.co.jp)
...
gzip圧縮してcssとかjsとか転送してみた
なんか高速化したいとかどうとかいう話があったのでローカルでちょろっと試した。 html5 boilerplate にある.htaccessのなかにある、Gzip Compressionの内容をコピってapacheの設定ファイルとかに書けば動いた。
html5 boilerplate - .htaccess
これやると、ファイルをgzip圧縮してからクライアントに転送してくれるらしい。
gzip圧縮なし
gzip圧縮あり
...
JSの前にCSS読み込まないと色々うまくいかないことがある
head内にlinkでcss読み込んで、scriptでjs読み込んで、中で DOMContentLoaded だの jQuery(function(){}) だのやって云々とかやりますよね。これ、
link要素でCSS読み込み
script要素でJavaScript読み込み
の順番でやらないと上手くいかないことがあるみたいです。って今日はじめて知りました。
OK（link先script後）
NG（script先link後）
...
Mattari_panda hamalog: ずど本（Webデザイナーのための... →
mattari-panda:
いつもなにかとお世話になっているピクセルグリッドの高津戸さんが、先日書籍を出版されました。実際に読んでみて、いろんな人に薦めたくなったのでおすすめポイントを書いておきます。
まずはこちらをお読みください。すでにたくさんはてブもついてますし、今更説明不要の良記事です。 「Webデザイナーのための jQuery入門」という本を書きました - Takazudo hamalog
まずひとつめのポイントはその「解説の丁寧さ」です。ずどさんといえば、セミナーなどでも有名な語り口調があるのですが、それが随所に出ていてとてもわかり易いです。
…
「Webデザイナーのための jQuery入門」という本を書きました
2011年12月7日発売です。もう本屋に並び始めたみたい。
Webデザイナーのための jQuery入門
これは、Webデザイナーとか、HTML+CSSを普段書いてるような人でJavaScriptをほとんど知らないという人がターゲットで、そういった人らがjQuery使ってちょっとしたものを自分で作れるようになれるようになったらええんじゃないかという感じで書かれた本です。ちょっとしたモノっていうのは、この本で解説している、以下のような機能です。
画像のロールオーバー
入力フォームのガイドテキスト（「検索ワードを入力してください」みたいやつ）
アコーディオン
外部ファイルを読み込んで表作成
スライドショー
タブコンテンツ
ツールチップ
...
jQuery.TmplDeck
jQuery.TmplDeck is a template source handling utility. This loads template text file like this and allow you to draw the source by id from the file easily.
Takazudo/jQuery.TmplDeck - GitHub
demo
This was customized for underscore.js’s template method. But you can use any other template engine with this. This is just like a text storage class.
11月 2011
2件の投稿
JavaScriptパターン／JavaScript Web Applications読んだ
ドイツ旅行に来たので、飛行機の中で本読んだ。
JavaScriptパターン
知っている内容が多かったので飛ばし読みだったけども、「そこそこJavaScriptを書いているけども、うまい書き方が知りたい！」という人向けの本だと思った。prototype継承とか？なんかモジュールがどうとか？あるみたいじゃない？あれってなんかどういう意味なの？デザインパターンって何なの？とかそんな感じのことが気になって知りたいという人はこれを読むといいと思った。
...
jQuery1.7で追加されたdeferred.notifyとdeferred.progress
deferred.progressには、途中経過として実行したい関数を渡す。この関数はdeferred.notifyが呼ばれたときに実行される。途中経過resolveみたいな感じ。一連のステップを踏む処理を作る時、途中経過を示したいときに使えそう。プログレスバーとかなんかそんなやつに。
http://jsfiddle.net/Takazudo/SqL9k/
deferred.then も、第三引数にprogressCallbackを受け取れるようになっていた。
http://jsfiddle.net/Takazudo/UZCHs/
10月 2011
1件の投稿
jQuery1.7で追加された$.Callbacks
コレは何か？コールバック集めてまとめて発火させたり削除したりダブって登録されたりしないようにしてくれるやつ。ちょっと便利なオブザーバーだけど、jQuery内部のコードでオブザーバー的な動きをしていたのがこれにより抽象化された風。詳しくは以下を見るべき。（この記事を書いてる時点ではjQuery1.7 beta2）
Demystifying jQuery 1.7′s $.Callbacks
自分はこういう単純なオブザーバーをつくるとき、$({})...
9月 2011
5件の投稿
jQuery.calcNaturalWH / jQuery.fn.calcNaturalWH
added jQuery.calcNaturalWH / jQuery.fn.calcNaturalWH() to jQuery.loadImg. This utilily function waits img loading and returns naturalWidth, naturalHeight. Also do polyfill things for non-naturalWidth/Height supported browsers.
$.calcNaturalWH('img1.jpg').done(function(wh){
alert(wh.width); // 1200
alert(wh.height); //...
How to post array to php via ajax
Simply do jQuery.fn.serialize to the form and post it to PHP.
$(function(){
var $form = $('#form');
var $res = $('#res');
$form.submit(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'receiver.php',
data: $form.serialize()
}).done(function(res){
console.log(res); // got ajax result yey
...
shorten URL using bit.ly API
Using jQuery deferred is nice.
https://gist.github.com/1214402
http://jsfiddle.net/gh/gist/jQuery/1.6.3/1214402/
I coded this to explain creating ajax proxy is good. Following code does perfectly same thing but is much dirty than above.
https://gist.github.com/1214521
http://jsfiddle.net/gh/gist/jQuery/1.6.3/1214521/
Margin organization
First of all, margin organization is headache for html coders sometimes. When I code html+css, my goal is always “creating modules like LEGO.” It is very helpful when you code a huge number of pages. In this process, margin organization is an important factor.
Need uppermargin? bottommargin? OK I know, I put top margin for this… and bottom margin for this… If you code...
jQuery.sub() encapsulation
I’ve never used jQuery.sub() but I noticed that this is pretty useful. Here’s an example.
http://jsfiddle.net/Takazudo/LHNAQ/
The instance that jQuery.sub returns is an jQuery’s subclass. This means that all prototype methods attached to this local jQuery do not consume jQuery.prototype of global jQuery.
This is pretty useful when you want to make a tiny plugin for limited...
8月 2011
16件の投稿
$.fn.initFbComments
$.fn.initFbComments appends facebook comments (social plugin) to the page dynamically. I don’t know what does facebook comments’ script do but this worked. I tried dynamic script loading with JQuery’s $.getScript first. But it did not work about this. I found that yepnope’s load method worked so I used that instead. (I don’t know why…)
...
TweetボタンとかLikeとか結構重い
Twitter公式のツイートボタン、一覧ページとかに付けまくったら何やらとても重くなった。どういう条件で（というかブラウザによって結構さがある？）重くなるのかよく分からないけどもとにかく一杯つけるとダメっぽい。話を聞いてみたらそういう経験があって一覧ページにつけるのはやめたという声が結構あった。なのでこいつをずらっと並べるのはダメっぽい。特にツイート件数を出すのが重めっぽい。facebookのいいねLike ButtonはTwitterのボタン程は重くないものの、こいつは全部iframeなので同じ理由で並べるのはあんまよくなさそう。まーおいた数だけAPI叩いてるわけだしDOMも構築しているわけですので。
...
$.fn.autoSwap
$.fn.autoSwap automatically swap divs with fade effect.
https://gist.github.com/1162219
http://jsfiddle.net/gh/gist/jQuery/1.6.2/1162219/
$.fn.connectLinkStates
$.fn.connectLinkStates connects link stat for multiple anchors using class like ‘state-hover’, ‘state-active’.
https://gist.github.com/1162109
http://jsfiddle.net/gh/gist/jQuery/1.6.2/1162109/
CSS Nite LP, Disk 18「その先にあるjQuery」に出演します
弊社5509と一緒に、CSS Nite LP18「その先にあるjQuery」に出演します。 内容は、ポチってもうたーを作るために使われている技術を諸々解説します。ポチってもうたーってのはGoogle App engine (Python) で動いてるんですが、サーバー側が返すデータは全部JSONになっていて、そいつをうけとってどうのこうのするっていうのは全部フロント側でやっており、DBへの読み書き / OAuth認証だけはサーバーでやってるという、今っぽい？設計になっているのです。
一人でやろうと思ったけど内容多すぎなので5509と一緒に2セッション使ってやることにしました。内容としては、以下のネタをやる予定でいます。
jQuery Deferred
Web API (Twitter, Amazon, bit.ly)
Templating (jQuery templates)
...
$.fn.twttrintent
Web Intents is Twitter’s API which allows users to post tweet easily.
Web Intents | Twitter Developers
$.fn.twttrintent allows you to specify the “query values” on elements’ data attribute like below. ”query values” are parameters what you want to send to Twitter.
http://jsfiddle.net/gh/gist/jQuery/1.6.2/1148841/
https://gist.github.com/1148841
<a
...
Display Fiddle from Gist
jsfiddle has a great feature that can load files from gist.
Display Fiddle from Gist — jsFiddle v0.5a2 documentation
Here’s how it works.
https://gist.github.com/1148809
http://jsfiddle.net/gh/gist/jQuery/1.6.2/1148809/
All you need to do is just pushing the commit with specified filename to your gist repository. It’s so easy and extremely useful :D
jQuery.presetPreloader
img preloader. Using deferred, presetPreloader creates only one img element to preload given src even if multiple preloading was requested.
Takazudo/jQuery.loadImg - GitHub
demo
$.presetPreloader.register({
/* static paths */
'button1': [ 'button1_hover.png', 'button1_active.png' ],
'button2': [ 'button2_hover.png', 'button2_active.png' ],
/* String.prototype.replace method's...
jQuery.ui.autoWidthFit - a element width adjuster
jQuery.ui.autoWidthFit is a element width adjuster for masonry layout. This changes the element’s width according to the window size. It’s hard to explain with words. So, open the demo below and, try resizing the window.
demo: basic
demo: with isotope
# isotope is a cool library which implements “masonry layout”.
Usage:
$('#test').autoWidthFit({
widthchange:...
jQuery.loadImg - $.Deferred powered imgloader
jQuery.loadImg is a imgLoader.
Takazudo/jQuery.loadImg - GitHub
demo
$.loadImg loads img then cache the element into the memory. Once the imgloading ends, $.loadImg returns the cloned element of the cached img. This may let you handle img loading easily. works on jQuery 1.6.2.
$.loadImg('somewhere/img.png').then(function($img){
$('body').append($img);
},function(error){
...
UST埋め込みのアレコレ
とりあえずYoutubeみたいなプレイヤーだけ欲しい
→USTページの埋込み - 埋め込みコード：ライブプレイヤーっての使えばOK
番組がオフラインの時は画像出したり過去の出したりしたい
→番組の設定画面で色々せっていできる
ソーシャルストリームってやつ出したい
→USTページの埋込み - 埋め込みコード：ソーシャルストリーム、チャット、録画ビデオタブっての使えばOK
過去の放送の一覧出したい
→昔は「メディアストリーム」っていう別の埋め込みコードがあったんだけど（たぶん）、UI変更に伴って無くなった。「埋め込みコード：ソーシャルストリーム、チャット、録画ビデオタブ」を貼ったときに表示されるUIの項目が番組の設定でいじれるので、そこで過去の放送を出すとか選べば出る。チャットなんかも出せるっぽい。
埋め込んだ奴のサイズとかどうなんの
...
OGPの単純なサンプル
こんなの書くと
code on gist
facebookでこんなふうになった
Screen shot 2011-08-11 at 16:51:18.png
各値の意味はここに書いてある。後は各ソーシャルネットワークのドキュメントを参照。
The Open Graph Protocol
参考
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
metaタグを追加してFacebookに対応する方法とハマりやすいポイント | KAYAC DESIGNER’S BLOG - デザインやマークアップの話
Open Graph protocol - Facebook開発者
任意の数のDeferredを$.whenに渡す
$.when.apply(this, [deferred, deferred, …]) とかやる
demo on jsfiddle
var wait = function(millisec){
return $.Deferred(function(defer){
setTimeout(function(){
defer.resolve('I waited for ' + millisec);
}, millisec);
}).promise();
};
$(function(){
var fns = [ wait(200), wait(200),wait(500), wait(1000), wait(200) ];
$.when.apply(this,...
Isotopeとかいうライブラリ検証した
これはかなりかっこいいですなー。jQueryプラグインとしてのメソッドの呼び方も理想。コマーシャルライセンスは有料なので注意。
http://dl.dropbox.com/u/268240/hamalogFiles/isotope/1.html
http://dl.dropbox.com/u/268240/hamalogFiles/isotope/2.html
http://dl.dropbox.com/u/268240/hamalogFiles/isotope/3.html
http://dl.dropbox.com/u/268240/hamalogFiles/isotope/4.html
http://dl.dropbox.com/u/268240/hamalogFiles/isotope/5.html
sencha touchでポチってもうたーモバイル版を作ってもうたー所感
まだ途中なんですが、ポチってもうたーのモバイル版を作ってみたので感想など。
以前に、Sencha Touch ちょっと触ってみた所感 でもちょっと書いたんですが、sencha touchというフレームワークを使ってやってみました。
動作面としては、iPhone80点、Android60点ぐらいかなーという感想でした。iPhoneだと、かなりサクサク動いていて、ほぼほぼ不満はないけど、気になった点が2,3点ほど。
...
今日ほかちゃんに教えてもらったgitコマンド
git commit -p 選んでコミット git branch topic/like ブランチを作成 git branch 一覧 git checkout topic/like 移動 git branch -d topic/like 削除 git checkout -b topic/like ブランチ作って移動 git checkout master masterに戻る マスターに戻って・・・ git merge topic/like topic/likeをマスターにマージ ====== git branch -a ブランチリモートの一覧 git push origin topic/like リモートブランチにpush git push origin :topic/like リモートブランチを削除 git checkout -b...
7月 2011
11件の投稿
Davis.jsでHistory APIを比較的お手軽に使う
ポチってもうたー開発メモ。 今日、HTML5 History APIの、URLは静的に見えるけどダイナミックにUI変えちゃうよーっていうのを実装してみた。ポチってもうたーをChromeとかFirefoxで見ると、色々遷移するとURLは変わるけど全面リロードは起こらなくなってます。
これを実装するには、HTML5のhistory.pushStateとかhistory.popStateとかいう、historyをいじる仕組みを使わないといけないんですが、その辺をうまいことラップしてくれる Davis.js というライブラリがあったので、これを使ってみました。
Davis.jsの使い方は、基本的にはこんな感じ。
var app = Davis(function () {
this.get('/', function () { // ...1
// /...
windows7でhostsファイルを変更しようとすると権限がどうのとか言われてめんどくさくて死にそう...
HostsManとか言うソフトを入れると楽
HostsMan - abelhadigital.com