Springboot2でポートフォリオチャレンジ。

お久しぶりです。

最近また色々触り始めたので、備忘録として。

技術的なものですが、Springboot2で認証とサイトの基礎を作るお話です。

Springboot2の踏みやすい地雷

以下2点が特に引っかかりやすいものだと思う。

このあたりの話を触れているサイトがなかなかない。

・パッケージ配置

パッケージ配置の位置が正しくないとControllerやConfigクラスが正しく機能しない。

[アプリケーション名]Applicationという名称で作られる、

SpringBoot2のエントリーポイントのあるクラスと同じパッケージの中に

分割用のパッケージを配置すること。

・Spring securityを使用した認証

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity web)throws Exception{
        web.authorizeRequests()
                .antMatchers("/css/**", "/images/**", "/js/**","/login-error")
                .permitAll()
                .anyRequest()
                .authenticated();

        web.formLogin()
                .loginPage("/login")
                .defaultSuccessUrl("/join")
                .failureUrl("/login-error")
                .permitAll();
    }
}

認証時、使用するログインページ等を指定するが、

ログインページは.loginPage()、

認証成功時に遷移するページは.defaultSuccessUrl()、

ログイン失敗時に遷移するページは.failureUrl()で指定する。

今回、この問題の解決にはTwitterにて、ぢつにんさんにご指導を頂いた。

重ねて御礼を申し上げたい。ありがとうございました。

twitter.com

詳細なコードは後ほどGithubで公開する予定。

しかし、まだ未完成なので一度privateに戻しておく。

この点を抑えておけばまずは大丈夫と思われる。

プログラマから見たデザインのお話

お久しぶりです。

仕事探しは応募したりしながらも遅々としていますが、

それでも、昨日よりは今日、今日よりは明日、の精神でコツコツつついています。

近況と、前置き

最近は、WEBのデザイナー職にも応募を掛けてみることにしました。

コードをまず手につけるというところにおいては、

CSSとHTMLの世界でも早々変わりはないのかな、位のゆるい認識です。

最も、現場に入ればJavascriptのフレームワークがあり、

更にBootstrapなどのCSSフレームワークや、

Thymeleafなどのテンプレートエンジンもありますので、一筋縄では無いですが。

しかし、そんな中でもデザイン面の知識を整理してみるのは悪いことではないです。

デザイン一つ取ったとしても、最終的に実装するのはこちら側。

ある程度、抑えるべきところを抑えたデザインにしてくれないと、

工数は指数関数的に膨れ上がります。

なので、まずは一つ知識を抑えてみよう、と。

今手持ちにある知識を軽く棚卸しして、概要と共に一度整理すると同時に、

「ここを抑えてほしい」という、勘所をきちんと明らかにするのが目的です。

Zレイアウト、Nレイアウト

ディスプレイ内の人間の目線の動きをシミュレーションしたとき、

原則として横書きの文章を見る時はアルファベットのZを描くように目が動きます。

大多数のサイトで左上にロゴが、次にメニューが上に来るのはこれを踏まえてです。

人間工学的に自然な形、と言ったところだと思います。

これを踏まえたレイアウトが、Zレイアウトと名前付けされています。

逆に、縦書きの文章を読む場合は、N字のように目は動きます。

縦書きの小説サイトなら、左上にロゴやマークが来る方がベターでしょう。

最も、サイト本体と考えた場合は大概が横書きが軸である以上、

Zレイアウトが使われることが9割近いと思います。

聖杯レイアウト

聖杯、Holy Grailレイアウトと呼ばれるレイアウトは、

ヘッダーがあってナビゲーション等のサイドメニューが左右に配されてあり、

画面下にフッターがある、といった形のレイアウト。

Webの黎明期から使われてきている伝統的なレイアウトであり、

同時にCSSにおいては古典的な問題としても扱われてきました。

こことかが詳しいのではないでしょうか。

https://hashrock.github.io/solved-by-flexbox-ja/demos/holy-grail/

抑えるべきデザインの潮流

さて、レイアウトについてはまずは上の2つを抑えた上で、

最近のデザインについて触れていこうと思います。

最近では、アイコンはわかりやすく共通認識を固め、無駄を排してシンプルに。

その上で出来得る限りわかりやすいデザインで、というのが肝になっています。

よく化粧品などのサイトに有るような華美なデザインはよく目を引きますが、

根幹としてサイトの機能性を損なうのでは本末転倒です。

