let textareaTab = {};
(function() {
    textareaTab.setEvent = function() {
        console.log("set textarea tab event.");
        var textareas = document.querySelectorAll('textarea');
        for (var ti = 0; ti < textareas.length; ti++) {
            textareas[ti].addEventListener('keydown', function(e) {
                if (e.keyCode === 9) {
                    e.preventDefault();
                    var isShift = e.shiftKey;
                    var elm = e.target;
                    var txt = elm.value;
                    var slct = {
                        left: elm.selectionStart,
                        right: elm.selectionEnd,
                    };
                    if (slct.left == slct.right && !isShift) {
                        elm.value = txt.substr(0, slct.left) + '\t' + txt.substr(slct.left, txt.length);
                        slct.left++;
                        slct.right++;
                    } else {
                        var lineStart = txt.substr(0, slct.left).split('\n').length - 1;
                        var lineEnd = txt.substr(0, slct.right).split('\n').length - 1;
                        var lines = txt.split('\n');
                        for (var i = lineStart; i <= lineEnd; i++) {
                            if (!isShift) {
                                lines[i] = '\t' + lines[i];
                                if (i == lineStart) {
                                    slct.left++;
                                }
                                slct.right++;
                            } else if (lines[i].substr(0, 1) == '\t') {
                                lines[i] = lines[i].substr(1);
                                if(i == lineStart) {
                                    slct.left--;
                                }
                                slct.right--;
                            }
                        }
                        elm.value = lines.join('\n');
                    }
                    elm.setSelectionRange(slct.left, slct.right);
                    return false;
                }
            })
        }
    }
})();

export default textareaTab;

exportしているので、別のjsからimportできます。

↓のように使います。

import textareaTab from './textarea_tab.js';

2019-01-04

なぜ8日をようかというのか疑問に思って調べてみた。

雑学

なぜ8日をようかと読むのか

yahoo知恵袋からです。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1239742622

八を「や」、日を「か」と読んで「やか」となったのが、時が経つにつれて「やうか」に変化し、それが現在では「ようか」と読まれるようになりました。蛇足かもしれませんが…八を「はち」と読むのは音読みで、「や」と読むのは訓読みです。かつ日を「にち」と読むのは音読みで、「か」と読むのは訓読みです。「ようか(やか)」は「八日」を単に訓読みで読んだだけと言えます。

goo辞書 https://dictionary.goo.ne.jp/jn/226193/meaning/m0u/

《「やか」の音変化》

どうやら、「やか」からの変化で良いみたいです。

「やか」から「ようか」に変化するとか、ほんとに？って疑いたくなってしまいますね。

真ん中の「う」がなんで入るかわからないですもん。

おなじように「7日」を「なのか」の「の」がなぜ入っているのかとか。

これはあれですかね。言いやすいからでしょうか？（これについては全く調べてないです）

日本語は不思議ですね。

2019-01-03

左側に表示するナビゲーションメニューについて調べたときに参考にしたサイト

css html javascript

ナビゲーションのメニューがまとまっているサイトです。

http://photoshopvip.net/97481

こういったサイトはよく見ます。とても助かりますね。

この中で使えそうだなと思ったものを紹介したいと思います。

まずはこれです。

https://codepen.io/MrsColombo/pen/mEeQwy

htmlがきれいで、templateの構文を使ってforでリストを生成できそうだと思った
cssで書かれているので、scssに直しやすい
jsが複雑じゃない

もちろん、少し修正は必要ですが、少ない工数できれいなメニューを作れそうです。 (左側に固定するメニューではないようで残念です…)

明るいサイトに合いそうです。

どんどん紹介します。

これですが、見た目はよいですが、少し片手落ちだと思いました。

https://codepen.io/maggiben/pen/rCIFu

クリックした際に、右側の矢印がアニメーションされない。つまり、なんであるのかわからないです。

このくらいならcssを追加して対応できそうです。

リストがabsolute指定されているので、要件によっては少し修正が必要かもしれません。

fixedではないということは、スクロール時に残らないということです。

スクロールするとリストが途切れているように見えてしまいます。

参考にする場合はcssの変更が必要そうですね。

いいかな？と思いましたがコードを見たら大変そうだったやつです。

https://codepen.io/andytran/pen/rsegt

haml(htmlではない)で書かれているので、htmlに直したほうが良いでしょう。 hamlで書きたい場合はそのままで無問題

ほとんどclassやidを使っていないので、独自定義するスタイルに影響しそうです。 (reset.scssとか、css フレームワークとか)

↓のように、タグにスタイルを入れているので、ページ内でリストを使っている場合は影響しそうです。（許容範囲内かな?）

nav ul li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
  border-left: 2px solid transparent;
}
nav ul li a:hover {
  background: #fff;
  padding-left: 20px;
  border-left: 2px solid #1abc9c;
  color: #1abc9c;
}

