Javascript

django-debug-toolbarを導入してみたところ「サイドバーは表示されるにも関わらず、パネルをクリックした際、表示されるはずの詳細情報が表示されない」という謎現象に遭遇しました。

デザインの都合でbuttonタグではなく、aタグを利用したい場合があります。

そんなときに使える方法を残しておきます。

aタグでPOSTする方法

<form method="post" name="form_1" id="form_1" action="data/post">
    <input type="hidden" name="user_name" placeholder="ユーザー名">
    <a href="javascript:form_1.submit()">リンク名</a>
</form>

hrefの値をフォームにしてあげるのが、一番簡単そう。

ブラウザ上でお絵かきしたい！

そんな時に便利な**「fabric.js」**というライブラリのご紹介。

PCでもスマートフォンでも利用できます。

導入

導入方法はとても簡単。

前回までにブログの基本的な機能を作成しました。
今回は、いいね機能を実装してみたいと思います。

シリーズ一覧

1. プロジェクトの作成とアプリケーションの作成
2. view関数の書き方
3. URLの指定の仕方(URLディスパッチャ)
4. データベース(モデル)の設定
5. 記事の投稿ページの作成
6. 記事の一覧ページと詳細ページの追加
7. 記事の編集ページと記事の削除機能の追加
8. いいね機能の追加 <- 今回
9. コメント機能の追加
10. Bootstrapを利用したwebデザイン

データベースの確認

データベースの記事のテーブルに新しく「いいね」の数を保存するカラムが必要になりました。
なので、models.pyを編集して「いいね」数を保存できるように変更します。

最近ではもはや当然のページ内リンクをクリックするとスルスルーっと移動するアニメーションの実装の仕方を紹介しようと思います。

HTML

<a href="#top">トップへ移動</a>

HTML側は特別な設定は必要ありません。
普通にページ内リンクを貼るだけでokです。

最近はではほとんどのサイトでSNSでシェアするボタンが付いているのを目にします。
というわけで自分のサイトにも実装してみます。

シェアボタン設置前にやるべき事

シェアボタンを設定する前に下記の事項を確認しておきましょう！

はじめに

なぜ自動保存機能を付けようと思い至ったかと申し上げますと、
先日、30分くらいかけて編集していたメモ(当サイト記事)を更新する時、ネットワークのエラーで送信に失敗**「書いていた内容を全喪失する」**という悲しい事故が発生いたしました。

このサイトのメモの内容はマークダウンで書き込んでいるのですが、
何件か書き込んだあたりで「普通のフォームだと書きづらい」、「編集しながらどんな見た目になるのか確認したい」と思いました。
そこで、今回は、JavaScriptで簡単にサイトにマークダウンエディタが組み込める「SimpleMDE」をご紹介します。