Yusyu's Blog

2024-11-30 web制作

超簡単javascriptのaccordion実装

まずjQueryをlinkでつける <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 上記をheadタグに置いておくそして、以下のような構成のhtmlを書く <div class="accordion-item">  <h2 class="accordion-header">    <button class="accordion-button">ボタンだよ</button>  </h2>  <div class="accordion-collapse">    <ul>      <li>aaa</li>   </ul></div></div> そして以下のようなstyleを入れる。 <style>  .accordion-header {     position: relative;     cursor: pointer;     transition: all .5s ease;  }  .accordion-header::before,     .accordion-header::after{     position: absolute;  }  .accordion-collapse {     display: none;  }</style> あとはjavascriptのコードを入れるだけ <script>  $(document).ready(function() {    $('.accordion-button').on('mouseover', function() {       var findElm = $(this).parent().next(".accordion-collapse");       $(findElm).slideToggle();     });  });  $(document).ready(function() {    $('.accordion-item').on('mouseleave', function() {      $(".accordion-collapse").slideUp(500);    });  });</script> cssに関してはChatGPTなどで肉付けしてもらうと良いでしょう。

2023-12-10 web制作

CSSアニメーションを動かしてみる

参考サイトはこちら(https://coosy.co.jp/blog/svg-animation-smil/) #wanco { height: 225px; width: 150px; } .cls-1 {fill: #fff;}.cls-2 {fill: #b8ba75;}.cls-3 {fill: #d88088; }.cls-4 {fill: #1aaab2;}

2023-11-07 web制作

Googleアナリティクスを導入する！

作成したdjangoサーバの検索状況やアクセス状況を見るため、google アナリティクスを導入参考にしたサイトはこちら(URL: https://cotodama.co/google-analytics/まず参考サイト通りにアカウントを作っていきますアカウント作成後、作成されたサイトがwordpressなどのCMSで作成されていない場合(自分のようにdjangoなどで作っている人)は、アナリティクスのソフトが入っていないので測定IDをコピペするという手段はできませんそこで、google アナリティクスの画面からプロパティ設定=>データの収集と修正=>データストリームとタブを進めていくと自分のサイトが既に登録されていることを確認できます。そこをクリックして画面を開くと一番上に実装手順というボタンがあるのでそこをクリックするとgoogle アナリティクスを実装するための手法が大きく分けて二つ提供されていることがわかります。手動でインストールするウェブサイト作成ツールまたは CMS を使用してインストールする手動によるインストール本サイトでは手動でインストールするものについて説明します。手動の場合は以下のようにscriptが貼られていると思います。このscriptを自分のサイトの大元となるbase.htmlに貼ってください。<!-- Google tag (gtag.js) --> <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-EXW99DWK78"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-EXW99DWK78'); </script> 数時間後に確認をすると、「データ収集は、過去 48 時間有効になっています。」というような文字が現れるので、これで完了です。これで自分のサイトを閲覧した人の人数や収益などを管理することができますこのほかにも人気コンテンツや検索状況の改善などを確認したい場合は、Googleサーチコンソールへの登録もしておきましょう

2023-11-01 web制作

web上音声対話システムをどう実装するか？

現在実装済みのweb上対話システムは、対話が進むたびに画面がリロードされてしまうこれだと音声対話を実装したいと考えたとき、リロード後の先頭の対話内容を音声合成させる必要があるしかし、リロードを検出する関数はjavascriptやdjangoには用意されていないので対処法がないそこで、ここでは時間差を計算することで音声対話を実装した最後の対話を生成した時間とリロードが完了した時間差が3秒以内だった場合に、音声合成を行い、発話するように設定このlast_dateに対話を生成した日時を入れています。モデルはDateTimeFieldです。window.onload = function() { var str = {{ last_post|safe }}; const uttr = new SpeechSynthesisUtterance(str); if (Math.abs(Number("{% now 'His'%}")-Number("{{ last_date|date:'His' }}"))<3){ speechSynthesis.speak(uttr); }; console.log(uttr); }; 成功しました！！🙌実際どんなふうにweb上で音声対話を実装しているの？と気になる方はお問合せからご連絡ください。もし要望があれば詳しく載せていきたいと思います。

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-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サイト家計簿商品紹介ゲーム

2022-05-26 web制作

Blog完成！！

なんとか完成させることができました！ おめでと〜〜 編集もしてみました