そのため、骨子としてきちんと抑えるべきはできる限りシンプルに、

わかりやすいデザインで固めることが必要になってきます。

また、最近ではスマートフォンやタブレットPC等、

PCのホームページをモバイルで表示することも多くなってきました。

PCサイトと言えども、

モバイルに対する意識をきちんと持たないと閲覧においては厳しくなってきています。

この、PC-モバイル端末間の対応において、デザイン側で意識しなればならないのは、

「レイアウトの再利用性」、「共通化」の二点です。

ここを抑えずに、コロコロと要素を変えてしまうと実装で地獄になります。

そして、この2つを両立させるため、

最近ではフラットデザイン2.0や、

マテリアルデザインと呼ばれる手法を使うのが主流です。

マテリアルデザイン

マテリアルデザインとはなにか、と聞かれた場合は、

真っ先に浮かぶのは四角い付箋です。

紙とインクのイメージで、オブジェクトの重なりでものを表現していく手法です。

要素を重ねたり、サイズを変えたりしながら、

デザイン面で表現したいものを表現していくのがマテリアルデザインの骨子でしょう。

細かい制約は多々ありますが、こざっぱり、かつシンプルに考えるなら。

「机の上の付箋で表現できないレイアウトをしない」くらいになるでしょうか。

裏を返せば、これできちんと表現ができるなら、

再利用と共通化はそう難しいことではないと思います。

詳細をガッツリ突き詰めれば、色々出てきますが。

まずはここが軸ではないかなという認識です。

フラットデザイン2.0 

フラットデザインとはなにか、と聞かれた場合は、

真っ先に浮かぶのは白いご飯であり、乾パンです。

変な味付けのない、何回見ても飽きないシンプルなレイアウトにする手法です。

機能性を損なわないレベルで、最低限のナビゲーションやアクションを加えつつ、

できる限りこざっぱりとまとめ上げて、

リッチな要素を引き立てるところは引き立てる。

1.0との違いは、1.0は高級なリッチな要素さえも抜いて、

できる限りフラットに作ろうとするところでしょうか。こう、のっぺりとした感じに。

個人的には、2.0のほうが比較的わかりやすく、

かつデザイン性もあると思うので、こっちが好みです。

こっちの場合は、

「表に出す要素数をできる限り絞り、

　必要なものについてはアクションによってさらなる動きを見せる」

くらいのゆるい認識で見ています。

アンドロイドのスマートフォンを使うとわかると思いますが、

右下にフロートボタンがあって、

それをタッチすると他のメニューのボタンが出てくることも多いですよね。

アレも一つのフラットデザインなのだと思います。

今のトレンドとして見たときに

今のところは2つ程度。

いろいろなデザインが今は浮かんでは消えてを繰り返しています。

しかし、まずは大筋の幹となるデザインの流れはこの2つという認識です。

ここを抑えておけば、まずはいいのかなというところです。

詳細は、追って調べるのもいいと思いますが、

最低限この2つを押さえれば、実装側にも優しい世界が広がるのかなと思います。

ポートフォリオを作ろう

お疲れさまです。

いろいろ悩ましい事態が起きつつあります。

色々な綺麗事はたくさんあるでしょうが、泥臭いお話です。

悩ましい中ですが、悶々とする頭の中の整理にお付き合いをいただければ幸いです。

ポートフォリオの要求

ポートフォリオを作らないと就職すらままならない。

現状の面談だと生々しい本音はこれではないかなというのが感想です。

そして、正直なところ、サーバーサイドのエンジニアの側として、

ポートフォリオというものは＊難しい＊ものです。

より誤魔化さず本音を言ってしまいましょう。　正確には、面倒がすぎる。

サーバーを整え、デザインを整え、バックエンドに機能を実装する。

簡単に書けばこれだけですが、

実際の工数、気にするべきことを思うと不毛極まりないため、

「要らないならやりたくない」というのが正直な感想です。

サーバーを整える

一言に言いますが、気にするべきは多々に渡ります。

セキュリティを固めないと、

レンタルサーバーを足場にして他者への攻撃に使われかねませんし、

いざLinuxのレンタルサーバーを借りて物を出すにしてもお金もかかります。

そして、LinuxでWebサーバーを表示するだけでも、

インストールするソフトウェアが多く、またセットアップもしなければなりません。

どうしようこれというところです。

デザインを整える

一言に言いますが、フルスクラッチのデザインは工数が鬼です。

HTML、CSS、Javascript。一人で全部やる、というのは厳しい物があります。

