Yusyu's Blog

2023-10-31 web制作

音声認識・音声合成の実装

対話システムを実装したので、それを音声で操作できるようにしたいと考え、実装を試みたまず見栄えのために、マイクのイラストを探した(参考)しかし、コピペしたところ、CSSがズレてしまったので、音声認識のタイミングだけ起動するようにした.volume-viewer-volume { z-index: -1; opacity: 0;}.volume-viewer-volume.open-ring { width: 40px; height: 40px; text-align: center; position: absolute; border-radius: 50%; border: 4px solid #888; top: -10px; left: -10px; z-index: 2; opacity: 1;}上記の場合、.open-ringというのを音声認識のタイミングでaddClass()を用いることで起動できる。また、もう一度押すことでremoveClass()で元に戻すことも可。また、AudioManagerは自然に起動しないことに注意window.onloadでは起動できないという注意がコンソールに流れてきたので、ボタンで起動するように変更音声認識はそのままコードを引用(参考)最終的なコードは以下のようになった<form id="post_form" action="https://xxx.com" method="POST"> <input name="text" id="text" class="textbox" value="" /> <button type="submit">POST</button></th></form><script> _volume = $('.volume-viewer-volume'); var manager = ""; document.querySelector('.fa-microphone').addEventListener('click', function() { _volume.addClass('open-ring'); manager = new AudioManager({ useMicrophone: true, onEnterFrame: function() { var volume = Utils.sum(this.analysers.mic.getByteFrequencyData()); var size = (140 + volume/1000); // 1000は適当(小さくすると円が大きくなる) var adj = (128-size)/2 - 4; // 4はborderの大きさ $('.volume-viewer-volume') .css('height', size + 'px') .css('width', size + 'px') .css('top', adj + 'px') .css('left', adj + 'px') } }).init(); SpeechRecognition = webkitSpeechRecognition || SpeechRecognition; const recognition = new SpeechRecognition(); recognition.interimResults = true; recognition.onresult = (event) => { if (event.results[0].isFinal){ _volume.removeClass('open-ring'); post_text(event.results[0][0].transcript); }; }; recognition.start(); }); function post_text(text){ var form = document.getElementById("post_form"); var input = document.getElementById("text"); input.value = text; form.submit(); };</script>post_formはformタグのidで、inputに音声認識で受け取ったテキストを渡したのち、formを用いてsubmitすることでテキストデータをpostしている。最終的な画面を見てみると...？できた！！

2023-10-30 食べ物

柴崎で見つけた美味しいカレー屋さん

いつも通っている教習の帰り道偶然通りかかり、外観で決めて入ったカレー屋さん、Campick内装も非常におしゃれで古風な木造の建物のようになっている木目のブラウンとカラフルな店内が非常にマッチしていた店主は気さくな方で、笑顔から優しさが滲み出た、少しもじゃもじゃのお兄さんだったメニューは三種類のカレーで、その中から好きな組み合わせを選べるその時私はキーマカレーを食べたかったので、そのような説明がなされていたカタカナのカレーと少し辛めの海老カレーの2種類を選択したコップは紙コップでセルフで注ぐ感じで、よく行くラーメン屋を想起させた5分ほど待つと想像以上に美味しそうなカレーが出てきたまさかターメリックライスまで食べれるとは思っておらず、大歓喜カレー以外にも何か乗っており、酸味の効いたナスとラッシーで和えたような野菜などが添えられていたそして実際に食べてみたところ、カレー自体も非常に美味しいが、周りに添えらえたものも混ぜて食べることで味に深みが増し、最後まで楽しんで食べることができたこのカレーは日替わりのようなので、また是非行きたい

2023-10-29 web制作

Djangoでサイドバーを追加してみた

Djangoでサイドバーを追加する方法を調べてみたが、同じアプリ内でしかviews.pyからgetができないことがわかった(参考)そこで、サイドバーを特定のアプリ内で表示(cssでvisibility: hidden;)した状態で、base.htmlでスクレイピングしてみた1. まず、スクレイピングのため、jqueryのgetでurlを指定$.get("{% url 'blog' %}")2. 続いてdone()関数を用いて、スクレイピングした値を引数として受け取る$.get("{% url 'blog' %}") .done(function(data) { })3. dataは文字列なのでDOMParser()を用いてHTMLにキャストする$.get("{% url 'blog' %}") .done(function(data) { let parser = new DOMParser(); let doc = parser.parseFromString(data, "text/html"); })4. data内におけるスクレイピングしたい要素をHTMLのままelementに代入$.get("{% url 'blog' %}") .done(function(data) { let parser = new DOMParser(); let doc = parser.parseFromString(data, "text/html"); let element = doc.getElementsByClassName("xxx")[0].innerHTML })5. あとはdocumentに入れるだけ。insertAdjacentHTMLの引数のafterendは色々変えられるみたいなので代入したい場所に応じて変えると良い(参考)$.get("{% url 'blog' %}") .done(function(data) { let parser = new DOMParser(); let doc = parser.parseFromString(data, "text/html"); let element = doc.getElementsByClassName("xxx") appendText(element[0].innerHTML); function appendText ( text ) { let element = document.getElementById( "yyy" ) element.insertAdjacentHTML("afterend", text ) ; }; })ちょっと色々試行錯誤して大変だった

2023-10-28 web制作

DBにカラムを追加したよ！

ここを参照(リンク)DBに新しくカラムを追加したいと考え、試しに適当にフィールドを追加class Post(models.Model): title = models.CharField('タイトル', max_length=200) category = models.CharField('カテゴリ', max_length=200) text = models.TextField('本文') date = models.DateTimeField('日付', default=timezone.now) redate = models.DateTimeField('更新日時', auto_now=True)しかし、エラー出てしまうIt is impossible to add a non-nullable field 'category' to post without specifying a default. This is because the database needs something to populate existing rows. Please select a fix: 1) Provide a one-off default now (will be set on all existing rows with a null value for this column) 2) Quit and manually define a default value in models.py.どうやらnullにできないカラムは追加できないそうそこでnullでも良いカラムとして追加class Post(models.Model): title = models.CharField('タイトル', max_length=200) category = models.CharField('カテゴリ', max_length=200, null = True) text = models.TextField('本文') date = models.DateTimeField('日付', default=timezone.now) redate = models.DateTimeField('更新日時', auto_now=True) % python3 manage.py makemigrations 1.24.1 Migrations for 'blog': blog/migrations/0006_post_category.py - Add field category to post成功!!!

