フリーWifiで接続エラーが出た時の対処方法

施設でのフリーwifiで接続エラーが出た時の対処方法

よくスタバや湘南に新しく出来た 湘南T-SITE - 湘南らしいライフスタイルを提案する文化複合施設 に行くのですが、たまにwifiに接続出来なくなる時があったので、そちらの対処方法をメモとして残しておきます。

まず自分がなったエラーは「プライバシーエラー」でした。 おそらく施設等での利用であればほとんどがこちらのエラーになるかと思います。 「TSUTAYA_WiFi」に接続ができませんでした。

原因を探る

  • キャッシュ ・・・ブラウザのキャッシュを消してみたのですが、ダメでした。

  • 再起動 ・・・こちらも効果なしでした。

  • ブラウザを変える ・・・ブラウザの問題かと思い、chromeからsafariに変えてもうまくいきませんでした。

  • プロトコル...? ・・・httpsで始まるURLではなく、httpから始まるURLのサイトに接続してみた。

httpで始まるURLのサイトをかませることで、施設のWifiポータルに接続できうまくいきました。LANによってデフォルトでは弾かれるものもあるんだなーと少し勉強になりました。

簡単にスマホで実機確認をする方法

スマホで簡単に実機確認が出来る「ngrok」

Web開発をしていて、PCはそのまま見て確認をすることが出来るのですが、いつもスマホでの実機確認に困っていました。 これまでにはadobeのedge inspectやxcodeiOSシュミレーター、もしくはテストサーバーを用意するといった感じだったのですが、ngrokが便利だったので紹介したいと思います。

Macを前提にインストール方法を紹介します。 homebrewを使ってインストールします。homebrewを入れていない場合は、下記の記事を御覧ください。

ken-sayama.hateblo.jp

brew install ngrok こちらのコマンドでインストールをしてください。 インストールが終わりましたら、ngrok 3000 こちらのコマンドで立ち上げ、http://ランダム文字列.ngrok.comこちらのURLをスマホのブラウザで読み込めば実機確認ができます。

f:id:sayamaken0402:20151213221203p:plain

ngrok 3000 なお、こちらの3000はポート番号なので、お使いの環境に合わせてポート番号を変更することで実機確認をすることが出来ます。 control+cでngrokを終了。

ngrokが便利な点は、ターミナルにログが出力されるので、エラーのログを見たり、Railsであればbinding.pryでブレークポイントを立てパラメーターの確認等ができます。

ターミナルからsublime textを起動させるコマンド

ターミナルからsublime textを起動させる方法の紹介

開発をしているとFinderなどのGUIで探しにくいフォルダで開発を行うことってよくあるかと思います。

Macであれば右上の検索アイコンから検索をかければ見つかったりもするのですが、開発中によく常時使うターミナルからエディタを開ければもっと便利なのでそのやり方を紹介します。

 

こちらの記事がソースです。

qiita.com

 

 

しかし、El capitanにアップデートするとフォルダへのアクセス権限が変更されているとかでsublコマンドが使えないので、以下の方法で最新OS Xの方は適用させてください。

sudo mkdir -p "/usr/local/bin/" && ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

上記コマンド入力後以下コマンド

sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

 

これでsublコマンドが使えるようになります。

使い方としては作業ディレクトリまで移動してsublコマンドを使うだけです。

 

以下例:

/Applications/works/⇦こちらのディレクトリで作業したい

cd /Applications/works/ で移動して

「subl .」とコマンドを叩けばいいだけです。

oh my zsh 導入手順

oh my zsh の導入

少し開発とかかじってくると出てくる通称「黒い画面(ターミナル)」、デザイナーの方々は抵抗あるやつです。ターミナルは最初は抵抗があるのですが、コマンドでの操作に慣れてしまえばはるかにコマンドの操作の方が早いかつ無駄がないので、少し頑張ってターミナルを習得&使いやすくしてしまった方が効率的です。
そこで役に立つのが、「oh my zsh」これを入れておくとディレクトの移動に予測変換がTabキーを押すだけで出たり、gitのブランチを表示してくれたり、テーマも入ってくれてたり地味に便利です。bash派かzsh派かわかれるところですが、自分はzsh派ですので、紹介します。

 

ではMac買って自分だったら最初にこれやるなーみたいなことをまずは。

とりあえずいれとくやつ

Macで開発しようと思っているなら、まずCommand line tools for Xcodeは入れるかと思うので下記リンクから手続きしてください。

Sign in with your Apple ID - Apple Developer

上記URLよりお使いのOSに合わせてインストールします。
以前であればXcode(iOSアプリ開発統合開発環境)が入っていなければ、インストールできなかったようですが、現在では単体でもインストール出来るようです。

次はHomebrew。homebrewはMac OS X上でソフトウェアの導入をサポートしてくれるパッケージ管理システムです。RubyやGitとかを「brew」コマンドで簡単にインストール出来るようにしてくれるかつアップデートとかも補佐してくれます。
オープンソースでこうゆうことしてくれる開発者にひたすら感謝していますm(_ _)m