まともなものを動かせるようになるまで、どれだけ手間がかかるのか。

仕事でやるならばともかくとして、1個人でリソースをどこまで出すことになるのか。

現場で戦う身としては、正直考えたくもないです。

バックエンドに機能を実装する

これもどこまで必要なのか、という課題があります。

実際のコードはポートフォリオを見る側からすると、表に見えません。

Githubでコードを公開するのが必須になるでしょうが、

そこまで見る人はどこまで居るのか。

技術者が見るならばわかりますが、

採用に立つ側が技術者の人であるという保証もありません。

この点が頭を抱える点です。機能として何が必要なのだろうか、という。

サービスを利用してショートカットを

ここまでネガティブなことを書き連ねましたが、

正直、考えれば考えるほど面倒がつもります。

できる限り面倒は機械に押し付けるのが我々の仕事です。

そこで、まずこの点をショートカットできるサービスを当たることにしました。

サーバーを簡単に整える

Heroku

https://jp.heroku.com/

Herokuを噛ませてしまうのが正解かなと思います。

バックエンドはAWSで、そのラッパーとして機能するサービスです。

フリープランもありますし、

ホビープランならば700円程度。これで良いでしょう。

デザインを簡単に整える

BootstrapMade

https://bootstrapmade.com/

Colorlib

https://colorlib.com/wp/cat/bootstrap/

無料のBootstrapのデザインテンプレートに手を入れて、

デザインを固めてしまえば手間がかからず済むのではないかな、

という考えです。

他者のポートフォリオを見てみると（後述）、

実際は海外圏のテンプレートをカスタマイズして見た目を整えています。

肩肘をはらず、このあたりなら文句もないのかなと。

バックエンドに機能を実装する

こちらがどちらかというと本職ですので、まずはJavaとSpringbootかなと。

良さげなデザインにログインページを作成し、

簡易なログインページで管理画面のモックアップに移るか、

それこそログイン成功のブランクページを表示するだけでも良いかも知れません。

「ログインが出来る」事が重要という認識です。

セキュリティ問題はつきまといますが、

フレームワークに押し付けるのが手としては上手いでしょう。

他者のポートフォリオを見てみよう

HodaLab

https://hodalab.com/portfolio/

サーバーサイドしかやってこなかったエンジニアがポートフォリオを作った話

https://qiita.com/wakaba-bbq/items/116ba7b84dc9b211e4e7

NAMIZATO SERVERSIDE-ENGINEER

https://namizatork.com/

全体的に力が入った、手打ちのものもありますが・・・。

レベルが高いので尻込みするところもあります。

しかし、まずは表に出すことが優先かなと思います。

海外圏のテンプレートに手を入れられるだけでも、

少しは技術力の証明になるでしょう。

実務を考えれば、まずある程度デザインがあってそこからのお話です。

こうするのが良いのかな、という認識のもとに、

やってみるのが正解なのかも知れません。

備忘録として、自分の触れたツールと技術を列挙しておこうの巻。

お久しぶりです。　そして、お疲れさまです。

見てくれている人がどれだけいるのかもわかりませんが、

それでもふと更新したくなる時もあるもので。

近況

仕事が見つからず、年の瀬になってしまいました。

色々探すのですが、条件面で折り合わなかったり、

客先常駐の仕事ばかりで応募する気になれなかったりしています。

今、仕事を探している真っ最中ですので、

もしよろしければお話があったら良いなぁとか思ったりもしています。

というか、客先常駐やSES以外ならやるので、お仕事をください。割と切実に。

そして、暇な合間を利用して最近は筋トレに手を出し始めました。

本としてはプリズナートレーニング（原題 Convict conditioning)、

大分類としてはキャリステニクスと呼ばれる分類のものです。

プリズナートレーニング 圧倒的な強さを手に入れる究極の自重筋トレ

プリズナートレーニング 超絶‼グリップ&関節編 永遠の強さを手に入れる最凶の自重筋トレ

使っている本はこの2つ。

表紙がアレなので、原題の表紙版のカバーが欲しいものですが。

本題

さて、仕事から離れるとプログラムそのものから離れることになりがちで、

「こういうとき良いツールがあったはずなんだけど……」と、

技術者としては時々思い出すことが辛くなる瞬間があったりもします。

そこで、しばらく書かなかったこのブログを利用して、

知識を棚卸ししてみようかと思ったのです。

迷ったらここを見ればいい、的な備忘録です。