2023-10-28 web制作

作成日時と更新日時を分けたよ！

ここに参照リンクclass BaseModel(models.Model): # auto_now_add はインスタンスの作成(DBにINSERT)する度に更新 created_at = models.DateTimeField('作成日時', auto_now_add=True) # # auto_now=Trueの場合はモデルインスタンスを保存する度に現在の時間で更新 updated_at = models.DateTimeField('更新日時', auto_now=True) deleted_at = models.DateTimeField('削除日時', blank=True, null=True) objects = BaseManager() all_objects = BaseManager(alive_only=False)上記のコードのようにDateTimeFieldの引数であるauto_now_addをTrueとすることで作成した日時を登録し、auto_nowをTrueとすることで更新日時を登録することができるようになったさらにフォントアイコンでカレンダーと更新を絵文字で表している

2023-10-28 web制作

次にやりたいこと！

やりたいことリストブログの表示を変えたいカレンダーとブログを連携させたい(できそうにない)幅を制限してスクロールバーに連絡先をサイドバーにadminログインしてないとブログ投稿できないようにするスクロールと同時にフェードインサイドバーに人気記事を配置1. スクロールと同時にフェードイン=> 主にプロフィールのコンテンツをいくつかに分けたい=> ジャンルをポストするとジャンルのブログにリダイレクト制作物お気に入りの本、映画、ゲーム作った and 食べた料理時事ネタや最近気になったことなどの本当の呟き今後は各コンテンツのためのページを作っていく予定それぞれブログのジャンルにリンクを繋げてもいいし、そのためのページを新たに作ってもいい2. サイドバーに人気記事を配置サイドバーが現在寂しい状態になっているので充実させたいジャンル問わず、アクセス数の多い記事を表示する3. コンテンツの充実まだ本サイトが案内できるコンテンツが少なすぎる以下作ってみたいWebサイト家計簿商品紹介ゲーム

2023-10-27 日記

ちょっと画像のポストしてみる！

ここからテキストこれが見出しこれは中央揃えこれがリスト一つ目二つ目三つ目編集してみた

2023-10-26 日記

メニューバーを更新した！

メニューバーの文字をホバリングさせたり、フォントを変えたりした！かわいいね！！

2023-10-25 日記

ついにエディタを実装した！！

これはサメです

2023-10-25 日記

次にやりたいこと

ブログの表示を変えたい カレンダーとブログを連携させたい 人気記事ランキングをasideに幅を制限してスクロールバーに連絡先をサイドバーにadminログインしてないとブログ投稿できないようにするブログのタイトルとは別に種類のようなタグを用意する

2023-10-25 日記

Blogを更新した

今日はBlogの機能を少し更新した - トップページのindex.htmlにアクセスすると最新記事にリダイレクトされる - ページから次のブログ、前のブログに遷移を可能とするボタンの実装 次はこの編集ページをより見やすく、編集しやすい表示に変えたい