macのtips

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

chromeの要素を検証でスマホモード(device mode)を切り替えるショートカット

51

コーディングしてて、スマホで確認したいとき、まずはchromeのスマホモードで確認するよね?
そうだよね?

26
 
要素の検証をおして左上のスマホみたいなアイコンをクリックしてiphone5とかに切り替えて確認する。

要素の検証を立ち上げるショートカットはよく使うが、その後、スマホモードにするのにいちいちマウスをさわりにいかないといけないのも面倒だったのでショートカットあるのかなって調べたらあった

このデバイスモード(device mode)を切り替えるショートカットは

⌘+shift+M

だから、htmlをブラウザで開いてスマホモードで閲覧するためのショートカットキーの流れは以下のようになる。

①要素を検証をたちあげる
⌘+alt+I



②デバイスモードを切り替える
⌘+shift+M



③リロードする(リロードしないと正しく表示しないことが多いため)
⌘+R


これを素早くできるようになるには訓練が必要だけど、5分もやれば身につけられるだろう。

さぁさっそくyahooにいってこの流れを10回やろう!

もっと強い戦士になるために。


 

iphoneサイトのデバッグをpcのsafariからやる


普段の制作は、chromeでやってます。

なんか問題起きたら、すぐに「要素を検証」を起動!(alt + command + i)
てな感じで。


この要素を検証にあたるやつが、実はsafariにも隠されていたと知り驚く。

そして、safariのデバッグツールには、ユーザーエージェントの切り替えもついていた!
(挙動のおかしいchromeの拡張機能とか使わなくてもいいんだ!)

そしてそして、safariのデバッグツールを使うと、usbで接続したiphoneのsafariが表示してる画面のデバッグが直接できる。


1.safariのデバッグツールを使えるようにする

普段は隠されていて、日常生活をしていたら見つからない。
1つ星以上のハンターが念で見つけたんだとか。

safariの環境設定>詳細

48


を開くと、「メニューバーに”開発” メニューを表示」というのがあるので、これにチェックを入れる。
(念で入れる)


すると、画面上のメニューに「開発」って文字が出てくる。

この中に、ユーザーエージェントやら、僕のiphoneやら(名前がだだもれしている)が表示されて、いろいろできるってわけ。 

21


そしてchromeと同様に、画面から右クリックでも、要素を検証的なやつを開ける
(要素の詳細という名前らしい)

17




2.iphoneのデバッグのためにiphone側の設定をする

設定アプリ>safari

をひらくと、一番したのほうに「詳細」っていうのがあるのでそれをタップ

Webインスペクタというのがoffになってるのでonにする。

これで準備OK!
(iphoneはiphone5S / iOS7.01です)


3.デバッグ

iphoneとpcをUSBでつないだ状態で、
iphone safariで自分の作ってるサイトを表示。


その状態で、今度は、macのsafariの環境>自分のiphoneの名前>url名を選択すると
iphoneで表示されてるページの、要素の詳細がひらく。

該当するソースとかクリックすると、リアルタイムでiphone側の画面も青くなるから
どこがどの場所なのか、とかも丸見え。




便利になった。

safariの支持率がちょっとあがった。 

macのファインダー上で新規テキストファイルを作る方法

WEB制作をしている僕は、1日に何回Finderを表示するだろう。

たぶん100回以上表示すると思う。 

最近不便だなとおもったのは、ファインダー上に新たにテキストファイルやHTMLファイルを作りたいとき。

エディタを立ち上げて、それを指定の場所に保存して、ってやっていた。

ファインダー上でそのままファイル作れればいいのに。。 


できた。

OSX上で右クリックからファイルを新規作成する

macのfinderの操作を劇的に便利にする「Xtrafinder」というmac用アプリを入れる。

Xtrafinderの入手はこちら 


 
僕は、finderをタブ化する機能しか使っていなかったが、
設定メニューを見てみると、様々なことができる。

XtraFinerを立ち上げて、環境設定の「Finderメニューに項目を追加」のページ。

 ここで

「新規ファイル...」にチェックを入れればOK!

すぐにファインダー上で右クリックで新規ファイルを作れるようになる。


■他にも便利な機能があるじゃねぇか!!

便利だと思った機能

・機能 > フォルダを先頭に配置

→フォルダをすばやく進んでいきたいときに、いちいち名前順になってると移動にマウスを使う必要がでてきて面倒だけど、一番上がフォルダになっていれば、矢印キーだけでガガガンと進んでいける


・機能 > returnで選択項目を開く

→windowsからmacに機種変(?)して、最初もっともイライラしたのは、リターンキーでファイルが開かないことだった。なんだよ!名前の変更って!それよりファイルをひらきてぇんだよ!
command + ↓ でひらけるんだけど、僕にとってはショートカットが両手を使わないとできないというのはストレスであった。

とはいえ、今はreturnで名前変更するのに慣れちゃってるから、この機能をonにはしないけど2年前に知ってたら即onだったなぁ 

macのローマ字入力で「la」とか「le」とかやっても「ぇ」にならないの、の対処法

ローマ字入力していて、
ちいさい「ぁ」とか。
ちいさい「ぇ」とか、だしたいとき、僕はエルを使います。


ぁ → la
ぃ → li
ぇ → le
っ → ltu

というふうに。


これがmacの初期設定だと、laとうっても、「ら」になっちゃうんですよ。

確か直せたよなーと思って、調べたらあったので、メモ



①macの画面右上の「あ」とか「A」とか書いてあるところをクリック

② 環境設定を表示 をクリック

③入力操作のタブで

「windows風のキー操作」というチェックボックスがあるので、そこにチェックをいれる。




そんだけ。

そうすると、leで「ぇ」が出るようになるし、
日本語ローマ字モードのときにシフトおしながら「OK」って入力したらちゃんと「OK」になる。

macのデフォ設定だと、シフトおしながらOKってやっても「オK」とかになっちゃう。



 

macのFileZillaの引越し手順

macboookproが壊れたので、macbookairを買った。

移行ツールでアプリケーションはMBAに入ったが、Fillezillaを開いたら、設定がなんにもなく、まっさらだった。

「えー、いちから手打ちしてくのー、めんどくさくてお腹がすいちゃうー」

って思ってちょこちょこ調べてたら、すんごい簡単な方法があった。


① 旧MACでFileZillaをたちあげる。

②ファイル > エクスポート を選択(これだけでもうわかるよね)

③サイトマネージャのエントリをエクスポート と 設定をエクスポート
に選択をいれてOK

④filezilla.xmlとかいうファイルが書きだされる

⑤それをdropboxとかにつっこんで、新しいMACに渡す。
ここは転送サービスでも、メールでもUSBメモリでもなんでもいい。

⑥新しいMACでFileZillaを立ちあげて ファイル > インポート


そんだけ!1分で終わるよ!

これを手打ちでやってたら、100日くらいかかるところだよ。


 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