BootStrapを使ってみる Form 前編

今度は入力フォーム
正直見た目としてはあまり代わり映えしないけど。
前半は各Formの基本から

基本形はform-groupクラスで囲ってラベル等をグルーピング、
Inputタグにform-coltrolクラスを指定する

・form-groupに属するlabelをクリックしてもinputタグ領域をクリックするのと同等の動きをする。
・横幅はWidth100%なので、このままでは横には並べられない(※横に並べる方法は後編で)

ちなみにソースに書かれたplaceholderはHTML5の新機能

              

Text入力

20151125_01

              

TextArea

20151125_06

              

File入力

20151125_02

              

チェックボックス

20151125_03

              

ラジオボタン

20151125_05

              

リスト

20151125_04

              

後編に続く

ふちねこ

ベローチェのふちねこコンプした。

元々カフェなんて、打ち合わせ以外で行かない人なので、
完全にふちねこのために通ったさ。

DSCN1185

これはドリンクを3杯分のレシートで1個もらえます。
レシートは1杯分のを3枚でも可。とにかく3杯分ならいいのだ。
コンプには15杯ドリンクを注文すればいいんですが、
そんな高レベルな羞恥プレーはできないので、
ちまちまと集めました。

http://fuchineko.chatnoir-company.com/

各店舗の在庫数までwebから確認できるので
欲しい人はこれを参考に。

しかし残念なのはこれ、あんまり安定しない。
コップのフチにつけていても、
気がつくとポロッと落ちている。

まぁいいんだけどね。そんなことは大した問題では無いのだ。
この可愛さの前では

Bootstrapを使ってみる Table編

まずは基本形

20151108_01

これはtableタグにtableクラスを指定しただけの状態。
これだけで何かシャープな感じがする。
コードは以下

theadとtbodyのタグを指定してヘッダと表データを明確に区別すると
表示も変わります。
表内のデータはthタグを指定すると強調されます。

20151108_02

 

table-striped

table-stripedクラスを追加で指定すると、
奇数行に背景色が付くようになる。

20151108_03

 

table-bordered

table-borderedクラスを追加で指定すると、枠線が付き、
従来のテーブル表示に近い形に

20151108_04

 

table-hover

table-hoverクラスを追加で指定すると、
マウスカーソルを合わせた行の色が変わるようになる。
もちろんマウスカーソルを外すと元の色に戻る

20151108_04

 

Condensed table

table-condensedクラスを追加で指定すると、
通常に比べてコンパクトな表になる。
公式の説明みると各Cellのpaddingが半分になっている模様

20151108_05

 

Contextual classes