活動としては専ら、普段ツイッターで技術的で良さげなものを見つけたら、

いいねでブックマーク代わりにしていました。

こっちに移しておけば、まぁはてなブログが潰れない限り、

外部から見ることもできます。

そんな、ツールのメモ書きを兼ねたものです。

ちまちまと時々追加したりしていきます。まぁ、いつもと同じです。 

コンソールツール

Cmder

https://cmder.net/

2019/12/25現時点で第一選択肢に入る。

汎用で使いやすい。

Windows Powershell

https://github.com/powershell/powershell

pathを通す等、Windowsの標準機能を呼ぶときに。

Windows Terminal

https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab

プレビュー版。今後はこちらも選択肢に入ってくるだろう。

正式版を待って実用してみること。

SQL作成ツール

A5:SQL Mk-2

https://a5m2.mmatsubara.com/

使い方を知っておけばまずは第一選択肢に入る。

実際、Springboot + Mybatisの組み合わせなど、

生でSQLをガリガリ書くことになることは多い。

DBeaver 

https://dbeaver.io/

2019/12/25時点、初めて知ったもの。

使い勝手はA5と同じくらいらしい。選択肢の一つに入れておいて損はない。

エディタ・IDE

Visual Studio Code

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

言語用に特化したエディタがなければ、汎用の第一選択肢。

プラグインさえ入れれば、ほぼなんでも書くことのできるエディタとして機能する。

Visual Studio

https://visualstudio.microsoft.com/ja/vs/

C#を書く際の第一選択肢。

基本、Microsoftの技術周りであればこれが第一の選択肢となる。

総じて使いやすくまとまっていると思う。

InteliJ IDEA

https://www.jetbrains.com/ja-jp/idea/

2019/12/25時点、現在Ultimateのライセンスを所持している。

Java等の言語であれば第一選択肢になる。

総じて使いやすく、便利であるので抑えておいて損はない。

Eclipse

https://mergedoc.osdn.jp/

Javaの無料環境では第一選択肢。

最近はVisual Studio CodeでJavaを書くためのプラグインが配布されているため、

下手すると座を追われる可能性が出てきている。開発の動向等を注視すること。

Android Studio

https://developer.android.com/studio/?hl=ja

Androidアプリの開発であれば第一選択肢。

Kotlin等を使用して作成する際もほぼこれになるであろう。

実行環境

基本的には言語の公式サイトのもの、現場で指定されたものを使用するが、

Javaだけは実行環境周りが混沌としているために自己標準を一つ定める。

Zulu Community

https://jp.azul.com/downloads/zulu-community/?&architecture=x86-64-bit&package=jdk

Javaを使用する際には自分は第一選択肢としている。

msi形式のインストーラーを配布しており、Windows環境において、

インストーラーでインストールするだけでJavaが動くために手間が無い。

Linuxやその他環境向けのインストーラーも豊富であるため、

まず使えるならばこちらを使うほうがトータル楽であろう。

バージョン管理システム・及び周辺システム

Git

https://git-scm.com/

デファクトスタンダードであるため、第一選択肢である。

上記のコンソールツールとセットで運用することが多い。

Github Desktop

https://desktop.github.com/

GUIツールとして第一選択肢としている。

コンソールで認証さえ通しておけば、Github以外のリポジトリでも使えるため、

その点を忘れないこと。

ソースコード可視化

Sourcetrail 

https://github.com/CoatiSoftware/Sourcetrail

ソースコードを可視化するツール。

コードのつながりを認識しやすくする。

Vue.js講義記録4

今日からまたぽつぽつと。
昨日はひたすらに眠くて寝てしまった。
疲れるとだめだね、何事も。

v-ifメソッド

<div id="app">
    <p v-if="value > 20"> up to 20</p>
    <p v-else-if="value > 10"> up to 10</p>
    <p v-else>under 10</p>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value: 10
    }
})
</script>

htmlタグの中でif文を使うことができる。
タグの中に条件式を直で書いて、その内容を表示する。
組み合わせに寄っては、
より動的にパラメータによって切り替えるという芸当もできそうだ。

v-showメソッド

<div id="app">
    <p v-show="value">value is true</p>
    <p v-show="!value">value is false</p>

    <button v-on:click="value = !value"></button>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value: true
    }
})
</script>

クリックごとで要素の表示非表示を切り替えたりする場合はv-showを使う。
使い方を覚えれば簡単である。

v-forメソッド

