一対多モデルを制作してhtmlに出力する時につまったところを解説。

今回はモデルに値を渡すことができたけど出力ができない時、確認した方がいいところを記載します。

<div>
{% for comment post.comments.all %}
{{ comment.user }}
{{ comment.text }}
{% endfor %}
</div>

今回はこのようなhtmlを出力して見たいと思います。

確認するべき点は三箇所
1.templateに出力するオブジェクトの書き方
2.related_nameをちゃんと定義しているか
3.viewsの設定

①templateに出力するオブジェクトの書き方

<div>
{% for comment post.comments.all %}
{{ comment.user }}
{{ comment.text }}
{% endfor %}
</div>

のpost.comments.all

コイツの具体的な書き方がわからなかったので、コイツの説明

post は変数でviewで渡した時の返り値

views.py

def Post(request):
    form = PostChatMessage()
    if request.method == 'POST':
       form = PostChatMessage(request.POST, request.FILES)
       if form.is_valid():
           post = form.save(commit=False)
           post.nickname = request.user
           post.save()
           return redirect('chat')
       else:
           form = PostChatMessage()
           return render(request, 'ChatSend.html', コイツ→{'error': 'Please type message'})
    return render(request, 'ChatSend.html', コイツ→{'form':form})

commnets はmodels.pyで定義したrelated_name

model.py

---略---
def Comment(models.Model):
    post = models.ForeignKey(ChatMessage, on_delete=models.CASCADE, related_name='comments')
--------

です。
お間違えのないように

②related_nameをちゃんと定義しているか

related_nameが定義されていなくても
model名_setで同等の使い方ができます。
又related_nameが定義されていても子model名とおんなじ名前だと動かないみたいです。

③viewsの設定

自分はここで詰まりました。

正

views.py

def ShowComments(request, pk):
    post = get_object_or_404(ChatMessage, pk=pk)
    return render(request, 'Comments.html', {'post':post}) 

誤

views.py

def ShowComments(request):
    post = Comment.object.all()
    return render(request, 'Comments.html', {'post':post}) 

下でも表示はされますが、一対多の関連付けが表示されないので子モデルが全て表示されます。

どうも、7noteです。今回はflexboxを使っていちょう切り、やって行こうと思います。

「♪〜〜（オープニング曲が流れる）」
「7noteクッキングレッスンへようこそ！」
「今回はオレンジを使っていちょう切りをマスターしましょう。」
「全2パートあるので、みなさん最後までついてきてください。」

最終完成予定イメージ

今回の材料はこちら(1人前)

ファイル	CSSプロパティ	意味
index.html
style.css	width: ~~; display: flex; flex-wrap: wrap;	横幅を設定 フレックスボックスの設定 端までいったら改行させる
orange_01.png		オレンジの画像（左上）
orange_02.png		オレンジの画像（右上）
orange_03.png		オレンジの画像（左下）
orange_04.png		オレンジの画像（右下）

作り方

1. index.htmlに4枚のオレンジの画像を用意
2. style.cssで、2×2に画像を並べる
3. それぞれの間に隙間を作って完成！（part2で作ります。）

1. index.htmlに4枚のオレンジの画像を用意

index.html

<div class="dish">
    <img src="orange_01.png" alt="オレンジ左上">
    <img src="orange_02.png" alt="オレンジ右上">
    <img src="orange_03.png" alt="オレンジ左下">
    <img src="orange_04.png" alt="オレンジ右下">
</div>

2. style.cssで、2×2に画像を並べる

style.css

    .dish {
        width: 400px; /*200pxの画像を2×2で並べるので400pxを指定*/
        display: flex; /*子要素を横並びにさせます。*/
        flex-wrap: wrap; /*並べたコンテンツが親要素からはみでたら、次の行にコンテンツを改行させる*/
    }

＼完成／（part2で続きを作るよ。）

解説・作り方のコツ

