周回遅れでBootstrapを触った話

タイトル通りですが始めてBootstrapを触ってみました.

なんだか現状のWebサイト事情に対するBootstrapの飽和状態も否めませんがものすごく感動したのでメモ.

さて, 最近も相変わらずFlaskを使ってWeb作りをしているのですがCSSも使わずにバニラ状態のHTMLファイルは本当に味気ない事を痛感しました.

そこで以前から気になっていたBootstrapを使ってみようと思いました.

FlaskでWebを作成する際のフォルダ構成としては以下の様になっています.

myapp

┣server.py /*ルーティングの設定をしたりするPythonスクリプト*/

┣static/ /*cssファイル等を入れるフォルダ*/

┗templates/ /*htmlファイルを入れるフォルダ*/

まず, BootstrapのWebサイトからBootstrapをダウンロードしてきて解凍して出てきた3つのcss, fonts, jsフォルダをstatic/の中に投げ込みました.
あとはtemplates/に入っているHTMLファイルに

<link rel=stylesheet type=text/css href="/static/css/bootstrap.min.css">
<link rel=stylesheet type=text/css href="/static/css/bootstrap-theme.min.css">

を追加すればHTMLファイルにBootstrapを適用できます！

さて, BootstrapというとJumbotron！ということで公式サイトから

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

をパクってきてちょっと弄って先ほどのhtmlファイルにぶん投げてあげました.
するとなんということでしょう！
Before:

After:

！！！！！！！！
Bootstrapの予想以上の威力に度肝を抜かれました.

ちなみにFlaskの場合Jinja2を採用している為, HTMLファイルにPythonのコードを埋め込めるので

<link rel=stylesheet type=text/css href="{{ url_for("static/css", filename="bootstrap.min.css")}}">
<link rel=stylesheet type=text/css href="{{ url_for("static/css", filename="bootstrap-theme.min.css")}}">

と記述してもいいかもしれません. (知人のWindows環境でやったところurl_forを使わないとCSSファイルが読み込まれませんでした)

少し長くなりましたがこんなかんじでサクッとBootstrapが使えてしまいました.
ハードルは予想以上に高くなかったため少しばかし拍子抜け感も否めませんが, まだ試していない人はどうでしょうか！Bootstrap！

Flaskを使うときのフォルダ名について

楽しいですよね, Flask.

今回Flaskのpyファイルとかtemplatesフォルダとかデータベースとか色々と入れるフォルダの名前のせいで詰みかけたのでメモ.

レポートから目を背けたかったので暇だったので学内公開のみの友達の応援サイトに掲示板機能つけるかとサクッとコードを書いていました.

そして, 満を持していざスクリプトファイルを起動すると

UnicodeDecodeError: 'ascii' codec can't decode byte

でででででででで出たー! UnicodeDecodeError!

Pythonを書いてて, 出てくると嫌なエラーの1つです.

でもソースのどこを見ても日本語なんて入ってないし, #codingだって指定されています.

stackoverflowを探してみてもピンと来る解決策が見つかりません.

そこでもっと低レイヤ?な部分が引っかかってるんじゃないかと探ってみるとどうもフォルダ名が怪しい.

フォルダ名, マルチバイト文字使ってたんです. "応援サイト"みたいな感じで.

そこで"応援サイト"->"ouen"に変えてみました.

すると, 先ほどまで悩んでいたUnicodeDe(ryが消えたのでした!

はい.

プログラミングするときは出来る限り日本語を使わないようしようと思いました. コメントも英語で書こうと思いました.

当たり前な事でひっかかる情弱さんでした.

今後やりたいこととか

メモ程度ならエバーノートとかそういうのでええやん的な感じはありますが, 今後やりたい事とかここに投げていこうかと思います.

①Raspberry Piのリモート操作環境を作る.

②Apacheを使ってWebサーバを建てる.

③Web公開する.

④C書きます. C#も勉強したいです.

⑤PyCon出る!

①に関して:

この前ついにRaspberry Piを買いました. ずっと欲しいと思っていましたがブログ同様中々買うタイミングが掴めず先延ばしになっていました. ディストリビューションはもうすでにSDカードに入っている為, 後は刺して動くはずなんですが忙しくてできてないです. 

リモート環境としてはSSHと, GUIで操作可能なVNCの導入をします. もちろんどちらもローカル環境のみでの利用を考えています.

②に関して:

Raspberry Piを買ったのでとりあえずサーバを建てるしか無い！という事でWebサーバ建ててみます. 正直サーバを建てるのは初めてなので何がなんだかわかっていません. Web作成のフレームワークとしてPythonのFlaskを使う予定なのでApache + mod_wsgiが必要っぽいです. 頑張ります.

③に関して:

Webサーバ建てたらどうするか？ それは勿論WAN側から接続できるように外部へと公開します！ ドメインは無料で拾ってきた奴使います. パブリックな環境への公開に当たっては, DDNSを使ったりとか, IP固定したりとか, ポートマッピングの設定したりとかそれはもう登山みたいな感じです. 長期的に公開するならセキュリティなども視野に入れないといけません. 一歩一歩歩んでいく所存です.

④に関して:

普段はPythonばかり書いているのですが課題とかで久しぶりにCを書くようになってから中々楽しい言語だという事を再認識しました. noobな自分にはさくっと書ける言語だとも思いませんし, 特に文字列の扱いなんてものすごくめんどくさく感じますが, ひと通りやってみようと思います.

それとC#ですが, これは学校でなんとなく借りたC#の本読んでたら意外と取っ付き易そうな言語だとわかり興味を持ちました. 世の中がWindowsで回っているのなら, Windowsと仲が良い言語をやってもいいかもしれません.

⑤に関して:

Pythonを始めて多分2年ぐらいは経っていると思いますが, PyConに出たことは一回もありません. Python業界の熱いPythonistaの皆様のLTとかLTとか聞いてみたいです.

それと自分はステッカー大好き人間なので, PyCon出てステッカー頂きたいです. 

少し長くなりましたが当面の目標はこんな感じですかねー.

学内で行うLTに先輩から誘われて出る事になったのでRaspberry Piの美味しい食べ方とか紹介しようかとも思っています.

それでは！

なんとなくはてなブログを始めてみました.

技術業界の熱い人が集まるはてなブログ, ずっと始めようと思っていましたが中々きっかけが掴めず開設に至れませんでした.

善は急げというか, なんとなく手持ち無沙汰になってしまったので今日から初めて見ようと思います.

書く内容としては技術ネタとかくだらない話とかそこらへんです. 

よろしくお願いします.