More than 5 years have passed since last update.

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

Last updated at 2017-05-27Posted at 2017-05-27

Express4 でフラッシュメッセージを利用する方法のメモの続きで、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 にアイコン表示の設定を追加します。

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

この設定で上記の様に、アイコンが表示される様になります。

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

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 に置いてあります。

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')));  // 静的コンテンツ  <<--追加    
<中略>