• part1では全部親要素にCSSを書くよ。
• [display: flex;]がないと、[flex-wrap: wrap;]は効かないから気をつけて！

明日「【初心者でもわかる】いちょう切り。part2（並べた要素に隙間を作る方法-flexbox編-）」公開予定。公開までお楽しみに！

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってね！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

レポート作成などに便利なGoogle Colaboratoryですが，pdf出力・HTML出力等が出来ません。
わざわざローカルにjupyterNotebookの環境構築をするのもめんどくさいので，Colab上でHTMLに変換しちゃいます。

https://colab.research.google.com/drive/10OX-YoiHPxHBMYXtxFWGQhkZxNEm2eVL?usp=sharing

from google.colab import files
import re

uploaded = files.upload()

for fn in uploaded.keys():
  fn_s = re.escape(fn)
  output_fn = fn.split('.', 1)[0]+'.html'
  output_fn_s = re.escape(output_fn)
  !jupyter nbconvert --to html $fn_s
  files.download(output_fn)
  !rm $fn_s

レポート作成などに便利なGoogle Colaboratoryですが，pdf出力・HTML出力等が出来ません。
わざわざローカルにjupyterNotebookの環境構築をするのもめんどくさいので，Colab上でHTMLに変換しちゃいます。

https://colab.research.google.com/drive/10OX-YoiHPxHBMYXtxFWGQhkZxNEm2eVL?usp=sharing

from google.colab import files
import re

uploaded = files.upload()

for fn in uploaded.keys():
  fn_s = re.escape(fn)
  output_fn = fn.split('.', 1)[0]+'.html'
  output_fn_s = re.escape(output_fn)
  !jupyter nbconvert --to html $fn_s
  files.download(output_fn)
  !rm $fn_s

レポート作成などに便利なGoogle Colaboratoryですが，pdf出力・HTML出力等が出来ません。
わざわざローカルにjupyterNotebookの環境構築をするのもめんどくさいので，Colab上でHTMLに変換しちゃいます。

https://colab.research.google.com/drive/10OX-YoiHPxHBMYXtxFWGQhkZxNEm2eVL?usp=sharing

from google.colab import files
import re

uploaded = files.upload()

for fn in uploaded.keys():
  fn_s = re.escape(fn)
  output_fn = fn.split('.', 1)[0]+'.html'
  output_fn_s = re.escape(output_fn)
  !jupyter nbconvert --to html $fn_s
  files.download(output_fn)
  !rm $fn_s

PDFへの変換はめんどくさいので，HTMLに出力しブラウザの印刷機能をつかってPDFに出力するとレイアウトが整っておすすめです。

dl要素description listの略
dt要素description termの略
dd要素description definitionの略

使い方

<dl>
  <dt>用語１</dt>
  <dd>説明１</dd>

　<dt>用語２</dt>
  <dd>説明２</dd>
</dl>

・結果
用語１
　説明１
用語２
　説明２

tr要素table rowの略
td要素table data cellの略
th要素table headerの略

colspan要素column spanの略

この記事は 平成最後の日、2019年4月31日に別のアカウントからポストしたものをこちらに移行した記事です。今更感があるかもしれないですが ECMA 402 について知るのは悪くないと思います〜。

---

令和元年おめでとうございます ?

さて、今回は新年号にふさわしく International Date format で和暦を表示する方法について書いていきたいと思います。

JavaScript Intl.DateTimeFormat オブジェクトを使えば、言語とローケルに特化した日付と時刻のフォーマットが可能になります。

The ECMAScript Internationalization API（国際標準化 API） は、日付と時刻そして貨幣の表示のローカライズを JavaScript で可能にするために作られたもので、2010 年に初版が発行されて現在は第６版が最新です。この API は最新のブラウザではすでにサポート済です。(参照 Can I use)

Intl オブジェクトのプロパティの一つ、DateTimeFormat が言語に応じた日付と時刻のフォーマットを可能にします。