tr、td、thにクラスを指定することでbuttonの時のように色付けが可能。
trで行単位。
td、thでセル単位に色付けが可能
指定可能なクラスは以下

    • active
      success
      info
      warning
      danger
  • 20151108_06

    Bootstrapを使ってみる Button編

    BootstrapのButtonについて公式のページをみながら試してみる。
    まずはボタンから

    公式ページのドキュメント

    http://getbootstrap.com/css/#buttons

    <a>タグと<button>タグに適用することで、
    今風なボタンが手軽に表現できます

    ボタンの色

    button-1

    タグのclassにbtnとbtn-*****の2つを指定します。
    *****は内容に応じて以下ソースを参考に変更

    activeを指定するとさらに深い色合いになります。
    active

    サイズ

    ボタンの大きさを変更できる
    大きい順に btn-lg > 通常 > btn-sm > btn-xs です。
    sizes

    ボタンの幅を親のタグ要素の幅いっぱいに広げる
    block

    disable

    非活性のオプションにも対応しています。
    マウスを重ねるとカーソルのアイコンも変わります。

    disable

    Bootstrapを使ってみる 準備編

    デザインフレームワークのBootStrapを勉強してみる。

    とりあえず以下の本家サイトからDLしてくる。

    http://getbootstrap.com/getting-started/#examples

    DLしたファイルを解凍して
    以下のようにindex.htmlを作ります。

    3

    サンプルコードがDLページの下部にあるので
    それをコピペして貼り付けましょう。
    めんどくさい方は以下コピペして保存。

    index.htmlをブラウザで開くと
    フォントが変わっているのがわかります。
    上がBootstrap適用あり、下が適用なし

    20150829-2

    ひらくPCバッグを買おう

    最近、勉強会とか行くとちらほら見かけて、
    あれ便利そうだなぁ・・・なんて思ってた。

    ・結構な容量が入りそう
    ・ショルダーなら両手が空く
    ・物の出し入れがしやすそう

    なんていうのがいいなぁと思ったポイントなんですが、
    特に物の出し入れがしやすそうというのは、
    出かけるときにガジェットをたくさんバッグに入れる人にとって、
    それだけで大きな価値がある。

    調べてみるとバージョンも結構あった
    悩む・・・・

    通常バージョン

    通常バージョン

    EverNote Edition

    https://www.evernote.com/market/feature/commuter-bag-jp?sku=BAGS00101

    週アス×VAIOコラボ版

    http://ascii-store.jp/p/2015021600001/?aid=wamplus

     

     

    以下は完売 現在は購入不可
    2周年記念 限定カラー

    http://vik.jp/news/2014/#news19

    週アスコラボ版

    http://weekly.ascii.jp/elem/000/000/225/225993/

     

     

    ちなみにEvernote Editionと他は若干作りに差があるようです。
    こちらにわかりやすくまとめられています。

    ひらくPCバッグ 新旧2種 Evernoteエディションの比較

    http://goryugo.com/20131101/triangle_commuter_bag/

     

    カラーは、EverNote Editionのダークグレーが好きだけど、
    トータルでは2周年記念モデルのグレー×パープルが一番だなぁ。
    再販して欲しい・・・・。

    とはいえ、ないものを期待して待っていても意味が無いので、
    今のところ、通常モデルのグレーが最有力候補。

     

    パソコンバッグ【ひらくPCバッグ】PCバック パソコンバック PCケース メンズ ショルダー バッグ SUPER CLASSIC パソコン ケース MBP15インチまで ipad ipad3 ipad4も収納 かっこいい 持ち運ぶ おしゃれ いしたにまさき ひらく 開く ビジネスバッグ 肩掛け 自立 バック

    ひらくPCバッグ
    価格:20,550円(税込、送料別)

    Paiza選手権 part3

    Part1はこちら
    Part2はこちら

    いよいよラストの問題。
    レナのほうを選びました。もう一人の方は確認しませんでしたが問題違うのかな?
    ちなみに問題はこれで最後です。

    ■問題
    レナとシリコンバレーに来たと思ったら、会社のメインシステムで障害が発生!? しかもこのシステムを作った人達はもう会社に一人も居ないとの事。この危機を乗り切って俺の実力を全社に見せてやる!!
    障害を起こしているのは表を計算するアプリケーションです。表は横 x マス、縦 y マスで構成されており、各マスには数字が入っています。 あなたは範囲選択されたマスを合計するプログラムを書かなくてはいけません。
    選択範囲は左上のマスと右上のマスが指定され、そのマスを含んだ矩形の内側の範囲を複数の箇所を選択することが出来ます。矩形が重なるような選択範囲が指定された場合、選択部分は結合され多角形になります。

    paiza3_q

    選択範囲に含まれるマスの全てを合計した数字を出力するプログラムを作成してください。

     

    最後にしてようやく手応えありそうなのが出てきたな!

    ■提出コード

    ■採点結果

    paiza3

    毎度毎度面白い企画だな~と思いながら参加してます。
    次回も開催されたらやってみよう。

    Paiza選手権 part2

    Part1はこちら

    期間が空いてしまいましたが、
    Part2いってみます

    ■問題
    レナたんのパパが経営する会社の入社試験を受ける事になってしまった達也。
    上手くいけば新しい仕事に就けるし、レナたんとの関係も進行しちゃう!?
    貴方はある売上を集計するソフトウェアの開発をしています。
    月曜日から始まる n 日分の売上データ s 円が改行区切りで入力されます。nは必ず7の倍数です。

    月曜日から日曜日までの各曜日の合計を改行区切りで出力して下さい。

     

    ■提出したコードはこちら

    ■結果はこちら
    paiza2

    Paiza選手権 Part1

    9770054403_1ce7b08fab_z

    Paizaの恒例プログラマ腕試し
    やってみました。

    会を重ねる毎に萌え方面に
    尖ってきていますが、
    別に普通にやればいいんじゃないかと
    思うのは私だけですかね。

     

    マンガ版「俺の許嫁と幼なじみが修羅場すぎる」|paizaオンラインハッカソン5

    https://paiza.jp/poh/enshura

     

    今回は3問仕立てなので、まずは1問目

    ま、要は奇数字の文字を出力すればいいってことですね。
    書いたコードはこちら

     

    ■採点結果
    paiza01

    Part2に続く

    日付書式のTとZ

    9769800351_808bdd20c6_z
    サイボウズLiveのAPI叩いて、
    取得できた日付データを見て
    ふと気づいた。

    「あれ?これ実際の時間とちがくね?」

    ちなみに更新日時だったんだけど、
    実際に更新した時間と何時間も違う。

    バグか!?

    よくみると表記法なんか見たことない。↓こんなの
    2010-10-29T02:39:46Z

    日付にT、時間にZってなんだろうと調べてみた結果。

    ISO8601のwikiに答えがあった。

    上の表記については日付と時刻の組み合わせってところに書いてあって、
    後ろにZ付くと世界協定時(UTC)、つまりグリニッジ標準時だそうな。

    なるほど、グリニッジ標準時と日本の標準時は9時間の時差があるから、
    その分ずれてるのか。

    というわけで、日本時間にするには9時間プラスしてあげればOK
    以下、PHPでの例