環境 Vue.js Bootstrap javascript css 前の記事 結論 app.js const bootStrapCkeckbox = Vue.component('bootstrap-checkbox', { template:` <div> <template v-for"(opt, idx) of options" > <div :key="idx" :class="classes.div||''" > <input type="ckeckbox" :class="classes.input||''" :name="name" :id="name+idx" :checked="value.indexOf(opt) !== -1" v-bind:value="opt" v-on:change="onChange" /> <label :for="name+idx" :class="classes.label||''" > {{opt}} </label> </div> </template> </div> `, name:String, props:{ classes:{ type:Object, default: () => { return { input,label, dev }; } }, value:{ type:Array, default: () => { return []; } }, options:{ type:Array, default: () => { return []; } } }, data(){ return { values:[] }; }, methods:{ onChange(event){ let elem = event.target; let val = elem.value; if(elem.checked){ this.values.push(val); }else{ this.values = this.values.filter((v) => { return (v !== val); }); } //update bind value. this.$emit('input', this.values); } }, created(){ //Memory of initial selection value. this.values = this.value.concat(this.values); } }); let app = new vue({ el: '#app', components: { 'bootstrap-checkbox': bootstrapCheckbox }, data: { values: ['りんご'] } }); index.html <div id="app"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0" >Vue-Component Bootstrap Checkbox Demo</legend> <bootstrap-checkbox name="checkbox_demo" class="col-sm-10" :options="['りんご','みかん','なし']" :classes="{ 'div':'form-check', 'input': 'form-check-input', 'label': 'form-check-label' }" v-model="values" > </bootstrap-checkbox> </div> </fieldset> </div> 参考 上記のコードを参考の事 メモ Vue-Component で Class 属性の binding は、template の一番外側（親要素）にしか binding されない 子要素とも言えない template の内部要素に関しては、props 経由でやるしかない（私が知る限り） Vue-Component の汎用性は下がるが、Bootstrap を選択した時点で、ある程度は Bootstrap 側の仕様に合わせたほうが得策なので、一旦目をつぶる

環境 vue.js javascript やりたいこと Vue-Component を用いて、data-binding しつつ、選択肢としての options も Component 外部から渡したい。 data-binding されている値が、options に含まれているのであれば、初期選択状態にしたい。 可能な限り再利用可能な汎用的な構成にしたい 結論 app.js const vueCkeckbox = Vue.component('vue-checkbox', { template:` <div> <template v-for"(opt, idx) of options" > <div :key="idx"> <input type="ckeckbox" :name="name" :id="name+idx" :checked="value.indexOf(opt) !== -1" v-bind:value="opt" v-on:change="onChange" /> <label :for="name+idx" > {{opt}} </label> </div> </template> </div> `, name:String, props:{ value:{ type:Array, default: () => { return []; } }, options:{ type:Array, default: () => { return []; } } }, data(){ return { values:[] }; }, methods:{ onChange(event){ let elem = event.target; let val = elem.value; if(elem.checked){ this.values.push(val); }else{ this.values = this.values.filter((v) => { return (v !== val); }); } //update bind value. this.$emit('input', this.values); } }, created(){ //Memory of initial selection value. this.values = this.value.concat(this.values); } }); let app = new vue({ el: '#app', components: { 'vue-checkbox': vueCheckbox }, data: { values: ['りんご'] } }); index.html <div id="app"> <fieldset> <legend>Vue-Component Checkbox Demo</legend> <vue-checkbox name="checkbox_demo" :options="['りんご','みかん','なし']" v-model="values" > </vue-checkbox> </fieldset> </div> 参考 上記コードを参照の事

はじめに どうもはるうさぎです。今回は案件内で、問題があったのでそれを解決したよ〜っていう話です。 備忘録です。 背景 最近では、スマホだとボタンが消えるまで何回もタップしてしまったり、 マウスでもボタンが押せなくなるまでクリックしたりなど、ユーザーが予期しないクリックをすることがあります。 今回は多重クリックが問題だったので、クリックを無視してくれる関数が欲しい！ それが debounce です。 どうやった？ こんな感じ index.vue <Button 　　:text="投稿する" 　　@click="submitDebounce" /> import { Component, Vue, Watch } from '@/node_modules/nuxt-property-decorator'; import Button from '@/components/buttons/Button.vue'; import { debounce } from 'lodash'; @Component({ components: { Button }, }) export default { 　　async submit(): Promise<void> { 　　　//省略 } 　　　submitDebounce = debounce(this.submit, 500);　←ここ！ } 注意していただきたいのが、debounceは関数を返す関数です。 今回は既に投稿ボタンがあったので、そのsubmitの中でごちょごちょとしてます。 これで何回クリックしようが、0.５秒遅延して1回しかクリックできなくなっています。 ※vue-property-decoratorが導入されています。

はじめに 突然ですが、ご自身の声は好きですか？嫌いですか？ ちなみに私自身は後者です。理由は男なのに声が高くて電話でよく女性に間違われるからです笑 ふとそんな話を通っているスクールで話したところ男性・女性問わず「自分の声」が嫌い・苦手と思っている方が意外と多いことが分かりました。調べてみると、下記の一般向けに行われた調査データのように自分の声が好きと答えた人は約3割なのに対して、自分の声が嫌いと答えた人は約7割と圧倒的に多いということが分かります。（データ情報古いですが・・・） 参考: あなたは「自分の声」が好き？ 嫌い？ 声は生まれ持ったもので変えることはできません。その為、今「自分の声」が嫌い・苦手だと感じている人に向けて声を好きになれるきっかけを与えられるサービスを提供できないかと思ったのが作成のきっかけです。 サービス概要 PC（IEは不可）・タブレット・スマホでご利用いただけます。 簡単5秒でユーザーの声を分析し、その声に似た有名人を表示してくれるサービスです。 使い方 簡単２ステップです。 トップページより １.　”さっそく声の成分をチェック”ボタンをクリックし、５秒間声を録音 ２.　”分析結果を確認する”ボタンをクリックする デモ動画 Q.このサービスを利用して本当に「自分の声」を好きになるの？ A.必ず好きになります 下記がその理由です。 分析結果が期待以上だった場合（例.福◯雅治とか新◯結衣が出る） → 周囲に自慢していただき承認欲求を満たすことができます。 分析結果が期待にそぐわない場合（例.ク◯ちゃんとかマツ◯ばっかり出るとか） → 開き直ってネタにできます。笑い話にすることでそのユーザーにとって新たな道が開けます。 要するにどっちの結果に転んでも自分の声がネタになるので、なんか自分の声悪くないかもー!と思えてきていつの間にか自分の声が好きになる！！という未来が確約されるも同然な訳です。 （なお異論は大いに認めます） 主な使用技術 Ruby 3.0.0 Rails 6.1.3 Vue.js 2.6.1 Highcharts Capistrano AWS(VPC,EC2,RDS,ALB,Route53,ACM) 外部API Microsoft Speaker Recognition 「話者識別」 このサービスのメイン部分といっても過言ではありません。使っていただいたユーザーの方より声ってどういうロジックで処理しているのか知りたいという意見がちらほらあったのですが、すみません、私もそこの詳しい処理は分かりません笑 というのも、このAPIに声のデータを事前に登録しておいて、判別させたい声のデータを送ると、レスポンスとして声成分の一致度が高い順にデータを返してくれるという処理を行なってくれている為です。とても便利・・・ 参考: Speaker Recognition　とは ちなみにこのAPI、実装記事がほとんどなく、ドキュメント頼みでした。（基本的にはドキュメント見て進めるとは思うので当たり前なのですが）　しかしドキュメント通りにやっても上手くいかないこともあり（開発者ページの質問回答にドキュメントの修正内容が書いてあることもありました）、かつ外部APIを使うのが初めてだったので使いこなすまでに１ヶ月近くかかったのはここだけの話・・・ 工夫した点 直感ですぐ使えるデザインを意識 ユーザーが直感ですぐ使えるよう、トップページでほぼ完結できるようなデザインを心掛けました。また現状の仕様ではユーザー登録・ログイン機能は必要ないと判断し、実装しませんでした。 分析結果の表示 ユーザーに繰り返し使ってほしいという思いから、使う都度結果がある程度異なるよう、APIに登録している音声データは推奨時間よりも短くしています（あえて精度を落としてます）。 １回目 2回目 現状の使用したユーザーからの改善・要望案（随時対応予定） 録音中に何喋っていいのか分からない(2021.7.18改善済み) ユーザーより音声録音時に何を話していいか分からないとの声を複数いただきました。修正前は５秒間声を録音するという指定だけでした。 （改善前） （改善後） ユーザーが何を話すか分からない場合のアドバイスを一言追記。またアドバイスの種類は５種類ランダムで表示されるようにしました。 分析結果で出てきた名前をクリックするとGoogle検索画面に飛んで検索できるようにして欲しい 使用しているユーザーの方で分析結果で出てきた人を知らないという意見があったので、分析結果の名前をクリックするとGoogle検索でその名前の人物を検索できるなどの実装を考えたいと思います。 分析結果をツイートした際に分析結果を画像で表示にしてほしい 現状は分析結果を文字でツイートできるようにしています。ただ他の診断系のサービスの場合、画像で診断結果をツイートできることが多いと思うので将来的には分析結果を画像でツイートできるように実装考えたいと思います。 　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　 今後追加してみたい機能 分析結果で表示される人物のレパートリーを増やす 現状は30人弱登録しているのですが、50人程度には増やしたいと考えています。 真似したい有名人の声を選択してどれだけ似てるか数値で表示させる ユーザーから要望があり、サービスの幅が広がりそうだと思いましたので実装方法考えます。 終わりに 昨年の11月から本格的にRailsの学習を始め、このサービスが私にとって初めてのアプリ制作でした。内容はシンプルだと思いますが、作れるアプリではなく、自分が作りたいアプリを作り、リリースするという目標を達成出来たことにまずはほっとしています。ありがたいことにリリースしてから既に様々なユーザーの方に使っていただき、フィードバックも多くいただいております。今後はユーザーにリピートして使っていただくということが最大の課題になるかと思うのでユーザーに飽きられないような機能の実装に努めたいと思います。 twitterアカウント https://twitter.com/yama2_0506 私が通っていたスクール（現場を意識したカリキュラムの難易度・運営側の手厚いサポート・コミュニティの活発さ　どれをとってもオススメしたいスクールです。未経験でこれからスクール入学を検討されている方は是非！） https://runteq.jp/

Svelte公式チュートリアルでvue.jsとの類似点のまとめ２つ目です。 前回のはこちらから Reactivity クリックすると数字が変わる書き方です。 vueはmethodを追加して書かなければいけなかったのが、svelteではfunctionだけで処理できます。 Assigments App.svelte <script> let count = 0; function incrementCount() { count += 1; } </script> <button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> App.vue <template> <button v-on:click="incrementCount"> Clicked {{count}} {{count === 1 ? 'time' : 'times'}} </button> </template> <script> export default { data() { return { count: 0, }; }, methods: { incrementCount: function () { this.count += 1; } } }; </script> Declarations svelteは$:で計算式をかきvueはcomputedで書きます。 App.svelte <script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p> App.vue <template> <div> <button v-on:click="incrementCount"> Clicked {{count}} {{count === 1 ? 'time' : 'times'}} </button> <p>{{count}} doubled is {{doubled}}</p> </div> </template> <script> export default { data() { return { count: 0, }; }, methods: { incrementCount: function () { this.count += 1; } }, computed: { doubled: function () { return this.count * 2 } } }; </script> Statement リアクティブな 値 を宣言するだけでなく、任意の ステートメント をリアクティブに実行することもできます。 と書いてますが、svelteでは$:で処理ができます。 vueはmethodsの中で処理します。 App.svelte <script> let count = 0; function handleClick() { count += 1; } $: console.log(`the count is ${count}`); </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> App.vue <template> <div> <button v-on:click="handleClick"> Clicked {{count}} {{count === 1 ? 'time' : 'times'}} </button> </div> </template> <script> export default { data() { return { count: 0, }; }, methods: { handleClick: function () { this.count += 1; console.log(`the count is ${this.count}`) } } }; </script> Updating arrays and objects Svelte のリアクティビティは代入によってトリガーされるので、push や splice のような配列メソッドを使っても自動的には更新されません。例えば、ボタンをクリックしても何もしません。 vueではpushやspliceなど配列の処理をそのまま書けるのですが、 svelteでは配列をスプレッド構文でまとめるなどして代入していきます。 App.svelte <script> let numbers = [1, 2, 3, 4]; function addNumber() { numbers = [...numbers, numbers.length + 1]; } $: sum = numbers.reduce((t, n) => t + n, 0); </script> <p>{numbers.join(' + ')} = {sum}</p> <button on:click={addNumber}> Add a number </button> App.vue <template> <div> <p>{{numbers.join(' + ')}} = {{sum}}</p> <button v-on:click="addNumber"> Add a number </button> </div> </template> <script> export default { data() { return { numbers: [ 1, 2, 3, 4 ], }; }, methods: { addNumber: function () { this.numbers.push(this.numbers.length + 1); }, }, computed: { sum: function () { return this.numbers.reduce((t, n) => t + n, 0); } } }; </script> 以上がチュートリアルの２でした。 そのうち3も更新します。