ということは日本のローカルタイムを令和で表現できるということなのです。ただし、ブラウザがアップデートされていればの話ですが。

結論を言っておきますと、現時点で最新の Chrome ではまだ令和が和暦に追加されていませんので、この先のコードを正式にアウトプットするには、Chrome Canary 版が必要です。（この記事を急いで書いたので、しかも私のローケルでは時差でまだ平成ということもあり他のブラウザを試していませんが?‍♀️　Firefox では今のところまだのようです。Mozilla の Emma さん情報ありがとうございました。）
（現在はサポート済）

? Using DateTimeFormat

ローケルと言語が設定されていない場合は DateTimeFormat はデフォルトの設定で表示されます。

ですので、米国サンフランシスコにいる私が自分のマシン上のブラウザでこのコードを動かすとこのように今日の日付を en-US で表示します。

new Intl.DateTimeFormat().format(Date.now())

（本当は私のタイムゾーンではまだ4月31日なのですが、日付が変わった程で?）

"5/1/2019"

?? Specifying Locales

ここでlocales 引数を使い、ローケル識別子（言語コードと、国、地域コード）を設定することによって日付と時刻をローカライズしてみましょう。

例えば、ロシアの場合。

new Intl.DateTimeFormat('ru-RU').format(Date.now())
// "02.04.2019" と表示される

そして日本の場合。

new Intl.DateTimeFormat('ja-JP').format(Date.now())
// "2019/5/1"

しかし、これではグレゴリオ暦のままです。完全に和暦で表示するにはどうしたらいいでしょうか。

ローケル識別子 ja-JP だけでは足りませんので -u-ca-japanese という拡張キーを追加し、 ja-JP-u-ca-japanese としましょう。

なんだか長いのですが、
-u 拡張キーの識別は
-ca カレンダー・タイプの
-japanese 日本のカレンダーを表示

という意味になります。詳しくは Unicode Technical Standard #35 で。

（エラリー　ジャンクリストフ さん、拡張キーについて詳しい情報のあるリンクを教えてくださって、ありがとうございました！）

new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(Date.now())
// 昨日までは、"31/4/30"
// 今日は "1/5/1"  

さて和暦っぽい年号ではありますが、元号が表示されていません。どうしたら良いでしょうか。

元号を表示するには options 引数の、この場合 era を long に設定しましょう。

new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era:'long'}).format(Date.now())
// "令和1/5/1"

さてこれで、"令和1/5/1" と表示されたら、お使いのブラウザが無事に令和をサポートしています?

"平成31年5月1日" と表示された方はブラウザをアップデートをする（もしくは出るまで待つ）。待てども待てども表示されないブラウザはバグを提出しましょう。

(注、令和にはいってから Chrome 上でのこの和暦の表記が「令和n年n月n日」から「令和n/n/nn」のように変更になったようです。いつ変更になったのかは私はわかりませんがたぶん元年の途中からだと思います。)

せっかくですのでタイのローケルでも試してみましょう。

new Intl.DateTimeFormat('th-TH-u-nu-thai', {era:'long'}).format(Date.now())
// "๑ ๕ พุทธศักราช ๒๕๖๒"

なんか読めないけどイイ！?
タイはお釈迦様が入滅した翌年を仏滅紀元元年としており今年は 2562 年のようです。

というわけで、もっと詳しく知りたい方は MDN Web Docs をどうぞ。

ちなみに、Is it Reiwa (令和) yet? というしょぼいテストサイトも作ってみました。
https://reiwa-yet.glitch.me/.

それでは、今元号ともよろしくおねがいします。

---

元記事は、4月1日に元号が発表された直後に英語で書いたものです。今回、令和元年のはじまりを記念して日本語でも書きました。
https://girliemac.com/blog/2019/04/02/javascript-i18n-reiwa-era/

プログラミングの勉強日記

2020年6月28日　Progate Lv.148
ポートフォリオ作成中
前回作成したwebページの調整をしている

目標物