ではインストール Homebrew — OS X用パッケージマネージャー 公式サイトのこちらより 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

上記コードをコピーして、ターミナルに貼り付けEnter。
※ターミナルは右上の虫眼鏡マークで「ターミナル」と打てば出ます。

 

oh my zshのインストール

homebrewのインストールが終わりましたら、一度ターミナルで「brew update」と打ち込んでおきましょう。brewホスティングしているものを全てアップデートしてくれます。次に、

brew install zsh

これだけで、zshはインストール出来ます。
次にoh my zshを入れます。

github.com
githubもざっくり目を通しておくといいかもしれません。
インストールは

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

こちらのコマンドをコピーして貼り付けてEnterでOKです。

あとはターミナルを再起動すればoh my zshが適用されているはずです。

自分のターミナルはこうなっています。

f:id:sayamaken0402:20150823191945p:plain

 

個人的にはデフォルトのターミナルより、iTermを使う方がいいと思うので、いろいろ導入検討してみてください。
だいぶ端折っているので、質問等気軽にどうぞ!

sublime text 3 の導入からカスタマイズまで

よく友達のツールのカスタマイズとかをやるので、書いておきます。

今プログラミングを始める人の大抵はsublime textを何かの情報を得て使っていると思います。 個人的にはUIはAtomの方がいいと思っていますし、githubの信者だから後々は乗り換えたいと思っているけど、sublime textやっぱり便利だからsublime textの導入からカスタマイズまで紹介しておきます。

文系だし頭も悪いのに一応仕事が出来てるのはツールをカスタマイズしてツールの力によるところが大きいので、ぜひはじめたばかりの人とかは参考にしてください。

まずはsublime text 3をインストール

Sublime Text - Download ←こちらよりお使いのOSに応じてダウンロードしてください。Macならアプリケーションの中に、Windowsならデスクトップに置いておくのがいいと思います。

sublime text 3にpackage controll を入れる

Installation - Package Control こちらより3のpythonコードをコピー
※いちおう下記にも載せておきます。

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

上記コードをコピーしたらsublime textのメニューのView->show consoleを選択します。選択すると、sublime text の最下部に入力窓が出るので、そこに先ほどコピーしたコードを貼り付けEnter押し、少し待ったらsublime text を再起動。

再起動し、Macは「command+shift+p」、win「Ctrl + Shift + P」でパッケージコントロールのメニューを開くことができます。
※テーマによって見え方が異なります。

f:id:sayamaken0402:20150821001248p:plain

 

sublime textにパッケージをインストール

sublime textはデフォルトではそこらのテキストエディタと変わら無いのですが、拡張することでその真価を発揮します。
ではパッケージをインストールしていきます。
パッケージコントロールのメニューを開いたら、「install」と入力してみてください。

f:id:sayamaken0402:20150821001653p:plain

一番上に「install package」と出ているのでそれを選択します。
選択すると再度入力画面が出てくるのですが、そこにパッケージ名を入力し、選択しEnterを押すだけでパッケージをインストールすることが出来ます。

f:id:sayamaken0402:20150821002031p:plain

試しに「hayaku」と入力すると「Hayaku - tools for writing CSS faster」というCSSのコードを補完してくれるパッケージが出ました。クリックすればインストールが始まります。
この繰り返しで、パッケージをガシガシ入れていきます。
なおパッケージによってはsublime textを再起動しないと有効化されないパッケージもあります。
ちなみに僕の入れてるパッケージを公開しておきます。

・Abacus
・Alignment
・All Autocomplete
・AndyPHP
・AngularJS
・Auto Refresh
・AutoFileName
・Better CoffeeScript
・BracketHighlighter
・Can I Use
・Color Highlighter
・ConvertToUTF8
・CTags
・CursorRuler
・Dotfiles Syntax Highlighting
・Emmet
・Git
・GitGutter
・Goto-CSS-Declaration
・HTML2Slim
Japanize
JavaScript Console
JavaScript Patterns
jQuery
・JS Snippets
・LineEndings
・LiveReload
・Package Control
・RecentActiveFiles
Ruby on Rails snippets
Ruby Slim
・Sass
・SASS Build
・SASS Snippets
・Sass-Director
・SassBeautify
・SCSS
・SCSS Snippets
Seti_UI
・SideBarEnhancements
sublime-github
・SublimeCodeIntel
・SublimeLinter
・SublimeLinter-html-tidy
・SublimeLinter-jshint
・SublimeLinter-json
・SublimeLinter-php
・SublimeLinter-ruby
・SublimeLinter-slim-lint
・SyncedSideBar
・Tag
・Terminal
・TrailingSpaces
・wpseek.com WordPress Developer Assistant

 沢山ありすぎて、一つ一つの説明は省きますが、sublime textはパッケージで本当に変わるのでお試しください。

パッケージに関してはこちらの記事がすごく参考になるので載せておきます。

tech.aucfan.com

ちなみに僕のエディタはカスタマイズしてこのようになっています。

f:id:sayamaken0402:20150821003713p:plain

 

 

わからないことあれば質問いただければ答えますので、お気軽にどうぞ。