右側の矢印がアニメーションしてません。これは修正ですね。

2019-01-02

参考文献という英単語を調べたときに使ったサイト

english

結論から

参考文献 = 「Works Cited」 or 「reference」 or 「bibliography」

英単語を調べるのに、以下のサイトが役に立ちました。 https://eikaiwa.dmm.com/uknow/questions/19454/

といってもDMM英会話なんですけど。

読んだ時期によって解答が消えてたりするかもしれないので、引用をのせますね。

大学のレポートの最後に付ける、レポート内で使った資料のリストのことを、Works Citedと言います。worksは、もちろん仕事だったり研究だったりを示しますので、それが「文献」となります。一方「参考」というのは「(自分が)参考にした」つまり「(文献が)参考にされた」という、分詞形容詞-edを使ってcitedとなり、worksの後ろに付けます。MLAスタイルでも、APAスタイルでも、全てレポートの最後にはworks citedを付けてくださいね。

この解答が一番役にたったのですが、もちろんこの解答が正しいのかどうかも調べてます。

まずは、citedが「引用」「参考」という意味で使われるのかどうか。

これは英辞郎on webで調べました。 https://eow.alc.co.jp/search?q=%22cite%22&ref=hk

ついでにweblioでも調べてます。 https://ejje.weblio.jp/content/cite

ここまでで、どうやら「citeという単語が参考という意味で使われる」というのが解答が正しそうというのがわかりました。

次に、「レポートの最後でworks cited」と使うのかどうかを調べました。

参考文献がどんな使われ方をするのかは、調べなくてもよかったのですが、解答を読んで気になったので調べてみました。

まず↓のサイトでは「works」や「cite」という単語で検索しても出てきませんでした。

http://user.keio.ac.jp/~kiyota/kozo/Courses/References.html

Weblio英語勉強コラムのページです。 http://english-columns.weblio.jp/?p=5632

MLA（Modern Language Association style）は使用頻度が特に多い文献スタイルで、文学や言語の分野での使用が多くみられます。参考書目としての表記は「Works Cited」です。

ヒットしましたね。

ですが、そのすぐ下に↓のような文がありました。

APA(American Psychological Association)はMLAと比べ一般的に読みやすく表記されたスタイルで、社会科学やビジネスの分野での使用が多く見られます。参考書目としての表記は「Reference」です。

どうやら、referenceという単語もあるみたいです。

さらに、MLAフォーマット、APAフォーマットのように、どのように参考文献を書くかによって単語が変わるようです。

すごく面倒です。統一してほしいですよ…

ここまででやめても良かったのですが、ついでに英語サイトを調べてみました。

「works cited reference」で調べたときに出たサイトです。

http://www.citethisforme.com/blog/2017/06/27/69196

どうやら、「works cited」「reference」の他に「Bibliography」という単語もあるようです。

英語は読めないので、google翻訳の訳ですが、大方このような感じでした。

「bibliographyは、論文を書く際に参考にしたものだけではなく、準備段階で参考にしたものも含める」

のだそうです。

結局、参考文献という単語は「works cited」か「reference」を使うと良いと思います。

「bibliography」の場合はもっと準備段階も含めたい場合に使うと良いと思います。

2018-11-18

Djangoのモデルに定義していないフィールドを追加する方法

Django python

こんな感じのModelを定義しているときに、追加でフィールドを入れたくなったときがありました。

class Sample(models.Model):
    uuid = models.UUIDField(unique=True)
    created_at = models.DateTimeField(auto_now_add=True)
    modified_at = models.DateTimeField(auto_now=True)

    class Meta:
        db_table = 'sample'

いれたフィールドをtemplateで使用して画面に表示するといった具合で使いました。

↓のコードで対応することができました。

model.__setattr__('icon', 'icon/' + sample.author.username)

iconを表示する際にusernameの前にフォルダ名が必要だったのです。

ですが、Djangoのタグを使っていて文字列の連結ができないし、カスタムタグで拡張することもできない。（少なくとも私には見つけられませんでした。）

最初はmodelはorderdictだからmodel['icon']で対応できると思ったのですが、ダメでした。

2018-11-13

Djangoでページングを表示するための関数

Django python html css

Djangoでページング処理を作成する際に作った関数を紹介します。

コードの紹介になるので、紹介はコードにコメントにて行います。

前後のページを表示するための関数

