初投稿です。これを書いている現在の僕は大学二年生なのですが、春休み、お金もなく、やることもないので、AtCoderやったりDjangoを勉強しています。

AtCoderを進めている内に、AtCoderの戦績をブログとかに貼れたらいいなぁと思い、タイトルのものを作るに至りました。

それで、こんなものを作りました。(これは画像ですが実際はiframeです)

AtCoderでの累積AC数とランキングが分かります。

ちなみにバッジメーカーも用意したので出力されるhtmlを貼るだけで誰でもAtCoderの戦績をブログなどに貼り付けることが出来ます。

ソースコードはGitHubにアップロードしてあるのでこちらを見ていただけると幸いです。

この記事では折角のQiitaなので頑張った点を羅列していこうかなと思います。

その前に執筆者のスペックを書かせて下さい

執筆者について

情報系の大学二年生
大学で学んだのはC,C++,Java
Pythonは完全独学
AtCoderは茶色レベル(Python)
ブログやってます

本記事での環境

Python 3.7.2
Django 2.1.5

頑張ったこと

どのように実装するか
クリックジャッキング対策について

どのように実装するか

僕はhtml,css,jsなどの知識がとても浅く、ブログパーツを作りたい！！って思ってもまずどうすればいいか全く分かりませんでした。ですがここで天才的なひらめきにより、Amazonのアフィエイトの共有htmlタグを見ることでiframeという存在を知りました。
iframeっていうのは簡単にいうと、サイトの中にちっちゃいブラウザをURL指定で埋め込むようなものです。これを使用することで他サイトのコンテンツを自分のサイトで表示させることが出来ます。

クリックジャッキング対策について

まずはクリックジャッキング攻撃について

クリックジャッキング（クリックジャック攻撃、Clickjacking、User Interface redress attack、UI redress attack、UI redressing）は、ウェブページの利用者に対し悪意をもって使用される技術の一種で、リンクやボタンなどの要素を隠蔽・偽装してクリックを誘い、利用者の意図しない動作をさせようとする手法である[1][2][3]。たとえば、別の機能を実行するボタンに見せかけるなどして、埋め込まれたコードを利用者に気づかれないように実行する。この手口により、一見無害そうなページ上でクリックを行うだけで、情報の漏洩やコンピュータの乗っ取りにつながるおそれがある。 Wikipedia-クリックジャッキングより引用

これはかなり苦戦しました。アプリを作成していざiframeでそのURLに接続しても、 reudme.herokuapp.com is refused と出てしまい上手く向こうのページを表示することが出来ません。これはセキュリティ上そうなってるらしくなんでもクリックジャギング攻撃に使われないようにするためだとか・・・

このiframe内容を非表示するということをHTTPレスポンスヘッダーの
X-Frame-Optionsレスポンスヘッダーで設定しているようです。
実際にDjangoではデフォルトでは
X-Frame-Options: SAMEORIGINと設定されています。

SAMEORIGINとは同じドメイン内のみページの表示を許可する。　という設定です。

このままでは他のサイトがiframeで接続しても同じドメインではないからといって拒絶されてしまいます。

そのためiframeで他サイトからバンバン接続して欲しい時はX-Frame-Optionsレスポンスヘッダーの設定を消す必要があります。

調べを進めていくと、幸いなことにDjangoではiframeを許可する場合の設定方法が書いてありました。

設定方法は簡単で、許可したいviews.pyのリクエストの間にデコレータを付けることで許可することが出来ます。
以下はDjango Documentaitonに載っている設定例です。

from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_exempt

@xframe_options_exempt
def ok_to_load_in_a_frame(request):
    return HttpResponse("This page is safe to load in a frame on any site.")

具体的な方法としてはfrom django.views.decorators.clickjacking import xframe_options_exemptをインポートして、このように関数の前に@xframe_options_exemptを付ける事で実現する事が出来ます。

出来なかったところ

Djangoの静的ファイルの置き所でハマった

Djangoの静的ファイルの置き所でハマった

これは未解決です・・・htmlファイルの中にcssとjsを入れて書くことで妥協をしてしまいました・・・
whitenoiseを使う方法やsetting.pyのSTATIC_ROOTを弄る方法などあまりにも解決方法が多すぎるのと、一通り試してみたのですが全て上手くいかなかったので諦めてしまいました・・・いつか再挑戦したい

感想

Djangoを学ぶ事でWeb開発への第一歩にする事が出来ました。JavaScript,CSS,HTMLを勉強して、その後になんか今っぽそうなVue.jsやReactなど新しいイメージのする物にも取り組んでいきたいと思いました(小並感)

余談

Webデザイナーってcssとかトライアンドエラーで調整していくんですか・・・？
C#のWindowsフォームアプリケーションのGUIとかXCodeのストーリーボードみたいにGUIでボタンとか大きさとか調節するソフトとかサービスってあるんでしょうか、私　気になります！！

用語とかちょっと自信ないところがたくさんあるため何か変な表現や間違っている部分があったら気軽にコメントを下さい

参考文献

謝辞

めっちゃ面白いオンラインゲームを運営している　AtCoder様
超絶便利なAPIを提供している宇宙ツイッタラーX様

非常に活用させて頂いています。この場を借りてお礼申し上げます。

AtCoderのAC数を表示するブログパーツをDjango+Herokuで作った