gepuro.net
gepulog

データ分析エンジニアによる備忘録的ブログ

編集画面にリアルタイムでのプレビューを付けよう!

wikiやブログなどでの投稿画面において、リアルタイムでプレビュー画面を表示させるのは、利便性がかなり向上する。その便利さを知ったのは、ATNDというイベント告知・管理サイトです。このブログに移る前に利用していたブログサービスでは、確認の度に別のページに遷移する必要がありました。そのため、書きながら確認という作業が出来なくて不便を感じることも。(数式や記法の確認など)

なので、このブログシステムでは、編集画面にプレビュー画面を表示させて、Markdown法で書いた結果を逐次的に確認出来るようにしています。リアルタイムプレビュー付きのHTMLエディタを作ろう - jQuery入門のサイトを参考に作成しました。現段階では、直にhtmlやJavaScriptを書けるようになっていますが、管理者でないと利用できないようになっているので、問題はないと考えてる。

リアルタイムのプレビュー画面を設置すると非常に利便性が向上するのだが、懸念事項は無いのだろうか。今の段階で思い浮かぶのは、トラフィック量が増えることであろうか。文字を入力する度に通信を行なっているのであるから、多人数で利用する場合は、問題が起きかねない。プレビューをJavaScriptのみで完結できるならば、このような心配は無くなるのかもしれない。

デザイン変更その2

カテゴリを選択して表示した時に、サイドバーの色を変更するようにしました。 いままでは、色などの変化がないために、どのカテゴリを選択したかが分かりにくかったが、今回の変更によって改善された。パンくずリストの導入も検討したが、サイトの階層が深くなるような事は無いので、見送った。

また、内部的な変更のため気づくことは少ないかと思われるが、リファクタリングを少しだけ行なって、プログラムの整理を行ったり、不必要なCSSやJavaScriptを取り除いて、レスポンスの向上を行った。

管理者画面の修正や、ある条件下で起こるバグの修正を早く行いたいなあ。少しはまともになったら、ソースコードを公開できたら良いなあと思ってる。

デザイン変更

デザインを少しだけ変更しました。変更内容は、区切り線の削除とカテゴリ表示を日付の横に変更しました。少しずつでありますが、より見やすくしていけたらと思います。

記事一覧と

さっそくですが、 記事一覧 を作成しました。また、各記事ごとにtwitter上での反応を表示するウィジェットを貼りました。こっそりと変更した事としては、カテゴリの表示をprodcutみたいに変更したことですね。

検索機能は、どのように実装しようか。。。

いきなり仕様変更(コメント欄)

当初は、コメント欄を自作していましたが、twitter上でフォロワーの方に、スパム対策やSQLiteの行ロックを指摘して頂いたので、コメント欄をfacebookに変更しました。

このようなコメントを頂けると、非常に嬉しいですね。

Blogを引っ越した&作った

今まで、はてなダイアリーでブログを書いてきたが、折角の独自ドメインを取ったので、こちらに引越しました。それと共に、ブログの名前も変更しました。

実は、このブログは自分で作成しました。当初は、wordpressなどのように完成度の高いソフトウェアを使うのも良いですが、自分で作ってみた方が面白いと思いました。使用した主なソフトウェアは、次の通りです。

  • Python
  • SQLite3
  • Flask
  • Twitter Bootstrap

です。

このBlogのシステム自体は、とてもシンプルに作成していて、500Kバイト未満だったりします。

他にもライブラリ等を使用していますが、後ほど紹介して行けたらと思います。おそらくバグが出てくるので、直しながら使っていくかと。また、記事の一覧機能や検索機能など追加したい要素がいくつもあったりします。

XSS怖い