# self.limit: データ表示数
def page_data(self, count, page):
    # count: データ数
    # page: 現在のページ番号
    current_page = page
    if count == 0 or count < self.limit:
        # データ数が0の場合に対応
        prev_page = 1
        next_page = 1
        page_limit = 1
    else:
        # ページの最後尾の数値をみつける。
        page_num = int(count / self.limit)
        # 割り切れない場合は+1して、あまりを表示できるようにする
        page_limit = page_num if count % self.limit == 0 else page_num + 1

        # 前のページが1未満にならないようにする
        prev_page = 1 if (current_page - 1) < 1 else current_page - 1
        # 次のページがページ番号の限界を超えないようにする
        next_page = page_limit if (current_page + 1) > page_limit else current_page + 1
    return {
        'prev': prev_page,  # 前のページ
        'current': current_page,  # 現在のページ
        'next': next_page,  # 次のページ
        'limit': page_limit,  # ページの限界
        'next_page': 'home',  # {% url next_page %}のように使用する
    }

テンプレートのコードをなくしてしまったので紹介できません。orz

returnで返しているデータからhtmlタグを作成するとできます。

範囲でページを表示するための関数

もう少しスマートに作成する方法がありそうです。

def get_page_list(self, data_size, current_page):
    PAGE_RANGE_SIZE = 5  # ページ番号を表示する数
    if data_size % self.limit == 0:
        page_limit = int(data_size / self.limit)
    else:
        # 割り切れない場合は+1して、あまりを表示できるようにする
        page_limit = int(data_size / self.limit) + 1
    page_list = []
    # ↓ startとendを計算して、あとでループに使用する
    start = current_page - 2
    if start < 1:
        start = 1

    end = start + PAGE_RANGE_SIZE
    if end > page_limit:
        end = page_limit + 1
        # ↓ を入れないとページ番号がずれる
        start = end - PAGE_RANGE_SIZE
        if start < 1:
            start = 1

    # ページ番号を取得する
    for pi in range(start, end):
        page_list.append(pi)
    return {
        'current': current_page,  # 現在のページ
        'limit': page_limit,  # ページ番号の限界
        'nums': page_list,  # ページ番号のリスト
        'next_page': 'home',  # {% url next_page %}のように使用する
    }

テンプレートを作成する。

bulmaというcss フレームワークを使用していますが、基本は同じかと思います。

横に長くなってしまって見づらいです。どうにかしたいところです。

<ul class="pagination-list">
    {% if page.current != 1 %}
    <!-- 現在のページが先頭なら表示しない -->
    <li><a class="pagination-link" href="{% url page.next_page %}?{%query_transform request page=1%}"><<</a></li>
    {% endif %}
    {% for num in page.nums %}
    <li>
        <!-- 現在のページの場合はクラスを追加する -->
        <a class="pagination-link {% if num == page.current %} is-current {% endif %}" href="{% url page.next_page %}?{%query_transform request page=num%}">{{num}}</a>
    </li>
    {% endfor %}
    {% if page.current != page.limit %}
    <!-- 現在のページが最後尾なら表示しない -->
    <li><a class="pagination-link" href="{% url page.next_page %}?{%query_transform request page=page.limit%}">>></a></li>
    {% endif %}
</ul>

query_transformというのは独自に作ったtagです。

これを使うと、クエリストリングをスマートに作成できます。

@register.simple_tag
def query_transform(request, **kwargs):
    updated = request.GET.copy()
    for k, v in kwargs.items():
        updated[k] = v

    return updated.urlencode()

これはどこかの記事で紹介していた気がします。

stackoverflowで載っていたものを使っています。

utamaro’s blog

誰かの役に立つ情報を発信するブログ

小説家になろう掲載中の恋愛系web小説まとめ

恋愛系

婚約破棄から始まる悪役令嬢の監獄スローライフ【Web版】

毒舌少女のために帰宅部辞めました

夢見る男子は現実主義者

公爵令嬢の嗜み

ある朝ツン過ぎる妹が隣で寝ていて急にデレ始めたので、幼馴染と後輩に相談したら修羅場になったんだけど！？～こんなハーレム嬉しくない！～

お隣さんと始める節約生活。電気代のために一緒の部屋で過ごしませんか？

空き巣犯のポンコツ巨乳お姉さんが口封じをしてくるせいで俺の貞操と命が危ないんだが

嘘の嫌いな女と嘘のつけない男

カメラの外で動いたら。

断食系男子、悟りを開く

優等生の幼なじみは私を狙う異常者でした。(Ｒ15版)

友人キャラの俺がモテまくるわけないだろ？

偽の恋人だったクラスの美少女たちが、本当に俺のことを好きになっていた件

そして僕は聖女を裏切った

そして少女は悪女の体を手に入れる

エリスの聖杯

落ちぶれ才女の幸福

妹フレグランス

ヤンデレの執着(ソレ)は果たして愛なのか？

乙女ゲームの破滅フラグしかない悪役令嬢に転生してしまった…

転生不幸～異世界孤児は成り上がる～

textarea内でtabを使えるようにするためのまとめ

textareaでtabを使えるようにするために参考にしたサイト