フロントエンド開発のスタート時にやること ( npmコマンド )

よく忘れるのでメモ
npm管理するルートディレクトリを決め、
そこで以下のコマンドを実行し

プロジェクト初期化 ( package.jsonが作成される)

nameとか色々入力を求められるがpackage.jsonに出力される内容なので
あとでいい!ってことで省略

必要なパッケージをインストールしていく

–saveオプションを付けることでpackage.jsonのdependenciesにインストールした内容が追加される。
このpackage.jsonを他環境に持っていって、以下のコマンドを打てば、
package.jsonの内容を読み取って、インストールをしてくれる。

インストールしたものはプロジェクトフォルダ内にnode_moduleというフォルダができ、
そこに展開されている。

開発環境でしか使用しないようなパッケージは以下でインストールする(package.jsonのdevDependenciesに追加)

インストール済みのパッケージ一覧を表示

パッケージを削除する

Spring-socialのtwitterでResourceAccessException

spring-socialのtwitterと連携しようと
/connect/twitterにアクセスしたら
エラーが出てハマったのでメモ

ちなみにapplication.ymlのspring.social.twitterのapp-idとapp-secret指定しただけの状態。

エラー内容

org.springframework.web.client.ResourceAccessException: I/O error on POST request for “https://api.twitter.com/oauth/request_token”: cannot retry due to server authentication, in streaming mode; nested exception is java.net.HttpRetryException: cannot retry due to server authentication, in streaming mode

原因

Stackoverflowに書いてありました。

twitterのディベロッパーサイトでアプリを登録する際にcallbackUrlを指定しないと
このエラーが出るらしい。

アプリ設定画面で”http://localhost:8080″と指定すると
エラーが解消されました。

githubの新規リポジトリ作成~開発開始までの流れ

何回もやる作業じゃないので
いつも手順が頭から抜ける。。。。のでメモ

githubでリポジトリを作成する。

github上の作業なので省略

ローカルリポジトリ作成

git管理したいディレクトリでコマンドプロンプト開いて

コミットするファイルをgitに登録

ローカルリポジトリにコミット

※-mでコミットコメントを指定してます。

gitの設定(省略可)

ユーザ名とemailの設定 コミットログに残るので。気にする人は設定しましょう。
どのリポジトリにもこの設定でいいよ!っていう人は「–global」を付けましょう

githubにpush

リモートリポジトリと紐付け

push!!

はい、これで完了

 

エラーが出る場合

pushでエラーが出る場合、リモートリポジトリと同期が取れてない可能性があるので
以下を実施

リモートの変更を取ってくる

リモートとローカルのコミット履歴情報を統合する

Eclipse起動エラー

STS(spring Tool Suite)落としてさーJavaの開発するぞ―!と起動しようとしたら
思わぬ起動エラーだったのでメモ

「Java was started but returned exit code=13」

sts-error

調べてみると、自分の環境のJavaを8にした時に64bit版じゃないのが入っていたようで、
64bit版を落として再度インストール→Pathを通して起動で解決!

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円(税込、送料別)