<div id="app">
   <tbody>
   <tr v-for="worker is workers">
       <td>{{worker.name}}</td>
       <td>{{worker.title}}</td>
    </tr>

    <tr v-for="(worker,index) is workers">
       <td>{{worker.name}}</td>
       <td>{{worker.title}}</td>
       <td>{{index}}</td>
    </tr>
   </tbody>
</div>

<script>
new Vue({
    el:'#app',
    workers:{
        {name:'attu',title:'tester' },
        {name:'worker1',title:'tester2'}
    }
})
</script>

v-forで項目の繰り返しができる。
こういうことができるようになると、ほぼテンプレートエンジンの感がしてくる。
indexやpropertyNameをセットで引数に指定すれば、
indexの数字や項目名も取れる。
めちゃめちゃ便利に感じるぞ、これは。

次回からは中身を少し簡略化していく。
繰り返しの注意事項になるけれど、
詳細は講座を見てほしい。あまり出しすぎても講座の人に失礼だしね。

Vue.js講義記録3

今日もぽつぽつと。
まとめて書いていく方がトータルいいのかもしれないね。
著作権とか、そっちの方も気になる。　もしまずそうならば教えてほしい。
改善はしていきたいと思うから、うん。

keyupメソッド

<div id="app">
    <input type="text" v-on:keyup.enter="pressEnter"/>
</div>

<script>
new Vue({
    el:'#app',
    methods:{
        pressEnter: function(){
           alert("enter key press.")
        }
    }
})
</script>

keyupメソッドで各種キー操作を呼び出せる。
この場合は入力項目でエンターキーを押すとalertが発生するようだ。
書き方はv-onの時と同じ。 メソッドチェーンで複数のキーを指定することもできる。

clickメソッドにメソッドチェーンでキーを指定すると、
押しながらクリックしないと反応しないボタンを作ることができる。

deta binding

<div id="app">
    <input type="text" v-model="dataText"/>
    <p>{{ dataText }}</p>
</div>

<script>
new Vue({
    el:'#app',
    data: {
        dataText:''
    }
})
</script>

一番シンプルなデータバインディングは、v-model属性でdataTextを指定すること。
メソッドチェーンで各種操作を行うこともできる。

v-htmlメソッド

<div id="app">
    <div v-html="data"></div>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        htmldata:'<h2>testing</h2>'
    }
})
</script>

htmlタグは通常レンダリングされて無害化されるため、
そのまま表示されない。表示する場合はv-htmlを使う。

v-ifメソッド

<div id="app">
    <p v-if="value > 20"> up to 20</p>
    <p v-else-if="value > 10"> up to 10</p>
    <p v-else>under 10</p>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value: 10
    }
})
</script>

htmlタグの中でif文を使うことができる。
タグの中に条件式を直で書いて、その内容を表示する。
組み合わせに寄っては、
より動的にパラメータによって切り替えるという芸当もできそうだ。

Vue.js講義記録2

引き続き今日もやっていこうと思う。
Steamでゲームを買ってしまったのでペースは落ちるかもしれないけれど。
サマーセール万歳だ。

とりあえず、枠組みだけ。
あとで下にテキストを貼り付けていく形にする。

タイトルの付け方

<div id="app">
    <div v-bind:title="one + ' ' + two">title test</div>
</div>

<script>
new Vue({
    el:'#app',
    data:{
      one:'one',
      two:'two',
    }
})
</script>

タイトルをつけるやり方になる。
小難しいことはあまりない。
どちらかというと、v-bindプロパティの中では簡易な式もかける、のがメイン。

ボタンを動かそう

<div id="app">
    <button v-on:click="buttonAct">Click</button>
</div>

<script>
new Vue({
    el:'#app',
    methods:{
        buttonAct: function(){
            alert("button now")
        }
    }
})
</script>

ボタンの動かし方。　v-on:プロパティの後に動作、
その後動かすメソッド名を記述する。 v-on:chenge="workMethod"
のような書き方になるようだ。

eventを使ってみよう

<div id="app">
    <button v-on:click="buttonAct("click msg",$event)>Click</button>
</div>

<script>
new Vue({
    el:'#app',
    methods:{
        buttonAct: function(message,event){
            console.log(event);
            alert(message);
        }
    }
})
</script>

$event でクリックされた際の座標や、スクロールの幅等を取得することができる。
これをfunctionで引数として受け取って処理すると、 画面サイズによってモノを表示する、しないといった処理ができるようだ。