　こちらの記事でアコーディオン機能について説明している。（今回はアコーディオン機能については触れない）
　アコーディオンメニューで以下のようにアイコンを切り替えたい。アコーディオン機能を利用して写真のようにアコーディオンが閉じているときはメニューバーのFont Awesomeを表示して、アコーディオンが開いているときは「×」のFont Awesomeを表示したい。

コード

HTMLファイル

<div class="navigation">
  <span class="fas fa-bars naviTop"></span>
    <nav>
      <ul>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#aurora">Aurora</a></li>
        <li><a href="#blueLagoon">BLUE LAGOON</a></li>
        <li><a href="#london">London</a></li>
        <li><a href="#paris">Paris</a></li>
        <li><a href="#iceland">Iceland</a></li>
        <li><a href="#spain">Spain</a></li>
        <li><a href="#map">Map</a></li>
        <li><a href="#food">Foods</a></li>
      </ul>
    </nav>
</div>

childrenメソッド：指定したセレクタが持つ子要素（1階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに使う。

removeClassメソッド：指定した要素から指定したクラスを取り除ける。
　　HTML：<p class="text-contents text-active">...</p>
　　jQuery：$('.text-contents').removeClass('text-active');

addClassメソッド：指定した要素にクラスを追加できる。
　　HTML：<p class="text-contents">...</p>
　　jQuery：$('.text-contents').addClass('text-active');
　　text-contentsクラスのついた要素にtext-activeというクラスを追加する。

　これらを利用すると、アイコンの切り替えができる。
　　1. childrenメソッドでnavigationクラスの1つ下の階層の中からspanタグに合う要素を取得する。
　　2. removeClassメソッドでクラスを取り除く。
　　3. addClassメソッドでクラスを追加する。
　　
実際にコードは以下のようになる。

jsファイル(jQuery)

$('.naviTop').click(function(){
    // メニューバーが開かれているなら
    if($('nav').hasClass('open')){
      $('nav').removeClass('open');
      $('nav').slideDown();

      // Font Awesomeを×にする
      $('.navigation').children('span').removeClass().addClass('fas fa-times naviTop');

    }
    // メニューバーが開かれていないなら
    else{
      $('nav').addClass('open');
      $('nav').slideUp();

      // Font Awesomeをメニューバーにする
      $('.navigation').children('span').removeClass().addClass('fas fa-bars naviTop');
    }
});

感想

　classの操作であるのに、最初はhtmlメソッドやtextメソッドで変えようとしてしまって、なかなかうまくいかなかった。この1つの機能をつくのに時間がとてもかかったが、復習をする良い機会になった。

お久しぶりです。プログラミング勉強中高校生の白乃です。今回は初心者が画像を使うときに引っかかるpngについて説明します。

pngってなに？

端的に言うと拡張子の一種です。
拡張子ってなんぞ？という方に説明するとファイルの種類をシステムが見分けられるようにする目印です。拡張子の内容によって役割は異なります。
今回使うpngはwebで画像を扱うために作られた拡張子です。簡単に言うとこの形にファイルを変換すればwebで画像を使えるようになるということです。

具体的にどうやって変換するの？

ここからは手順に沿って変換方法を紹介します。
1.画像をダウンロードしてくる
まずは使いたい画像をダウンロードしてきます。
2.拡張子を確認する
次に拡張子を確認してください。大体jpgというものになっていると思います。
3.拡張子ごとの変換サイトを探す
次は変換してくれるサイトを探します。僕が使っているお気に入りのjpg-png変換サイトをご紹介させていただきます。
https://jpg2png.com/ja/
日本語で書いてあり構造もわかりやすいので非常に便利です。
拡張子が違った方は　「拡張子名　png　変換」で調べれば出ると思われますのでご活用ください。

最後までお読みくださりありがとうございました。
この記事がお役に立ったなら幸いです。
今後も初心者ならではの問題と解決法を発信していくのでぜひともフォローお願いいたします。