AdminLTEを使ってチャット画面を作ってみる

CSS, 開発

おはようございます。

急にチャット機能を作ってみたくなったので、
AdminLTEとPythonで実装してみます。

今回はとりあえず画面まわりだけAdminLTEで作ってみました。

スポンサーリンク

フォルダ構成

SampleChat

├─static
│ ├─css
│ │ │ AdminLTE.css
│ │ │ AdminLTE.min.css
│ │ │ bootstrap.min.css
│ │ │ font-awesome.min.css
│ │ │
│ │ └─skins
│ │    skin-blue.css
│ │    skin-blue.min.css
│ │
│ ├─img
│ │ konatsu.jpg
│ │ koume.jpg
│ │ riku.jpg
│ │ sora.jpg
│ │ umi.jpg
│ │
│ └─js
│    adminlte.min.js
│    bootstrap.min.js
│    jquery-ui.min.js
│    jquery.min.js

└─templates
index.html

画面

index.html

表示してみる

初期表示
初期表示

右上のコンタクトリストをクリックするとメンバーが表示されます。

コンタクトリスト
コンタクトリスト

まとめ

次回は、Pythonの Tornado もあわせて、
WebSocketによるチャット機能を実装していきます。

ではでは。

スポンサーリンク


関連するコンテンツ