20190324のHTMLに関する記事は5件です。

はじめまして。このような場を借りて恐縮ですが助けていただけたら幸いです。ひま部という学生限定アプリがあるのですが、だれでも通話という機能があります。

それは通話(音声のみ)とビデオタイプ(カメラオン)の2種類のタイプがあるのですが、ツイッターみたいな感じで時間順、人気順で投稿されます。しかし通話タイプとビデオタイプを区別する機能がなく、ビデオのみを見たい人にとっては探すのが面倒くさいです。そこで、アプリでもwebでもいいので区別して、そこから通話に参加するものをつくることはできるでしょうか?よろしくお願いいたします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

WordPressインストールしたあとにやった方がよさそうなことメモ

前回の記事の続きです。
勉強する気力がびっくりするくらい湧かないしWordPressでアフィブログ作ろうと思った話

前回のあらすじ

ドメイン取得してレンタルサーバー借りてWordPressインストールしました。
宣伝⇒できたブログ

サーバー設定でやり忘れてたこと

SSLの設定

どうもGoogle先生はSSL設定してないサイトが嫌いみたいなので一応設定しました。
こうするとhttpでもhttpsでもどっちでもアクセスできるようになります。サーバーの管理コンソールからぽちぽちやったらできました。
Secureになって何がうれしいのかはよくわかりません。

WordPressの設定をいじる

SEO対策の設定まわり

だいたいこのあたりのサイトを見ながらやっておきました。

WordPressインストール後すぐやっておきたい6つの初期設定

SEO的にもいいらしいです。

デザインテーマの設定をする

