Express4 アイコン、静的な パブリックとプライベート コンテンツに関するメモ

[Express4 で フラッシュメッセージを利用する方法のメモ](http://qiita.com/MahoTakara/items/0a88d05ff93328035ad8)の続きで、Express アプリケーション・ジェネレータで、生成したアプリに、アイコンを追加して、静的コンテンツ、及び、ログインしないと表示しないプライベートコンテンツの処理に関する備忘録です。テンプレート・エンジンはJADEを利用しています。

## アイコンの追加

ウェブページのアイコンは、無料のファビコンのサイトからダウンロードして利用します。https://www.freefavicon.com/
次の様に、app.js の編集します。

~~~
var app = express();

// view engine setup                                                                                  
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public                                                    
app.use(favicon(path.join(__dirname, 'public/images', 'favicon.ico')));   // コメントを外して public/images とする
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
~~~
images の下に、ダウンロードした favicon.ico を配置します。

~~~
myapp$ tree public
public
├── hello.html
├── images
│   └── favicon.ico
├── javascripts
├── readme.txt
└── stylesheets
    ├── style.css
    └── style.styl
~~~
JADEテンプレートの layout.jade にアイコン表示の設定を追加します。

~~~file:myapp/views/layout.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='icon', href='/images/favicon.ico')  <<--- 追加
  body
    block content
~~~

この設定で上記の様に、アイコンが表示される様になります。
![スクリーンショット 2017-05-27 11.08.00.png](https://qiita-image-store.s3.amazonaws.com/0/42829/56400b4a-8659-7bcd-1d32-e6fb7e8fb3ed.png)

## 公開用 静的コンテンツの配信 

HTML,JavaScript,CSS などの静的コンテンツの配置場所は、public の下です。 セッション管理の対象外となるので、ログイン無しにコンテンツを閲覧できる場所になります。 

~~~
myapp$ tree public/
public/
├── hello.html  <-- public 以下に配置する
├── images
│   └── favicon.ico
├── javascripts
├── readme.txt
└── stylesheets
    ├── style.css
    └── style.styl
~~~

## 認証済みユーザー向け 静的コンテンツの配信

ログインで認証されたユーザーだけに、開示したいコンテンツの配置とフレームワークの編集の方法です。
認証済みユーザー向けのコンテンツの配置場所として、myapp の下に private を作成します。

~~~
myapp$ tree private
private
└── hello.html

0 directories, 1 file
~~~

app.js を編集して、private のフォルダのアクセス条件を認証済みユーザー限定とします。 次のコードの最終の１行を追加します。これで認証が無いとアクセスできない領域になります。 コードの全体は、https://github.com/takara9/myapp に置いてあります。 

~~~file:myapp/app.js抜粋
<中略>
// パブリックエリア  CSS プリプロセッサ設定                                                           
app.use(require('stylus').middleware(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

// ログインしないと見えないエリア                                                             
app.use(require('./login'));  // ログインのミドルウェア                                             
app.use('/', routes);         // ログイン画面、トップ画面送出                                         
app.use('/logout', routes);　 // ログアウト処理　POSTで対応                                           
app.use('/users', users);     // 動的コンテンツ表示                                            
app.use('/private', express.static(path.join(__dirname, 'private')));  // 静的コンテンツ  <<--追加    
<中略>
~~~

## 動作イメージ

トップページです。認証が未だの場合、ログインフォームが表示されます。

![スクリーンショット 2017-05-27 11.55.48.png](https://qiita-image-store.s3.amazonaws.com/0/42829/a55e2c66-f04b-f7a6-206b-8e9e58c0f993.png)

この時に、パブリックコンテンツをクリックすると、表示されますが、プライベートコンテンツは認証が無いので表示されません。
![スクリーンショット 2017-05-27 11.55.57.png](https://qiita-image-store.s3.amazonaws.com/0/42829/4554027a-09c7-0aac-6735-581b31975343.png)

ユーザー名とパスードをインプットして認証がされると、プライベートコンテンツが表示される様になります。 下記のログイン状態で、プリペートコンテンツをクリックすると次の画面へ遷移します。
![スクリーンショット 2017-05-27 11.56.07.png](https://qiita-image-store.s3.amazonaws.com/0/42829/48c7718e-7455-5a69-e06c-bf97d20ec143.png)

以下は、プライベートコンテンツの内容を表示です。
![スクリーンショット 2017-05-27 11.56.15.png](https://qiita-image-store.s3.amazonaws.com/0/42829/d075aefd-8b99-ca8c-2435-75c449ad7f65.png)



## 参考資料

* [Express での静的ファイルの提供](http://expressjs.com/ja/starter/static-files.html)
* [Jade FTW](https://gist.github.com/japboy/5402844)
* [Free Favicon](https://www.freefavicon.com/)
* [Nodeクックブック](https://www.amazon.co.jp/s/?ie=UTF8&keywords=node%E3%82%AF%E3%83%83%E3%82%AF%E3%83%96%E3%83%83%E3%82%AF&tag=googhydr-22&index=aps&jp-ad-ap=0&hvadid=163711515742&hvpos=1t1&hvnetw=g&hvrand=1503670032526496215&hvpone=&hvptwo=&hvqmt=e&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009298&hvtargid=kwd-46308139951&ref=pd_sl_700050m34z_e)