LION BLOGってテーマがイケてるって話だったので使ってみました。
管理用のダッシュボードで検索しても出てこないのでググったら公式っぽいのが出てきました。(はい
zipがダウンロードできるので何も考えずに解凍したんですけどzipのままぶっこめってなってて少し損しました。
細かい設定はよくわからないのであんまり弄ってないです。

プラグインをいれる

ゴテゴテにプラグイン入れてるサイトもあるみたいですけど重くなるし個人的にも管理しきれないなってことで相当絞ってます。
以下入れたやつ

  1. Akismet Anti-Spam
    スパムコメント勝手に消してくれるマン。インストールしたら最初っから入っていたので有効にしておきました。
  2. Edit Author Slug
    WordPressで作ってるサイトってURL末尾に/?author=IDをつけるとIDが見れちゃうみたいでそれをガードしてくれます。設定方法はググってください。
  3. EWWW Image Optimizer
    画像をいい感じに圧縮してくれる。らしいです。詳しくはわからないですけど位置情報とかも消してくれるみたいなのでこのまま入れておこうと思います。
  4. Google XML Sitemaps
    サイトマップのXMLを勝手に作ってくれる?よくわからない子です。おすすめされてたので入れました。
  5. All In One SEO Pack SEO対策をあれこれやってくれる。たぶん。これ入れると微妙にサイトのレスポンス悪くなるらしいので入れたくない人はいれなくていいかもです。

Googleにゴマすりをする

Google先生にゴマすりしないとサイトのアクセスが増えないみたいなのでやっておきます。
詳しくはよくわからないんですけどググったらサーチコンソールとGoogleアナリティクスがどうのこうのって書いてあったので登録しておきました。たぶん全然活用できてないです。

おわりに

たぶんここまでやったらまあまあ問題ないページなんじゃないでしょうか。あとはたぶん宣伝用にSNS周りの設定が必要だと思うんですけどめんどくさかったのでやってないです。
クラウドワークスとかでWordPressのページ作成3万とかで受けてる人マジですげーなって思いました。
おわり。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

python,djangoによるいいねボタンの作り方

いいねボタンを作ります。
ボタンを押すと数字が1つずつ増えていくやつです。
僕が実際にwebアプリケーションで使用しているのがこちら。

def good(request, pk):
    """いいねボタンをクリック."""
    post = get_object_or_404(Post, pk=pk)

    if request.method == 'POST':
        # データの新規追加
        post.good += 1
        post.save()

    return redirect('board:board')

では解説を。


Postモデルとプライマリーキーをpostという変数に代入します。

post = get_object_or_404(Post, pk=pk)



もしurlへのアクセスがPOSTならばということなのでフォームで送信された場合ということができますね。
直接URLにアクセスした場合やGETとは違うということです。

    if request.method == 'POST':


        post.good += 1
        post.save()

変数postの中身にモデルPOSTが含まれています。
.goodという形で記載するとmodels.pyのPOSTモデルにあるgoodフィールドにアクセスできます。
+= 1は1増やすという書き方です。
pythonの基礎の方でfor文を使ってループをさせるときにループするたびに数値を増やしていくというようなときは

= 1

という代入の仕方ではなく

+= 1

という代入を使います。
厳密に書くと以下のような意味なのですが、

post.good = post.good + 1

pythonでは += 1と書くと同様の効果が得られるのです。

post.save()

で数値を保存します。


リダイレクト先の指定。

return redirect('board:board')




html部分を解説。

    <form action="{% url 'board:good' post.pk %}" method="post">
        {% csrf_token %}
        <input type="submit" name="good" value="いいね" id="test">({{ post.good }} いいね)<p  style="color:red"><font size="1"><strong>押すと1ページ目まで戻ってしまいます!(いつか直す!)</strong></font></p>
    </form>

いいねボタンを押すと'board:good' post.pk に処理をします。

action="{% url 'board:good' post.pk %}

board:goodのurls.pyはこのようになっています。

path('good/<int:pk>', views.good, name='good'),

good関数が使用できるurlにアクセスすると数字を1増やすことができます。ただしboard:goodにはその他の機能を何も持たせていないのでredirectで元のurlに戻しているんですね。
そうするとボタンを押すと一瞬画面が切り替わり次の瞬間には数字が1だけ増えている。
という現象が完成するのです。





余談ですがJavaScriptを使用しないといいねボタンを押す度にページの一番上に戻ってしまうんですよね。
JavaScriptを勉強してページが遷移しないように改修しようと思っています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Seleniumを使ってiframeを出たり入ったりしよう

なぜか取れないiframeの中身

以前スクレイピングをしていた際、検証モードからセレクタを指定しているのにも関わらず

selenium.common.exceptions.NoSuchElementException

とエラーを吐きました。

中を見ると操作したい部分がiframe構造の中に入っており、どうやらiframeの外からでは中のDOMを操作できないようになっていました。面倒だったので対処法を残しておきます。

iframeに入ろう!

iframe = driver.find_element_by_css_selector('欲しいiframeのcssセレクタ')
driver.switch_to_frame(iframe)

これでiframe内のDOMにアクセスできるようになりました。

iframeから抜けてみよう!

driver.switch_to.default_content()

一行でiframeから抜け出せます。

最後に

この記事を見ると、iframe内のリンクを直接開く方法もありますね。
seleniumで操作しなければいけない工数が少ない場合は、こちらの記事にある方がお勧めだと思います。

直接開く方法はページの真ん中より少し下に載っています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Seleniumを使ってiframeを出たり入ったり

なぜか取れないiframeの中身

以前スクレイピングをしていた際、検証モードからセレクタを指定しているのにも関わらず

selenium.common.exceptions.NoSuchElementException

とエラーを吐きました。

中を見ると操作したい部分がiframe構造の中に入っており、どうやらiframeの外からでは中のDOMを操作できないようになっていました。面倒だったので対処法を残しておきます。

iframeに入ろう!

iframe = driver.find_element_by_css_selector('欲しいiframeのcssセレクタ')
driver.switch_to_frame(iframe)

これでiframe内のDOMにアクセスできるようになりました。

iframeから抜けてみよう!

driver.switch_to.default_content()

一行でiframeから抜け出せます。

最後に

この記事を見ると、iframe内のリンクを直接開く方法もありますね。
seleniumで操作しなければいけない工数が少ない場合は、こちらの記事にある方がお勧めだと思います。

直接開く方法はページの真ん中より少し下に載っています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む