20200514のJavaScriptに関する記事は30件です。

ChatSpaceの JavaScript復習

はじめに

TECH:CAMPのカリキュラムで作ったチャットスペースのJavaScript非同期通信の自分なりの理解です。htmlは自分で考えたhamlの記述になっているのでご了承ください。
理解が間違っていたらすみません。

コード解説

$(function(){
    var buildHTML = function (message) {
      if (message.content && message.image) {
        var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}">
                    <div class="chat-main__chat-home__message__block">
                      <div class="chat-main__chat-home__message__block__current-user">
                        ${message.user_name}
                    </div>
                      <div class="chat-main__chat-home__message__block__current-user-date">
                        ${message.created_at}
                      </div>
                    </div>
                      <div class="chat-main__chat-home__message__current-text">
                        <p class="chat-main__chat-home__message__current-text__content">
                        ${message.content}
                        </p>
                        <img src=${message.image} class="chat-main__chat-home__message__current-text__image" >  
                      </div>
                    </div>`
      } else if (message.content) {
        var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}">
                    <div class="chat-main__chat-home__message__block">
                       <div class="chat-main__chat-home__message__block__current-user">
                        ${message.user_name}
                  </div>
                    <div class="chat-main__chat-home__message__block__current-user-date">
                        ${message.created_at}
                    </div>
                  </div>
                    <div class="chat-main__chat-home__message__current-text">
                      <p class="chat-main__chat-home__message__current-text__content">
                        ${message.content}
                      </p>
                  </div>
                </div>`
      }else if(message.image) {
        var html =`<div class="chat-main__chat-home__message" data-message-id="${message.id}">
                     <div class="chat-main__chat-home__message__block">
                       <div class="chat-main__chat-home__message__block__current-user">
                        ${message.user_name}
                    </div>
                    <div class="chat-main__chat-home__message__block__current-user-date">
                        ${message.created_at}
                    </div>
                  </div>
                    <div class="chat-main__chat-home__message__current-text">
                    <img src=${message.image} class="chat-main__chat-home__message__current-text__image" >  
                  </div>
                </div>`
        };
      return html;
    };
$('#new_message').on('submit', function(e){
  // デフォルトのイベント停止
    e.preventDefault();
    // #new_messageというidがついたフォームの情報を取得
    var formData = new FormData(this);
    // 送信先であるthisのaction属性を取得
    var url = $(this).attr('action')
    $.ajax({
      //action属性のurlがそのまま入る
      url: url,
      // 投稿だからHttpメソッドはpost
      type: "POST",
      data: formData,
      dataType: 'json',
      //下記2つはformDataを使っている場合、falseにする
      processData: false,
      contentType: false
    })
    // 通信に成功した時、引数にformに入力した情報の入ったdataを受け取る
     .done(function(data){
      //dataを変数htmlに代入
       var html = buildHTML(data);
       //メッセージの表示される箇所に付加する
       $('.chat-main__chat-home').append(html);
       //自動でスクロールするアニメーションを付加する
       $('.chat-main__chat-home').animate({ scrollTop: $('.chat-main__chat-home')[0].scrollHeight});
       //入力フォームの中をリセットする
       $('form')[0].reset();
       //ボタンを再利用できる様にする
       $('input').prop('disabled', false);
    })
    // 失敗したとき
     .fail(function() {
      //  アラートで失敗したことを伝える
      alert("メッセージ送信に失敗しました");
      //ボタンを再利用できる様にする
      $('input').prop('disabled', false);
    });
  });

    // 自動更新機能
    var reloadMessages = function() {
      //_message.html.hamlにカスタムデータ属性で付与したidを取得している
      var last_message_id = $('.chat-main__chat-home__message:last').data("message-id");
      $.ajax({
        //ルーティングで設定した/groups/id番号/api/messagesとなるよう文字列を書く
        url: "api/messages",
        //表示なのGET
        type: 'GET',
        dataType: 'json',
        data: {id: last_message_id}
      })

      .done(function(messages) {
        //メッセージが0文字ではないとき
        if (messages.length !== 0) {
          // 空の変数を作成
          var insertHTML = '';
          //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを空の変数に足し合わせる
          $.each(messages, function(i, message) {
            insertHTML += buildHTML(message)
          });
          // HTMLに追加
          $('.chat-main__chat-home').append(insertHTML);
          // スクロールアニメーション
          $('.chat-main__chat-home').animate({ scrollTop: $('.chat-main__chat-home')[0].scrollHeight});
        }
      })
      .fail(function() {
        alert('error');
      });
    };
    // 現在のURLが一致する場合
  if (document.location.href.match(/\/groups\/\d+\/messages/)) {
    //7秒ごとに更新
    setInterval(reloadMessages, 7000);
  }
});

最後に

JavaScriptは教室で詳しく教えてもらうことができなかったので、まだまだ理解が曖昧です。
これを素人に書けと言われても、コピペせざるを得ないと思ってしまいます。
しかし、コールバック関数、非同期通信、apiの作成と取得、カスタムデータ属性、そして多くのメソッドなど、JavaScriptのたくさんの機能が盛り込まれているので、一つずつ紐解きながら理解を深めていきたいです。

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

【Vue】v-ifと$refsによるTypeErrorの対処法

v-ifを設定したコンポーネントに対してthis.$refsで要素を取得しようとするとunderfinedになります。

以下、具体例と対処法です。
開発環境はVue.js 2.6.11です。

コード

例は適当です。最低限の部分しか書いていません。

<template>
  <div>
    <!-- 編集部分 -->
    <status-edit
      v-if="isEditing"
      ref="editArea"
    />
    <!-- ビュー部分 -->
    <status-view v-if="!isEditing" />
    <!-- ボタン -->
    <button v-if="!isEditing" @click="pushEdit">編集</button>
  </div>
</template>

<script>
import statusView from "./StatusView"
import statusEdit from "./StatusEdit"

export default {
  components: {
    statusView,
    statusEdit
  },
  data() {
    return {
      isEditing: false
    }
  },
  methods: {
    pushEdit() {
      // isEditingをtrueにすることで編集画面/表示画面を切り替える
      this.isEditing = true
      // statusEditコンポーネントの中のfetchDateメソッドを実行
      this.$refs.editArea.fetchData()
    }
  }
}
</script>

エラー

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'fetchData' of undefined"

vue.runtime.esm.js:1927 TypeError: Cannot read property 'fetchData' of undefined

「編集」ボタンを押すと、このようなエラーが出ます。
this.$refs.editAreaがunderfinedになっているから、fetchDateなんてプロパティは読み込めないよ」という意味です。

原因

v-if="false"のとき、statusEditコンポーネントはページ上に存在していません。
そして、メソッド内の処理は非同期に行われます。
つまり、コンポーネントが描画されていない状態でthis.$refs.editAreaを取得しようとするので、当然underfinedになってしまうのです。

解決法

async/awaitを使う

methods: {
  async pushEdit() {
    await (this.isEditing = true)
    this.$refs.editArea.fetchData()
  }
}

async/awaitでコンポーネントが描画された後、$refsでコンポーネントを取得しメソッドを実行する。

v-ifをv-showに変える

<status-edit
 v-show="isEditing"
 ref="editArea"
/>

v-showdisplay: none;によって見えていないだけで描画はされているので、コンポーネント内のメソッドを実行することができる。

参考リンク

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

【Vue.js】v-ifと$refsによるTypeErrorの対処法

v-ifを設定したコンポーネントに対してthis.$refsで要素を取得しようとするとunderfinedになります。

以下、具体例と対処法です。
開発環境はVue.js 2.6.11です。

コード

例は適当です。最低限の部分しか書いていません。

<template>
  <div>
    <!-- 編集部分 -->
    <status-edit
      v-if="isEditing"
      ref="editArea"
    />
    <!-- ビュー部分 -->
    <status-view v-if="!isEditing" />
    <!-- ボタン -->
    <button v-if="!isEditing" @click="pushEdit">編集</button>
  </div>
</template>

<script>
import statusView from "./StatusView"
import statusEdit from "./StatusEdit"

export default {
  components: {
    statusView,
    statusEdit
  },
  data() {
    return {
      isEditing: false
    }
  },
  methods: {
    pushEdit() {
      // isEditingをtrueにすることで編集画面/表示画面を切り替える
      this.isEditing = true
      // statusEditコンポーネントの中のfetchDateメソッドを実行
      this.$refs.editArea.fetchData()
    }
  }
}
</script>

エラー

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'fetchData' of undefined"

vue.runtime.esm.js:1927 TypeError: Cannot read property 'fetchData' of undefined

「編集」ボタンを押すと、このようなエラーが出ます。
this.$refs.editAreaがunderfinedになっているから、fetchDateなんてプロパティは読み込めないよ」という意味です。

原因

v-if="false"のとき、statusEditコンポーネントはページ上に存在していません。
そして、メソッド内の処理は非同期に行われます。
つまり、コンポーネントが描画されていない状態でthis.$refs.editAreaを取得しようとするので、当然underfinedになってしまうのです。

解決法

async/awaitを使う

methods: {
  async pushEdit() {
    await (this.isEditing = true)
    this.$refs.editArea.fetchData()
  }
}

async/awaitでコンポーネントが描画されるのを待ちます。その後、$refsでコンポーネントを取得してメソッドを実行します。

v-ifをv-showに変える

<status-edit
 v-show="isEditing"
 ref="editArea"
/>

v-showdisplay: none;によって見えていないだけで描画はされているので、コンポーネント内のメソッドを実行することができます。

参考リンク

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

AIトークの設計(フロント概要)

注意点

今現在開発中のもののため、内容を変更する可能性があります。

使用技術

  • 言語
    • JavaScript
  • フレームワーク
    • React
    • React Bootstrap
  • 利用外部サービス
    • AWS(S3,Amazon Polly)
    • Netlify
    • Nody API

サービスの流れ

u22-2020仮-ページ1.png

画面設計

  • PC画面(Reactのコンポーネントクラスが入っています)
    u22-2020仮-ページ2.png

  • スマホ画面z
    u22-2020仮-ページ3.png

クラス図

初めてまともなクラス図を描いたので、矢印の使い方を間違っている可能性があります。
また、クラス解説の内容と矛盾してる可能性があります。
u22-2020仮-ページ4 (4).png

クラス解説

LiveTalkPage

  • 概要

"/livetalk"に遷移するページそのものである。そのため、この中に様々なコンポーネントを集約させる。

myMessageForm

  • 概要

ユーザーがAIに対して、メッセージを送るためのフォームである。
メッセージの送り方は、テキストボックスに入力するか、録画ボタンを押して、マイクを通して音声をテキストに変換する方法である
u22-2020仮-myMessageForm テキストパターン.png

SpeechBubble

  • 概要

AIが最後に喋った台詞を記載する

u22-2020仮-SpeechBubble (1).png

TalkingLog

  • 概要

AIとユーザーの会話ログをスクロールバーの末尾に新しいものを表示

実際にログ1つ分の表示の仕方

表示
 <p>私:元気?</p>

表示するための配列の構造

配列の構造
 [{who: '',speech:'元気?'},{Who: 'AI',speech:'元気?'}];

u22-2020仮-TalkingLog.png

Live2DController

  • 概要

Live2Dを操作するコントローラー。音声と再生させながら、口パクモーションを再生させる!
Live2Dの操作を参考にするもの:https://docs.live2d.com/cubism-sdk-tutorials/sample-build-web/?locale=ja

u22-2020仮-Live2DController.png

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

機種依存文字を数値文字列参照に変換するツールを作成(JIS X 0208基準)

初めに

以前の投稿「機種依存文字をチェックするツールを作成した話(JIS X 0208基準)」 で機種依存文字をチェック出来るようになったのですが、そのままだと使えないので字解きに変換するしかありませんでした。
あまり文章として読みやすく無いので、機種依存文字を数値文字参照に変換するようにツールを改良しました。

簡単な仕様

機種依存文字をチェック

ツールはHTML+javascriptで作り、formのtextareaに文章を入力してもらい、submitされた時に、javascriptで判定する。

判定方法は、ホワイトリスト方式を使い「JIS X 0208」で定義された文字を、あらかじめ配列に入れておき、formから送られてきた文章が機種依存文字かどうか1文字ずつチェックする。

機種依存文字があった場合、その文字をjavascriptのcharCodeAtを使って数値文字参照に変換する。

ソースコード

javaScript

初めに配列を作り、その中にJIS X 0208で定義された文字をセット

var kmoji = new Array(
"/*JIS X 0208*/\r\n\t\"\\',  、。,.・:;?!゛゜´`¨^ ̄_ヽヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥''""()〔〕[]{}〈〉《》「」『』【】+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥$¢£%#&*@§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂≒≡∫∮∑√⊥∠∟⊿∵∩∪亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠堯槇遙瑤凜熙/*JIS X 0201*/ー。゚!#$%&()*+,-./0123456789:\;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~/*半角カナ*/アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッー。「」、・/*その他*/"
);

次にフォームから送られてきた値を変数srcに挿入

var src = document.henkan.mytext.value;

変数srclengthを変数lenに入れ、lenの数だけfor文で値を1文字ずつチェックし、機種依存文字かどうか判定する。
機種依存文字と判定された時は <span class="bkred"> で囲む。それと、変数numは機種依存文字が有った時の個数をカウントするので、本文中になければ0だし、あればその数だけ足していく。
classのbkredはcssで定義しておく

var kmoji = kmoji.join("");
  var num = 0;
  var str = new String;
  var after = new String;
  var len = src.length;
  for (var i = 0; i < len; i++) {
    var c = src.charAt(i);
    if (kmoji.indexOf(c) == -1) {
      str += "<span class=\"bkred\">" + c + "</span>";
      after += "&#" + src.charCodeAt(i) + ";";
      num = num + 1;
    }else{
      str += c;
      after += c;
    }
  }

以前の投稿「機種依存文字をチェックするツールを作成した話(JIS X 0208基準)」 と変わっているのは、変数afterを定義して、機種依存文字があった時に"&#" + src.charCodeAt(i) + ";";で該当の数値文字列参照( &#●●●●; )を取得しています。
 
 
おまけで改行コードをとる

after = after.replace(/&#13;/g, '');

機種依存文字が存在するかの判定を変数numに値があるか無いかで確認する

if(num!=0){
    num = '<div style="color:blue;font-weight:bold;">■機種依存文字が<span style="font-size:200%;color:red;">'+num+'</span>個ありました。</div>';
}else{
    num = '<div style="color:blue;font-weight:bold;">■機種依存文字は含まれていません。</div>';
}

最後に画面側に返す。

document.getElementById('kom').innerHTML = num;
document.henkan.mytext.value = after;
str = str.replace(/\r\n|\n/g, '<br>');
document.getElementById('preview').innerHTML = str;
}

おしまい。

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

TypeScriptで学ぶデザインパターン〜Observer編〜

対象読者

  • デザインパターンを学習あるいは復習したい方
  • TypeScriptが既に読めるあるいは気合いで読める方
    • いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
  • UMLが既に読めるあるいは気合いで読める方

環境

  • OS: macOS Mojave
  • Node.js: v12.7.0
  • npm: 6.14.3
  • TypeScript: Version 3.8.3

本シリーズ記事一覧(随時更新)

Observerパターンとは

オブジェクトの状態変化に応じて処理をするためのパターンです。

サンプルコード

Observerパターンで作られたクラス群がどんなものになるのか確認していきましょう。

今回は、題材として"生徒の得点をもとに合否や得点グラフを表示する機能"を想定します。GitHubにも公開しています。

modules/Grade.ts

成績を表現する抽象クラスです。

Grade.ts
import Observer from "./Observer";

export default abstract class Grade {
  private observers: Observer[] = [];
  addObserver(observer: Observer): void {
    this.observers.push(observer);
  }
  notifyObservers(): void {
    for (const observer of this.observers) {
      observer.update(this);
    }
  }
  abstract getPoint(): number;
  abstract print(): void;
}

addObserverでは状態変化に応じて処理を行う観察者(Observer)と追加します。
補足ですが、合わせて観察者を削除するdeleteObserverも用意される場合が多いようですが今回は単純化のため省略します。
notifyObserversでは保持した全ての観察者インスタンスに状態が変更した旨の通知を行います。
getPointでは得点を取得します。
printでは成績を表示します。詳細は以降の実装クラス等で確認しましょう。

modules/StudentGrade.ts

成績を表現するクラスです。

StudentGrade.ts
import Grade from "./Grade";

export default class StudentGrade extends Grade {
  private point: number;

  constructor(point: number) {
    super();
    this.point = point;
  }

  getPoint(): number {
    return this.point;
  }

  print(): void {
    this.notifyObservers();
  }
}

getPointはスーパークラスで解説したので割愛します。
printnotifyObserversを呼び出して具体的な処理は観察者が行なっています。

ソースが煩雑化することを避けるため実装には反映させませんでしたが、pointは1以上10以下の値が入ることを理解促進のためご認識ください。

modules/Observer.ts

観察者を表現するインターフェースです。

Observer.ts
import Grade from "./Grade";

export default interface Observer {
  update(grade: Grade): void;
}

updateで通知を受け取って実際の処理を行います。

modules/PassObserver.ts

合否を表示する観察者を表現するクラスです。

PassObserver.ts
import Grade from "./Grade";
import Observer from "./Observer";

export default class PassObserver implements Observer {
  update(grade: Grade): void {
    if (grade.getPoint() > 5) {
      console.log('合格');
      return;
    }
    console.log('不合格');
  }
}

updateでは得点が6以上の場合は"合格"と表示し、それ未満の場合は"不合格"と表示します。

modules/GraphObserver.ts

得点をグラフで表示する観察者を表現するクラスです。

GraphObserver.ts
import Grade from "./Grade";
import Observer from "./Observer";

export default class GraphObserver implements Observer {
  update(grade: Grade): void {
    let graph: string = '';
    for (let i = 0; i < grade.getPoint(); i++) {
      graph += '-';
    }
    console.log(graph);
  }
}

updateでは得点の数だけ"-"を表示してグラフ(?)を表示します。

modules/Main.ts

Observerパターンで作成されたクラス群を実際に使う処理です。

Main.ts
import Grade from "./modules/Grade";
import StudentGrade from "./modules/StudentGrade";
import Observer from "./modules/Observer";
import PassObserver from "./modules/PassObserver";
import GraphObserver from "./modules/GraphObserver";

const grade1: Grade = new StudentGrade(4);
const grade2: Grade = new StudentGrade(8);
const passObserver: Observer = new PassObserver;
const graphObserver: Observer = new GraphObserver;

grade1.addObserver(passObserver);
grade1.addObserver(graphObserver);

grade2.addObserver(passObserver);
grade2.addObserver(graphObserver);

console.log(grade1.getPoint() + '点の生徒の成績');
grade1.print();
console.log(grade2.getPoint() + '点の生徒の成績');
grade2.print();

成績インスタンスに観察者を追加して最終的に成績を表示しています。

クラス図

ここまでObserverパターンで作られたクラス群を1つずつ確認してきました。次にクラス図を示します。Observerパターンの全体像を整理するのにお役立てください。

Observer.png

  • Observer: サンプルコードではObserverクラスが対応
  • ConcreteObserver: サンプルコードではPassObserverクラスGraphObserverクラスが対応
  • Subject: サンプルコードではGradeが対応
  • ConcreteSubject: サンプルコードではStudentGradeクラスが対応

LucidChartを使用して作成

解説

最後に、このデザインパターンの存在意義を考えます。

状態と処理の具象クラスがインターフェースや抽象クラスを介してゆるやかに結びついているので付け替えが簡単にできます。Observerの具象クラスを追加したときSubjectやその具象クラスを修正する必要はありません。逆に、Subjectの具象クラスを追加したときObserverやその具象クラスを修正する必要はありません。このように、状態と処理の分離をすることで各部品の交換可能性を高めているのです。

補足

サンプルコードの実行方法はこちらと同様です。

参考

あとがたり

MVCとも絡むお話なので身近で理解が進みやすかった。

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

Kinx ライブラリ - Database (SQLite3)

Database / SQLite3

はじめに

「見た目は JavaScript、頭脳(中身)は Ruby、(安定感は AC/DC)」 でお届けしているスクリプト言語 Kinx。言語はライブラリが命。ということでライブラリの使い方編。

今回は SQLite3 です。実際には後述するように Database オブジェクトを使用したほうが良いです。

SQLite ライブラリ自体は開発初期の段階からあったのですが、イマイチ使いづらかったので改善を考えてました。今回、Database クラスを用意したのでようやく公開です。

SQLite3

SQLite3 はポータブルで使いやすい組み込み RDB。よくお世話になっています。ファイル 1 つで完結すること、そのファイルがプラットホーム非依存なことにより、色々な用途に使える。

SQLite

コア・ライブラリとして SQLite オブジェクトがあるが、実際には後述する Database オブジェクトを使うのが良い。Database クラスは SQLite クラスをラップしてより使いやすいインターフェースを提供するクラス。

DB 接続

SQLite オブジェクトを new SQLite(filename[, timeout]) で作成してファイルに接続。

var db = new SQLite("sample.db", 30000);

Exec/Query

基本的に SQLite オブジェクトには基本メソッドとして execpreparetransaction の 3 つのメソッドがある。ただし、後述する Database クラスで、より使いやすいインターフェースを用意している。

SELECT 以外の単発コマンドで exec を使い、それ以外では prepare で SQL オブジェクトを作成して実行する。

exec

db.exec("CREATE TABLE IF NOT EXISTS mytable "
    "("
        "id INTEGER PRIMARY KEY AUTOINCREMENT, "
        "name TEXT NOT NULL"
    ")"
);

prepare

prepare で返された SQL オブジェクトは bindexecquerynext というメソッドが存在する。全てのメソッドは処理後に自分自身のオブジェクトを返す。

また、next メソッドは query メソッド呼び出し後に有効。next の結果は抽出した行オブジェクトであり、以下の形式となっている。

{
    "columnName": [ "col1", "col2", "col3" ],
    "value": [ val1, val2, val3 ]
}

例えば以下のように使う。

var c, r = db.prepare("SELECT * FROM mytable WHERE (id > ? AND id < ?) OR id = ?")
            .bind(2)
            .bind(8, 10)    // bind() は複数回に分けて実行できる。
            .query();       // これまで設定した値を実際にバインディングして next() 実行可能にする。

while (c = r.next()) {
    var cols = c.columnName;
    var vals = c.value;
    System.println("Record[%d]" % vals[0]);
    for (var i = 0, len = cols.length(); i < len; ++i) {
        System.println("    %-8s = %s" % cols[i] % vals[i]);
    }
}

尚、query は SELECT でのみ有効。SELECT 以外で exec を使用した場合、バインディングして実行した後、バインディングされていた値はその都度リセットされて次の exec に備える。

transaction

transacxtion は一連の操作をロックして行う。例えば、複数の値を一気にインサートしたいときなどは以下のようにする。ロックするので 1 つずつ実施するより高速に実施できる。

var ins = db.prepare("INSERT INTO mytable (name) VALUES (?)");
db.transaction(&{
    for (var i = 0; i < 20; ++i) {
        ins.bind("name(%{i})").exec();
    }
});

Database

クラス Database は上記 SQLite のラッパークラス。以下のメソッドがある。

  • transaction ... トランザクション処理を行う。
  • createTable ... テーブルを作成
  • dropTable ... テーブルを削除
  • insert ... データを挿入
  • delete ... データを削除
  • query ... データを抽出するための cursor オブジェクトを返す
  • queryAll ... データを全て抽出

インスタンス化

普通に new する。

var db = new Database(dbfile[, options]);

インスタンス化する際のオプションは以下のとおり。

  • force ... true の場合、ファイルが存在なければファイルを新規に作成する。false の場合はエラーとして例外を送出する。デフォルトは false。
  • timeout ... データベースの各種操作のタイムアウト値をミリ秒で指定。デフォルトは 10 秒。

以下のように指定する。

var db = new Database("dbfile.db", { force: true });

さらに、データベース名を複数のファイル名の配列として渡すと、最初の db をマスターとしてそれ以降の DB を自動的に ATTACH DATABASE する。その際、エイリアスとして自動的にファイル名の拡張子を除いた部分(いわゆる stem 部分、例えば abc.db であれば abc)を登録する。マスター DB は main で指定し、それ以外はエイリアスで指定する。

transaction

SQLite クラスの transaction より細かく指定できる。通常は同じように利用する。

db.transaction(&{
    ...
});

トランザクション処理が成功した場合は自動的にコミットする。途中で例外が発生した場合はロールバックを試みる。

また、Database クラスの transaction メソッドでは第一引数にモードを指定できる。モードは文字列で指定し、以下を指定可能。

  • 'EXCLUSIVE' ... BEGIN EXCLUSIVE でトランザクションを開始する。
  • 'IMMEDIATE' ... BEGIN IMMEDIATE でトランザクションを開始する。

未指定、または上記以外が指定された場合、BEGINBEGIN DEFERRED)である。サンプルは以下の通り。

db.transaction('EXCLUSIVE', &{
    ...
});

createTable

createTable にはテーブル名とスキーマを渡す。スキーマは直接文字列((id INTEGER, name TEXT) のような形)で渡すか、配列で渡す(単に , で結合されて () で括られる)。

db.createTable("mytable", [
    "id INTEGER PRIMARY KEY AUTOINCREMENT",
    "name TEXT NOT NULL"
]);

尚、常に IF NOT EXISTS で実行される。

dropTable

dropTable には単にテーブル名を渡す。

db.dropTable("mytable");

尚、常に IF EXISTS で実行される。

注意

ステートメントが残っていると database is locked の RuntimeException 例外が発生するので、ステートメントへの参照が残っていない状態で実施すること。

insert

insert には以下のパラメータを指定する。

パラメータ 内容
into 必須、テーブル名
replace true or false, 省略時 false
column 必須、カラム名(文字列)、またはカラム名の配列
bind 必須、column に対するバインディング・データを配列で指定、column で指定したカラムの数だけ必要

複数 insert する場合は transaction で囲んだほうが高速に実施される。

db.transaction(&{
    for (var i = 0; i < 20; ++i) {
        db.insert({
            into: "mytable",
            column: ["name"],
            bind: ["name(%{i})"],
        });
    }
});

delete

fromwherebind で指定。全て必須(必ず bind も必要)。

db.delete({
    from: "mytable",
    where: "id = ?",
    bind: [4]
});

query

条件に合うデータを DatabaseCursor で返す。初回の DatabaseCursor オブジェクトはデータをフェッチしていない状態で返される。

query() に指定できるパラメータは以下の通り。

パラメータ 内容
distinct true or false, 省略時 false
select 省略時は *、もしくはカラム名(文字列) or カラム名の配列
from 必須、テーブル名
innerJoin INNER JOIN 句 (innerJoinouterJoin は同時指定不可)
outerJoin OUTER JOIN 句
on innerJoin または outerJoin を指定したときだけ有効
where WHERE 句、文字列、または配列(AND で結合)
bind WHERE 句に対するバインディング・データを配列で指定、? の数だけ必要
groupby GROUP BY 句
having HAVING 句
orderby ORDER BY 句 (orderbyorderbyAscorderbyDesc は同時指定不可)
orderbyAsc orderby と同様
orderbyDesc ORDER BY 句、DESC 指定
limit LIMIT 句
offset OFFSET 句

以下がサンプル。

var c = db.query({
    select: "*",
    from: "mytable",
    where: "(id > ? AND id < ?) OR id = ?",
    bind: [2, 8, 10]
});

上記復帰値 c は DatabaseCursor オブジェクトで next()columns()values() メソッドを持つ。columns() はカラム名の配列を返し、values() は値の配列を返す。

DatabaseCursor オブジェクトは以下のように c.next() が null を返すまでフェッチすることで全抽出データを取得できる。

while (c.next()) {
    var cols = c.columns();
    var vals = c.values();
    System.println("Record[%d]" % vals[0]);
    for (var i = 0, len = cols.length(); i < len; ++i) {
        System.println("    %-8s = %s" % cols[i] % vals[i]);
    }
}

queryAll

queryAll は、コールバックを指定する方法と指定しない方法の 2 通りの使い方がある。コールバックを指定しなければ、全ての抽出データを一括で配列形式で取得できるが、データ量が多い場合メモリを消費してしまう可能性がある。それを回避するため、コールバック方式では 1 つずつイテレートしてコールバックするように動作する。

一括で取得する場合

一括で取得した場合は以下のようにコールバックを記載しない。

var res = db.queryAll({
    select: "*",
    from: "mytable",
    where: "(id > ? AND id < ?) OR id = ?",
    bind: [2, 8, 10]
});

以下のようなデータ構造で返る。

{
    "columns": ["id", "name"],
    "values": [
        [3, "name(2)"],
        [5, "name(4)"],
        [6, "name(5)"],
        [7, "name(6)"],
        [10, "name(9)"]
    ]
}

コールバックさせる場合

コールバックさせる場合は、以下のように関数を渡す。

db.queryAll({
    select: "*",
    from: "mytable",
    where: "(id > ? AND id < ?) OR id = ?",
    bind: [2, 8, 10]
}, &(c, i) => {
    System.println("%2d => " % i, c.toJsonString());
});

以下のようにそれぞれの行のオブジェクトが返される。この場合は DatabaseCursor オブジェクト ではない ので注意。

 0 => {"columns":["id","name"],"values":[3,"name(2)"]}
 1 => {"columns":["id","name"],"values":[5,"name(4)"]}
 2 => {"columns":["id","name"],"values":[6,"name(5)"]}
 3 => {"columns":["id","name"],"values":[7,"name(6)"]}
 4 => {"columns":["id","name"],"values":[10,"name(9)"]}

尚、コールバック関数で明示的に false を返すとイテレーションを中止して制御を戻す。

db.queryAll({
    select: "*",
    from: "mytable",
    where: "(id > ? AND id < ?) OR id = ?",
    bind: [2, 8, 10]
}, &(c, i) => {
    System.println("%2d => " % i, c.toJsonString());
    return false if (i == 2);
});

以下のようになる。

 0 => {"columns":["id","name"],"values":[3,"name(2)"]}
 1 => {"columns":["id","name"],"values":[5,"name(4)"]}
 2 => {"columns":["id","name"],"values":[6,"name(5)"]}

サンプル

サンプル・コードは GitHub にあります。お試しください。

おわりに

SQLite3 使いやすいですね。単純にデータ・ストレージに使ってもいいですし、ロガーのバックエンドに使ったり、ポータブルな設定ファイルとして使ったりと色々使えます。何より RDB や SQL の基本的なことを学習するのにも良いかなー、と思います。

ではでは、また次回。

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

ハートをエロくする



プログラム人生の中で一度はハートを描いてくれって言われたことありませんか?

ハートを描いてみる

というわけで早速ハートを描いてみます。

オーソドックスなハートってこんな形な気がします。

image.png

これ、こんな風に点をとって描いてます。

image.png

原点をハートの先っちょに持ってってやって、ハートの幅を w、高さを h として図をみると、右半分のパスは次の3つで書けそうです。左半分はそれの鏡像でいいでしょう。

三次ベジエ:(0,0)-(x,y)-(w/2,y1)-(w/2,y2)
   円弧:(w/2,y2)-(w/2,h)-(x1,h)
   円弧:(x1,h)-(x2,h)-(0,dy)

canvas.getContext( '2d' )で取れるCanvasRenderingContext2Dにハートの形のパスを構成するheartPathを仕込んじゃいましょう。
円弧を描く CanvasRenderingContext2D.arc はパラメータが面倒なので、三次ベジエで近似します。

//  Curve factor    : 0.552285
const CF = ( -24 + Math.sqrt( 24 * 24 + 64 * 9 ) ) / 18

CanvasRenderingContext2D.prototype.heartPath = function( w, h, x, y, y1, y2, x1, x2, dy ) {
    x *= w
    y *= h
    y1 *= h
    y2 *= h
    x1 *= w
    x2 *= w
    dy *= h
    let cx = 0
    let cy = 0
    const
    MoveTo = ( x, y ) => {
        this.moveTo( x, y )
        cx = x
        cy = y
    }
    const
    CurveTo = ( x1, y1, x2, y2, x, y ) => {
        this.bezierCurveTo( x1, y1, x2, y2, x, y )
        cx = x
        cy = y
    }
    const
    ArcByQ = ( x1, y1, x, y ) => {
        CurveTo(
            x1 * CF + cx * ( 1 - CF )
        ,   y1 * CF + cy * ( 1 - CF )
        ,   x1 * CF + x * ( 1 - CF )
        ,   y1 * CF + y * ( 1 - CF )
        ,   x
        ,   y
        )
    }

    const rH = w / 2
    MoveTo( 0, 0 )
    CurveTo( -x, y, -rH, y1, -rH, y2 )
    ArcByQ( -rH, h, -x1, h )
    ArcByQ( -x2, h, 0, dy )
    ArcByQ( +x2, h, +x1, h )
    ArcByQ( rH, h, rH, y2 )
    CurveTo( rH, y1, x, y, 0, 0 )
}

このオーソドックスなハートは以下のパラメータで描いています。

const canvas = document.createElement( 'canvas' )
const w = 512   
canvas.width = w * 1.2
const h = 512
canvas.height = h * 1.2
const x = 0.05
const y = 0.10
const y1 = 0.40
const y2 = 0.72
const x1 = 0.25
const x2 = 0.05
const dy = 0.84
c2d.translate( w / 2, h )
c2d.scale( 1, -1 )
c2d.translate( canvas.width / 2, h )
c2d.heartPath( w, h, x, y, y1, y2, x1, x2, dy )
c2d.fillStyle = 'red'
c2d.fill()

ハートをエロくする

本題です。

プログラム人生の中で、一度はハートをエロくしてくれって言われたことありませんか?

というわけで、早速ハートをエロくしてみます。

ハートマークの下部をしぼって、上部が円形になるようにすると、エロくなるみたいです。
要するに女体っぽくすればいいようです。

WebComponent 化して、CodePen でみてみます。

See the Pen yLYqvdP by Satachito (@satachito) on CodePen.

CodePenが失敗したときの保険のためにイメージを貼っておきます。

image.png

下のようなパラメータにしてみました。エロいかどうかは主観に基づいているのでほんとにエロく感じていただけているか不安なのですがいかがでしょうか?

<heart-element w=200 h=200 x=0.25 y=0.50 y1=0.50 y2=0.75 x1=0.25 x2=0.05 dy=0.80></heart-element>

バレンタインのチョコの箱

ちょっと季節はずれな話題ですが、バレンタインの時にみるハート型のチョコの箱の形、チョコを入れるという役割とのトレードオフなのはわかりますが、なんか違和感ありますよね。

というわけで、バレンタインのチョコの箱を描いてみます。こんなパラメータでどうでしょう。
上2つと違うのは、y0にして、先っちょの部分も接線接続しているところです。

<heart-element w=240 h=200 x=0.10 y=0 y1=0.30 y2=0.70 x1=0.20 x2=0.10 dy=0.93></heart-element>

image.png

最後に

エロいハートの作り方を知りたくて「エロいハート」でググったら仕事にならなくなりました。同様の悩みを抱えている方のために最後にこの記事で使った画像を全部表示するスタンドアローンで動く(ファイルをブラウザに食わせて動く)html ファイルを載せておきます。

<script type=module>

    //  Curve factor    : 0.552285
    const CF = ( -24 + Math.sqrt( 24 * 24 + 64 * 9 ) ) / 18

    CanvasRenderingContext2D.prototype.heartPath = function( w, h, x, y, y1, y2, x1, x2, dy ) {
        x *= w
        y *= h
        y1 *= h
        y2 *= h
        x1 *= w
        x2 *= w
        dy *= h
        let cx = 0
        let cy = 0
        const
        MoveTo = ( x, y ) => {
            this.moveTo( x, y )
            cx = x
            cy = y
        }
        const
        CurveTo = ( x1, y1, x2, y2, x, y ) => {
            this.bezierCurveTo( x1, y1, x2, y2, x, y )
            cx = x
            cy = y
        }
        const
        ArcByQ = ( x1, y1, x, y ) => {
            CurveTo(
                x1 * CF + cx * ( 1 - CF )
            ,   y1 * CF + cy * ( 1 - CF )
            ,   x1 * CF + x * ( 1 - CF )
            ,   y1 * CF + y * ( 1 - CF )
            ,   x
            ,   y
            )
        }

        const rH = w / 2
        MoveTo( 0, 0 )
        CurveTo( -x, y, -rH, y1, -rH, y2 )
        ArcByQ( -rH, h, -x1, h )
        ArcByQ( -x2, h, 0, dy )
        ArcByQ( +x2, h, +x1, h )
        ArcByQ( rH, h, rH, y2 )
        CurveTo( rH, y1, x, y, 0, 0 )
    }

    class
    HeartElement extends HTMLElement {
        constructor() {
            super()
            const canvas = document.createElement( 'canvas' )
            const w = this.getAttribute( 'w' )
            const h = this.getAttribute( 'h' )
            canvas.setAttribute( 'width', w )
            canvas.setAttribute( 'height', h )
            this.appendChild( canvas )
            const c2d = canvas.getContext( '2d' )
            c2d.translate( w / 2, h )
            c2d.scale( 1, -1 )

            c2d.heartPath(
                w
            ,   h
            ,   Number( this.getAttribute( 'x' ) )
            ,   Number( this.getAttribute( 'y' ) )
            ,   Number( this.getAttribute( 'y1' ) )
            ,   Number( this.getAttribute( 'y2' ) )
            ,   Number( this.getAttribute( 'x1' ) )
            ,   Number( this.getAttribute( 'x2' ) )
            ,   Number( this.getAttribute( 'dy' ) )
            )

            c2d.fillStyle = 'red'
            c2d.fill()
        }
    }
    customElements.define( 'heart-element', HeartElement )

    class
    HeartExplanation extends HTMLElement {
        constructor() {
            super()
            const canvas = document.createElement( 'canvas' )
            this.appendChild( canvas )
            const c2d = canvas.getContext( '2d' )
            const w = 512   
            canvas.width = w * 1.2
            const h = 512
            canvas.height = h * 1.2
            const x = 0.05
            const y = 0.10
            const y1 = 0.40
            const y2 = 0.72
            const x1 = 0.25
            const x2 = 0.05
            const dy = 0.84
            c2d.translate( canvas.width / 2, h * 1.1 )
            c2d.font = '24px serif'
            c2d.fillText( '原点(0,0)', 0, 24 )
            c2d.fillText( 'x, y', 4 + x * w, -y * h )
            c2d.fillText( 'y1', 4 + w / 2, -y1 * h )
            c2d.fillText( 'y2', 4 + w / 2, -y2 * h )
            c2d.fillText( '(w/2,h)', -36 + w / 2, -h - 4 )
            c2d.fillText( 'x1', x1 * w, -h - 4 )
            c2d.fillText( 'x2', x2 * w, -h - 4 )
            c2d.fillText( 'dy', 0, -dy * h + 24 )
            c2d.scale( 1, -1 )

            c2d.heartPath( w, h, x, y, y1, y2, x1, x2, dy )
            c2d.stroke()

            c2d.beginPath()
            c2d.moveTo( 0, 0 )
            c2d.lineTo( x * w, y * h )
            c2d.moveTo( w / 2, y1 * h )
            c2d.lineTo( w / 2, h )
            c2d.lineTo( x2 * w, h )
            c2d.lineTo( 0, dy * h )
            c2d.strokeStyle = 'red'
            c2d.stroke()

            const
            FillCircle = ( x, y ) => {
                c2d.beginPath()
                c2d.ellipse( x, y, 4, 4, 0, 0, 2 * Math.PI )
                c2d.fill()
            }
            c2d.fillStyle = 'blue'
            FillCircle( x * w, y * h )
            FillCircle( w / 2, y1 * h )
            FillCircle( w / 2, y2 * h )
            FillCircle( w / 2, h )
            FillCircle( x1 * w, h )
            FillCircle( x2 * w, h )
            FillCircle( 0, dy * h )
         }
    }
    customElements.define( 'heart-explanation', HeartExplanation )

</script>

<heart-explanation></heart-explanation>

<div>オーソドックス</div>
<heart-element w=200 h=200 x=0.05 y=0.10 y1=0.40 y2=0.72 x1=0.25 x2=0.05 dy=0.84></heart-element>
<br>
<br>

<div>ちょっとエロい?</div>
<heart-element w=200 h=200 x=0.25 y=0.50 y1=0.50 y2=0.75 x1=0.25 x2=0.05 dy=0.80></heart-element>
<br>
<br>

<div>バレンタインのチョコの箱</div>
<heart-element w=240 h=200 x=0.10 y=0 y1=0.30 y2=0.70 x1=0.20 x2=0.10 dy=0.93></heart-element>
<br>
<br>

<style>
* {
;   margin      : 0
;   padding     : 0
}
</style>

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

Javascript 現在の日付を「YYYY年MM月DD日」の形で取得

日付を文字列として取得

Javascriptで日付を取得しても、画面に表示したい時に困ることが多い。
と言うわけで、こんな形で取得すれば困ることはないかと。

// 現在の月を「2020年5月10日」みたいな形で取得
  getMonthString() {
    let dt = new Date();
    let y = dt.getFullYear();
    let m = ('00' + (dt.getMonth())).slice(-2);
    let d = ("00" + dt.getDate()).slice(-2);
    const result = y + '' + m + '' + d + '';
    console.log(result);
    return result;
  }

こちらが参考になりました:blush:

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

機種依存文字をチェックするツールを作成した話(JIS X 0208基準)

初めに

仕事で、ユーザーにwebやメールで情報を届けるのですが、相手の環境によって機種依存文字(環境依存文字)が文字化けしてしまわないか確認する必要がありました。
UTF-8などの文字コードが普及した今、機種依存文字による文字化けはほとんど存在しなくなっているとは思いますが、会社のメールシステムがSJISで作られていることもあり、文字化けをしないように気を付けることが必要でした。

機種依存文字とは

機種依存文字とは、WindowsやMacなどのOSやフォントに依存する文字を指します。環境依存文字とも呼ばれ、元々は特定の環境下で使用するために用意されたもの。

機種依存文字の判定基準

初期の規格「JIS X 0208」の基準で機種依存文字をチェックするようにしました。
これはメールシステムが古いのと、絶対に文字化けさせたく無い為です。

簡単な仕様

機種依存文字をチェック

ツールはHTML+javascriptで作り、formのtextareaに文章を入力してもらい、submitされた時に、javascriptで判定する。

判定方法は、ホワイトリスト方式を使い「JIS X 0208」で定義された文字を、あらかじめ配列に入れておき、formから送られてきた文章が機種依存文字かどうか1文字ずつチェックする。

判定後には機種依存文字の有る無しをPOP-UPで表示して作業者に知らせる。機種依存文字があれば、文章の中の機種依存文字を強調して画面に返す。

ソースコード

javaScript

初めに配列を作り、その中にJIS X 0208で定義された文字をセット

var kmoji = new Array(
"/*JIS X 0208*/\r\n\t\"\\',  、。,.・:;?!゛゜´`¨^ ̄_ヽヾゝゞ〃仝々〆〇ー―‐/\~∥|…‥''""()〔〕[]{}〈〉《》「」『』【】+-±×÷=≠<>≦≧∞∴♂♀°′″℃¥$¢£%#&*@§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡¶◯0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂≒≡∫∮∑√⊥∠∟⊿∵∩∪亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠堯槇遙瑤凜熙/*JIS X 0201*/ー。゚!#$%&()*+,-./0123456789:\;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~/*半角カナ*/アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッー。「」、・/*その他*/"
);

次にフォームから送られてきた値を変数srcに挿入

var src = document.henkan.mytext.value;

変数srclengthを変数lenに入れ、lenの数だけfor文で値を1文字ずつチェックし、機種依存文字かどうか判定する。
機種依存文字と判定された時は <span class="bkred"> で囲む。それと、変数numは機種依存文字が有った時の個数をカウントするので、本文中になければ0だし、あればその数だけ足していく。
classのbkredはcssで定義しておく

    var num = 0;
    var str = new String;
    var len = src.length;
    for (var i = 0; i < len; i++) {
        var c = src.charAt(i);
        if (kmoji.indexOf(c) == -1) {
            str += "<span class=\"bkred\">" + c + "</span>";
            num = num + 1;
        }else{
            str += c;
        }
    }

機種依存文字が存在するかの判定を変数numに値があるか無いかで確認する

if(num!=0){
    num = '<div style="color:blue;font-weight:bold;">■機種依存文字が<span style="font-size:200%;color:red;">'+num+'</span>個ありました。</div>';
}else{
    num = '<div style="color:blue;font-weight:bold;">■機種依存文字は含まれていません。</div>';
}

最後に画面側に返す。

document.getElementById('kom').innerHTML = num;
document.henkan.mytext.value = src;
str = str.replace(/\r\n|\n/g, '<br>');
document.getElementById('preview').innerHTML = str;
}

おしまい。

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

アマゾンの犬に癒されたい

結論

  • Amazon.comでは404ページに犬が出てくる
  • これらを眺めて癒されたい

背景

  • あるサイトでAmazon.comへのリンクを叩いたら、すでに存在しない商品で404ページが出た。めちゃくちゃ癒される犬の写真とともに。
  • 例: Amazon.comの404
  • 犬の写真は毎回ランダムで出てきて、200種類くらいあるようだ。
  • MPが減った時、これらを見て癒されようではないか。

やること

  • 仕事などでMPを削られる。
  • Chromeブラウザで新しいタブを開き、アドレスバーに下記を入力してEnter、真っ白なページを表示させる
data:text/html, <html contenteditable>
  • Developer Consoleを開いて、下記JavaScriptを実行する。
setInterval(()=>{r=Math.random()*199|0+1;i=document.createElement('img');i.title=r;i.src=`https://images-na.ssl-images-amazon.com/images/G/01/error/${r}._TTD_.jpg`;document.body.append(i)},5000)
  • 5秒おきに追加表示されるワンコを眺めて、MPが回復するのを待つ。

最後に

  • お気に入りのワンコの番号を教えろください
  • 私は105のMaeとか53の二匹とか。165にライオンが居た。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Glitchではじめるお手軽オンラインハッカソン

GlichはWebブラウザーさえあれば無料でWebアプリを開発できちゃうサービスです。

(Visual Studio CodeのLive Share拡張を使ったときのように)複数人でリアルタイムのコード編集ができるので、オンラインハッカソンにピッタリです!

一応、無料で使うときの制約(最後に抜粋を載せました)はありますが、ハッカソンでデモをするのには十分でしょう。プロジェクトを非公開にできるのも嬉しいです。1

とにかくお手軽にコーディングをはじめられるようになっています。ここでは、JavaScriptでゲームが作れるphina.jsのチュートリアルを例にして、使い方を紹介します。

なお、次の前提を満たしている人が対象です。

  • PCを持っていて、Webブラウザーが使える。
  • 共同でコーディングする人への連絡手段、例えばSlackやChatworkなど、がある。
  • Facebook, GitHub, Googleのいずれかのアカウントか、メールアドレスを持っている。

使い方

phina.jsのチュートリアルでは、index.html2main.jsを作ります。この2つのファイルをGlitchのプロジェクトに反映して、Webアプリとして使えるようにします。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>Getting started | phina.js</title>
    <!-- phina.js を読み込む -->
    <script src="https://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script>

    <!-- メイン処理 -->
    <script src="main.js"></script>
  </head>
  <body>

  </body>
</html>
main.js
// phina.js をグローバル領域に展開
phina.globalize();

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.x = this.gridX.center(); // x 座標
    this.label.y = this.gridY.center(); // y 座標
    this.label.fill = 'white'; // 塗りつぶし色
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
  });
  // アプリケーション実行
  app.run();
});

Glitchで新しいプロジェクトを作る

https://glitch.com にアクセスして、右上の「New Project」ボタンを押します。3つのテンプレートの中から、一番上のhello-webpageを選びます。

image.png

Loading Projectと表示されるので少々待ちます。

image.png

index.htmlを反映する

作ったプロジェクトにはすでにindex.htmlがあります。

左ペインでindex.htmlを選んだ後、上記したphina.jsのindex.htmlをコピペして上書します。

image.png

保存ボタンはありません。自動的に保存されます。

main.jsを追加する

次に左ペインの「New File」ボタンを押し、main.jsと入力した後に「Add This File」ボタンを押します。

image.png

左ペインでmain.jsファイルを選んだ後、上記したphina.jsのmain.jsをコピペして上書きします。

「phina is not defined」というエラーが表示されますが、今回はそのままにします。

Webアプリの動作を確認する

サングラスマーク「Show」をクリックすると、「In a New Window」と「Next to The Code」が表示されます。

image.png

ここでは「Next to The Code」を選んでみましょう。すると、画面左にphina.jsが実行された結果が表示されます。

image.png

このWebアプリは、すでに一般に公開されています。WebアプリのURLは、実行結果画面の上にある「Change URL」ボタンを押すと分かります。

image.png

URLはhttps://xxxxx-xxxxx-xxxxx.glitch.meという形式です。xxxxx-xxxxx-xxxxxはプロジェクト名です。

他の人と共同でコーディングしてみる

一緒にコーディングする人にURLを知らせます。

プロジェクトをデフォルトのまま公開にしている場合と、privateに変更して非公開にしている場合で、伝えるURLが変わります。

プロジェクトをデフォルトのまま公開にしている場合

コードを表示している画面のURLをそのまま伝えます。

image.png

URLはhttps://glitch.com/edit/#!/xxxxx-xxxxx-xxxxxという形式です。xxxxx-xxxxx-xxxxxはプロジェクト名です。

一人でも実験できますので、上記URLを別のウィンドウで開いてみてください。片方の変更が、もう片方にすぐに反映されます。

プロジェクトをprivateにして非公開にしている場合

画面左上のプロジェクト名xxxxx-xxxxx-xxxxxをクリックして、中程の「Make This Project Private」をチェックすることで非公開にします。

image.png

非公開にした状態でコードを表示している画面のURLを他人が開いても「No project found at xxxxx-xxxxx-xxxxx」と表示されます。そのまま放置すると、別名の新しいプロジェクトが自動的に作成されるので注意してください。

非公開プロジェクトに参加してもらうURLは、左ペイン「Share」ボタンを押して、Invite Others to EditにあるURLです。こちらを一緒にコーディングしたい人に伝えてください。

image.png

URLは次のような形式です:https://glitch.com/edit/#!/join/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

アカウントを作りサインインしてプロジェクトを延命する

ここまで、サインインせずに作業してきました。このままだとこのプロジェクトは5日後に無くなってしまいます。アカウントを作ってサインインすれば、プロジェクトはずっと使えるようになります。3

右上の「Sign In」ボタンを押した後に、画面中程の「Create an Account」ボタンを押します。

image.png

image.png

次の4つの方法でアカウントを作れます。

  • Facebook
  • GitHub
  • Google
  • Email Magic Link

最後の Email Magic Link はメールアドレスを登録すると、そのアドレス宛にサインイン用のキーワードが送信されてくる機能です。

説明は以上です。Happy coding!

おまけ

What technical restrictions are in place?から無料の場合の制約について抜粋します。有料にすれば緩和されます。2020年5月14日時点の情報です。

  • 実行時間
    • アクセスがないと5分後に停止する。また、12時間連続実行していると停止する。Webアプリへのアクセスがあると再び実行される。
    • サインインしたユーザーは20アプリまで、サインインしていないユーザーは3アプリまで同時に実行できる。
    • サインインしていないユーザーのアプリは5日後に削除される。
  • コンテナ(アプリ)が利用できるディスクサイズ
    • コンテナが使えるディスクスペースは200MBと、アセット用の512MB。
    • /tmpディレクトリーは上記に含まれないが、アプリを再起動した時に消える。
    • Node.jsのモジュールは上記に含まれないが、最大で1GBまで。
  • コンテナ(アプリ)が利用できるRAM
    • RAMは512MBまで。
  • Webアプリが処理できるリクエスト数
    • 1時間あたり4000リクエストまで。超えると、429 Too Many Requestsレスポンスが返却される。

  1. 非公開にできるのはソースコードを編集する機能です。Webアプリ自体は非公開にできません。 

  2. HTMLでシングルクォーテーションを使っているところをダブルクオーテーションに変更しています。また、phina.jsのCDMのURLをhttpからhttpsに変更しています。 

  3. サインインすると同時実行できるアプリ数が3から20に増えます。その他の無料の場合の制約はそのままです。 

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

シンプルにjsで非同期処理を実装する

非同期処理とは

非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
同期処理では、あるタスクが実行している間、他のタスクの処理は中断される方式である。

http://ossforum.jp/node/753

この仕組みのおかげで、並列に処理が走ることで描画が高速化したり、時間を無駄なく使えるって感じですね。

しかし、時には変数に値がない状態で、その変数を参照する処理が走ってしまってnullになっていたりと、厄介な問題も付きまといます。

そんな時に、便利なのがjsでよく使う async/awaitです(最近はPythonにもあるらしい)。

async/awaitの前に

ES6以前はcallback地獄というものがあったそうな。
そのおかげでネストが異常に深くなって、 ヒイィィィ!!!!(゚ロ゚ノ)ノ!という状態だったそうです。

そこで、Promiseというオブジェクトを使って処理するようになりました。

これにより、ネストは浅くなったのですが、.thenの大量発生、外の変数に退避しないと直前の結果を参照できないなど、課題がいろいろありました。

そこで、満を持してES8からasync/awaitが登場したという歴史的な背景があります。

厳密に理解をするにはPromiseの内容も合わせて理解しておくと良いと解説されている方もいるので、
興味のある方は合わせて見てみるといいかもしれないですね。

async/awaitの使い方

使い所としては、基本的にAPI叩く時とかが多い気がしています。
(非同期処理になる処理は大体決まっているので、ある程度覚えちゃって、「あ、ここ非同期になりそう」と目星がつけられるといいかも)

方法としては
・関数の頭にasyncをつける
・処理が終わるまで待ってて欲しいところにawaitをつける

シンプルですね!

async function test() {
  const item = {a:b, c:d}
  // 何か非同期処理になるやつ
  const result = await Api().post('/verify', item)

  console.log(result)
}

無駄に待ち時間を作らないように

ちなみにですが、以下のようにたくさんのawaitを使うと、非同期の良さを殺してる気がしてもったいない感じがしますよね。

async function many_await() {
    var aaa = await Api().post('/aaa', 'aaa')
    var bbb = await Api().post('/bbb', 'bbb')
    var ccc = await Api().post('/ccc', 'ccc')
    var ddd = await Api().post('/ddd', 'ddd')

    var eee = [aaa, bbb, ccc, ddd]
}

こんな時は

以下のように、Promise.allとawaitの合わせ技でも使えるそうなので(今回調べて初めて知った)
使いこなせるといいですね!

async function many_await() {
    var aaa = Api().post('/aaa', 'aaa')
    var bbb = Api().post('/bbb', 'bbb')
    var ccc = Api().post('/ccc', 'ccc')
    var ddd = Api().post('/ddd', 'ddd')

    var eee = await Promise.all([aaa, bbb, ccc, ddd])
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Nuxt.js】vue-js-modalの導入方法

概要

Nuxtにvue-js-modalを導入するのに少しハマった部分があったので、導入方法を残しておきます。

導入

インストール

yarnを使ってインストール

$ yarn add vue-js-modal

vue-js-modal.jsを作成

pluginsディレクトリ内にvue-js-modal.jsファイルを作成します。

plugins/vue-js-modal.js
import Vue from "vue"
import VModal from "vue-js-modal"

Vue.use(VModal)

nuxt.config.js

以下ハマり部分。

nuxt.config.jsを変更していきます。

nuxt.config.js
export default {
  plugins: [
    "~/plugins/vue-js-modal",
  ]
}

とやれば導入出来るはずだったのですが、私の環境では動かず、以下のようにすることで動きました。

nuxt.config.js
export default {
  plugins: [
    { src: "~/plugins/vue-js-modal", ssr: false },
  ]
}

明示的にssrをfalseにすることでコンポーネント内でmodalを使用することが出来ました。

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

Web Components 入門 〜基礎編〜

最初に

これを読んでいるなら Web Components という言葉に耳覚えがあると思います。

Web Components は全てのモダンブラウザーが対応しているWeb の標準仕様です。

これらの仕様でどんな Web アプリでも使えるUI コンポーネントを作ることができます。

ここまで知っていても、どこから作ればいいかわからないかもしれません。しかし、それはある程度仕方のないことです。

現代のフロントエンド開発にの素晴らしさであり、また大きな問題となる要素に、は「API のあるところにはそれを『もっとシンプルにする』方法は無限に出てくる」という部分があります。

Web Components も例外ではなく、私の知る限り、Web Components を作るためのライブラリーは 20 以上あります。

そして豊富な選択肢があるからこそ、Web Components 開発を始めたばかりの人は、そもそもどこから始めればいいか迷ってしまいます。

そういった悩みのある人のための記事になります。

この記事と側扁になる記事を通して下記のテーマをカバーします

  1. Web Components という標準仕様の基礎 - この記事です ?
  2. Web Components を作るためのライブラリーのアプローチ - 先ほど言っていた 20 以上あるライブラリーは大体似たようなアプローチを使っているのでそれぞれのパターンを別々の記事で説明してそのパターンを使うライブラリーを軽く紹介します。

一つだけ注意点ですが、この記事のシリーズでは各ライブラリーでどういう風に Web Components を作るかまではカバーしません、それぞれの公式ドキュメントはそのためにあると思います。

この記事のシリーズはあくまで Web Components を始めたばかりのエンジニアに自分にあった Web Components の作り方を見つけ出す手助けになればと思います。?

Web Components の標準仕様の推進に大きく影響したと言える Polymer プロジェクトのメンバー、Justin Fagnani さんの名セリフを借りると

[...] the big idea with web components is that it shouldn't matter which or even if an approach (to create Web Components) becomes more popular. As long as components interoperate we all win.

[...] Web Components のいいところは作るためのアプローチの中でどれが一番流行っても一緒です。コンポーネントを一緒に使えることができればみんなが得します。

さて、退屈なことはこれで終わりです、コードに移りましょう。


Web Component を作るに必要なもの

Web Components の標準仕様をよくカバーする記事は色々とありますので、ここではあえて説明はしませんがちょっとしたおさらいが必要であればこちらの MDN の記事がおすすめです。

さて、標準仕様を読むのはいいんですけど、実際の標準な Web Component のコードってどういったものでしょう?

こちらはシンプルな「Hello World」コンポーネントのコードです、全てを理解できなくても大丈夫です、後でもう少し詳しく説明します。?

const template = document.createElement("template");
template.innerHTML = `<div>Hello <span class="name"></span></div>`;

class MyGreeting extends HTMLElement {
  constructor() {
    super();
    this.name = "World";
  }

  // Start - 標準ライフサイクルのcallback
  // これはコンポーネントがdocumentに初めて追加される時に呼ばれます
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
    this._nameSpan = this.shadowRoot.querySelector(".name");
    this._nameSpan.textContent = this.name;
  }
  // ここでどの要素を変更したらcallbackが発生するかを定義します
  static get observedAttributes() {
    return ["name"];
  }
  // 上のArrayの要素が変更された時に呼ばれるcallback
  attributeChangedCallback(attr, oldVal, newVal) {
    if (oldVal !== newVal) {
      this[attr] = newVal;
    }
  }

  // End - 標準ライフサイクルのcallback

  set name(value) {
    this.safeSetAttribute("name", value);
    if (this._nameSpan) {
      this._nameSpan.textContent = value;
    }
  }

  get name() {
    return this.getAttribute("name");
  }

  // 要素変更での無限ループを回避するための関数
  safeSetAttribute(attr, value) {
    if (this.getAttribute(attr) !== value) {
      this.setAttribute(attr, value);
    }
  }
}

window.customElements.define("my-greeting", MyGreeting);

このシンプルなコードで全ての Web Components の標準仕様がわかります。

  1. コンポーネントが使う <template>を作成します。
  2. 標準のHTMLElementを継承するclassを定義してそれを window レベルのCustomElementRegistryに登録します。これでブラウザーは<my-greeting>を見たら定義した class でレンダリングします。
  3. 定義したクラスには custom elements の標準ライフサイクルの callbackを使っていつ自分のコンポーネントを設定やアプデートすればいいかわかります。
  4. attachShadowRoot関数でコンポーネントに使うShadow DOM 木構造を作ります

このコードを見て「実際にできていることに対してコードが多すぎない?」って思っているかもしれません。

私もそれに同感です、現在の Web Components の標準仕様はあくまで基礎的な部分しかカバーしないから色々なケースで必要になるコードを自分で書かないといけないです。


もっとシンプルにしよう

ここで前述した、シンプルにする方法に戻ります。

これらの方法は標準仕様の一番痛いところをこういう風に解決してくれます。

  1. レンダリングエンジンを使って手動な DOM の操作の必要を無くします。
  2. 継承かラッピングかコンパイルでCustomElementRegistryに登録できる class を作成します。
  3. 標準ライフサイクルの callback をエクステンドしてライブラリーによってはもっと色々なケース(例えばステート管理)に役立つ callback を追加します。
  4. Shadow DOM 作りをして、Shadow DOM が使えない場合のための polyfill や fallback を追加します。

こう言ったことで作る側として楽に Web Components を作ることができるようになります。

そして、最終的の動作の一番重いところは完全に標準仕様任せになっているのでこの記事のシリーズでカバーするライブラリーのほとんどはなんと 10kB 以下です (minify と gzip 後)!?


次は?

ここまでは「どうすれば Web Component を作れる?」と「どうして作るのにライブラリーを使った方がいい?」という質問の答えを出せたなら幸いです。

しかし、本来の目的を忘れていてはいけません、ここで私はあなたとあなたの運命のライブラリーとの出会いをプロデュースしなけらばなりません。?

そしてそのライブラリーたちがしてくれることをいくつか並べましたが結局のところ一番「作る側が楽する」ことに繋がるのは class がどう定義されるかだと思います。

上記に書いた通り、ほとんどのライブラリーはこの三つのパターンのどれかになります。

  1. HTMLElementを継承する class にそのライブラリーのいいところを足してその新しい class をHTMLElementの代わりに継承します。
  2. 関数を通して登録できる class を作ってもらえます、自分のコードはその関数のパラメターになります。
  3. 非標準 Javascript コードをライブラリーのツールを通して class にコンパイルします。

次の記事からは、各パターンをもっと詳細に話て、そのパターンを使っているライブラリーをできるだけ多く紹介します。

ここまで読んでくれてありがとうございます、この記事を気に入ってくれたなら次の記事もぜひ読んでみてください。

「ライブラリーのこういう情報がみたい」などの質問や提案があればぜひコメントをしてください。

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

Tensorflow.Keras で学習したモデルをtensorflow.jsで使う

Google Colaboratory で学習したモデルhtmlアプリから利用する

tensorflow.js にモデルを変換して angularアプリに組み込みます

手順は、大きく分けて3つ

  1. Google Colaboratory で、学習させる
  2. 学習済モデルの(model.h5)ファイルをTensorFlow.js Layers formatに変換する
  3. TensorFlow.js を使った Angular アプリを開発します。

image.png

解説

1.Google Colaboratory で、学習させる

JupyterNotebookに解説を記載していますので、↓こちらを参照してください

Google Colaboratory 学習してモデル(model.h5)を保存するJupyterNotebook

2.学習済モデルの(model.h5)ファイルをTensorFlow.js Layers formatに変換する

JupyterNotebookに解説を記載していますので、↓こちらを参照してください

Google Colaboratory 学習済モデル(model.h5)をコンバートするJupyterNotebook

最後は、jsmodel.zip というファイルがダウンロードできます。

image.png

3.TensorFlow.js を使ったアプリを開発します。

作ったアプリはここで動作を確認できます
https://sasaco.github.io/BoxAI

本記事では、Tensorflow.jsポイントだけ説明します。

本アプリは Angular7 を使っています。

https://angular.io/

変換したモデル(model.json) を asset フォルダに置きます。

アクセス(読み書き)できるフォルダは asset フォルダなので 変換したモデル(model.json) を asset フォルダに置きます。

image.png

@tensorflow/tfjsモジュールをプロジェクトに追加します

ターミナルで下記のコマンドを実行

npm install @tensorflow/tfjs --save

これで、package.json に 追加されます

image.png

ファイルメニューの[計算]をクリックすると AI が予測を開始します。

image.png

この処理を src\app\components\menu\menu.component.ts に書いています

@tensorflow/tfjs をインポートする

import * as tf from '@tensorflow/tfjs';

モデルを読み込む

const MODEL_PATH = 'assets/jsmodel/model.json';
const model = await tf.loadLayersModel(MODEL_PATH);

インプットされているデータを取得する

    const data = this.input.getInputArray();

正規化処理

    let data_normal = [];
    const maxValue = [10, 6, 4, 2, 2, 2, 2, 14.117, 18, 11.25, 11.95, 7.57, 7.57, 6.9, 7.57
                        , 6.606, 93.47583, 700, 700, 1200, 1200];
    const minValue = [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0
                        , 0, 30.00833, 0, 0, 0, 0];

    for (let i = 0; i < data.length; i++){
      data_normal.push((data[i] - minValue[i]) / (maxValue[i] - minValue[i]));
     }

インプットされているデータをテンソルに変換する

    const inputs = tf.tensor(data_normal).reshape([1, data_normal.length]); 

AI に推論させる

    const output = model.predict(inputs) as any;
    let predictions_normal = Array.from(output.dataSync());

答え(predictions) は正規化を元に戻す

    const predictions = [];
    const maxValue1 = [2000, 1900, 1900, 1100, 600];
    const minValue1 = [ 130,  130,  130,    0,   0];

    for (let i = 0; i < predictions_normal.length; i++){
      const a: number = this.input.toNumber(predictions_normal[i]);
      predictions.push((maxValue1[i] - minValue1[i]) * a + minValue1[i]);
    }

推論させたデータを表示する

    this.input.loadResultData(predictions);

ソースコードはここにあります
https://github.com/sasaco/BoxAI

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

ラムダ式とMakefileマクロ

Makefile のマクロでラムダ式っぽいことができることに気付いたのでメモしておきます。

ループ

Node.js でカレントディレクトリのファイルを列挙する例です。

test1.js
const fs = require("fs");
for (let f of fs.readdirSync(".")) console.log(f);

これと同じことを Makefile で書きます。

test1.mk
all:
    for f in ./*; do echo $$f; done

※ Makefile の変数と区別するため、$$$ にエスケープする必要があります。

ラムダ式とマクロ

Node.js を forEach で書き直します。

test2.js
const fs = require("fs");
fs.readdirSync(".").forEach(f => console.log(f));

これと同じようなことを Makefile のマクロで書きます。

test2.mk
define forEach
for $1 in $2; do $3; done
endef

all:
    $(call forEach,f,./*,echo $$f)
実行結果
$ make -f test2.mk
for f in ./*; do echo $f; done
./test1.js
./test1.mk
(略)

@ で抑制していないためマクロの展開結果が確認できます。

ただのループなのであまり嬉しさはありませんが、もう少し複雑な処理に応用すると便利かもしれません。

なお、JavaScript の forEach はコールバックに引数を3つ渡す仕様のため、ポイントフリースタイルで書くと実行結果が変わります。

test2a.js
const fs = require("fs");
fs.readdirSync(".").forEach(console.log);
実行結果
test1.js 0 [ 'test1.js', 'test1.mk', (略) ]
test1.mk 1 [ 'test1.js', 'test1.mk', (略) ]
(略)

フィルター

Node.js の API ではワイルドカードが使えないため、フィルターを挟む必要があります。

test3.js
const fs = require("fs");
fs.readdirSync(".").filter(f => f.endsWith(".js")).forEach(f => console.log(f));

Makefile は中に書いているのはシェルのコマンドなのでワイルドカードが使えますが、敢えてフィルターを書いてみます。

test3.mk
define forEach
for $1 in $2; do $3; done
endef
define filter_
if $1; then $2; fi
endef
define endsWith
[ "`echo $1 | sed 's/.*$2$$/ok/'`" = "ok" ]
endef

all:
    $(call forEach,f,./*,$(call filter_,$(call endsWith,$$f,\.js),echo $$f))

※ 組み込み関数 filter と名前が被るため、マクロは filter_ にしています。

実行結果
$ make -f test3.mk
for f in ./*; do if [ "`echo $f | sed 's/.*\.js$/ok/'`" = "ok" ]; then echo $f; fi; done
./test1.js
(略)

実用性はともかく、ちょっと面白いと思いました。

参考

マクロの使い方は以下の記事を参考にしました。

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

ミライシードの答えを開示するやつ

すること

ミライシードっていうベネッセが学校に無料開放しているやつを改造してみた
具体的には,ドリルパークの国語以外で答えが見られるようになる.

Tampermonkeyの導入

面倒くさいので下の記事を参照してください
http://kbtools.web.fc2.com/gm_install.htm
※古いですがChrome以外のブラウザも乗っているのでわかりやすいです

コード

// ==UserScript==
// @name         miraiseed open the answer
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  try to take over the world!
// @author       Tom1022
// @match        https://miraiseed.benesse.ne.jp/seed/*/drill
// @match        https://miraiseed.benesse.ne.jp/seed/*/drillResume
// @match        https://miraiseed.benesse.ne.jp/seed/*/restart
// @grant        none
// ==/UserScript==

for (let i = 0; i < $('div.main_cont')[0].children[0].children[0].children.length - 2; i++) {
    toggleExpound(i);
}

解説

2~5行目はこのコードの説明的なやつ
6~8行目は特定のページで動くようにする設定
for文のところで問題数を取り出す
toggleExpound(i);のところでcssのやつの関数を呼び出す.

リンク

https://greasyfork.org/ja/scripts/403275-miraiseed-open-the-answer

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

CSSローダー

この記事が気に入ったら、他の例をチェックしてください。フロントエンド開発者にとって最高のCSSローダー

「パンケーキ作り」ローダー

See the Pen 'Making pancake' loader by Pawel (@pawelqcm) on CodePen.

純粋なCSSブックローダー

See the Pen Pure CSS Book Loader by Aaron Iker (@aaroniker) on CodePen.

CSS階段ローダー

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.

CSSローダー

See the Pen Loaders by Aaron Iker (@aaroniker) on CodePen.

CSSローダー

See the Pen CSS Loaders by Rosa (@RRoberts) on CodePen.

この記事が気に入ったら、他の例をチェックしてください。フロントエンド開発者にとって最高のCSSローダー

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

『TECH CAMP』2ヶ月通ってできるようになったこと

はじめに

TECH CAMPに通って2ヶ月でできるようになったことをなんとなくまとめてみようと思います!

言語としてはRubyとjsフレームワークとライブラリでRailsとjqueryを使えばクオリティは低いがtwitter、インスタ、メルカリのようなwebサイトは作れるようになる(本物には遠く及ばない)

プログラミング学習サイトpaizaのBランク問題(選りすぐりの簡単な物)が2,3問解けるようになる。
文字列を複数形にみたいな問題はとっっても簡単なのでBランクまであげたい方にはおすすめです。

3

webサイトの模写だったらできるようになる(もちろんクオリティは低い)
だが、デザインのセンスが身につくわけではないので個人アプリを1からデザインしてUIに優れたサイトを作るのは厳しい。

デザインの才能が高い方は例外です。まーでもほとんどの方が自分で「これはいい!!最高!!」っていうUIを備えたサイトを作るのは厳しいと思います。

4

実装方法がネット上に調べて出てくるものであればある程度マネができるようになる。(簡単なゲームなども)

まとめ

  • 大前提としてプログラミングスクールに通ったからといってプログラマーの実務で使うような技術はつかない。

  • スクレイピングやクローラーの技術は全くつかないしテストコードすらまともに書けないのでこのままではプログラマーとは到底言えない。

  • 答えに近いものがネット上にない場合は自分じゃ作れない。

  • 0から1を作るなんて言えるほど技術はない。

僕自身プログラミングスクールに通えばもっと実践的な技術がつくと絵空事を浮かべてましたが実際短期間で得れる技術なんてこんなもんです。むしろすごく成長させてくれたと思います:bow_tone3:

僕は燃えています。自分の未知の世界ってすごい楽しい。今はペーペーだけど5年後、10年後に優秀なプログラマーになれるようにプログラムと日々遊んで行こうと思います。

OSSにプルリクエスト出してマージされる日がきたらいいな:relaxed:
その前に英語読めるようにならないとまずいか笑

最後に

TECH CAMPがダメって言いたいわけじゃないです!チーム開発や勉強に励みやすい環境(一週間ちょっとくらいしか行ってないが笑)そして学習に一番大切な「きっかけ」を与えてくれる最高のスクールです!!!!

それを踏まえた上でそんなに素晴らしいスクールに通っても自分の思い浮かぶキラキラエンジニアになれるわけではないよというのを伝えたかったです!

キャラでもなくこんな記事書くようになるなんてプログラミングめっちゃ好きなんだなって感じて嬉しいですね:joy:
僕の友達がこんな記事見たらめちゃめちゃ笑われるんだろうな笑

こんなくだらない記事を最後までご閲覧いただきありがとうございました

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

anime.js スムーススクロール 実装方法

はじめに

初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。

実装方法

anime
  //$target = document.querySelector(TARGET);
  scroll($target) {
    const $window = window.document.scrollingElement || window.document.body || window.document.documentElement;
    anime({
      targets: { scroll: $window.scrollTop },
      scroll: $target.offsetTop,
      duration: 500,
      easing: 'easeInOutQuart',
      update: (a) => {
        $window.scrollTop = a.animations[0].currentValue;
      }
    });
  }
velocity
  //$target = document.querySelector(TARGET);
  scroll($target) {
    velocity($target, 'scroll');
  }

終わりに

他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。

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

anime.js アンカーリンク 実装方法

はじめに

初めてanime.jsでスムーススクロールの実装をしてみました。
普段はvelocity.jsを使っているため、やり方が違ってハマってしまい、調べても出てこなかったので備忘録として記事にしました。

実装方法

anime
  //$target = document.querySelector(TARGET);
  scroll($target) {
    const $window = window.document.scrollingElement || window.document.body || window.document.documentElement;
    anime({
      targets: { scroll: $window.scrollTop },
      scroll: $target.offsetTop,
      duration: 500,
      easing: 'easeInOutQuart',
      update: (a) => {
        $window.scrollTop = a.animations[0].currentValue;
      }
    });
  }
velocity
  //$target = document.querySelector(TARGET);
  scroll($target) {
    velocity($target, 'scroll');
  }

終わりに

他のアニメーションとの兼ね合いでanime.jsを使う必要がありました。
velocityのときは一行で済んでいたのですが、anime.jsだとそうもいかず。。
調べてもなかなか出てこず、ハマりました。
もう少しスマートにかけないかなあと思っているので、こうした方がいいよ等ございましたら
教えていただきたいです。

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

[JavaScript][jQuery]簡単なハンバーガーメニュー(ドロワー)

はじめに

本記事ではjQueryを使用して、スマートフォン向けサイトなどで見る機会が多い「ハンバーガーメニュー」を作っていきます。
ハンバーガーメニューとは以下の場合、右上に設置されている物です。
スクリーンショット 2020-05-14 13.47.47.png

今回は以下のような簡単な仕様で作成します。

  • jQueryを使用
  • 普段メニューは非表示
  • メニュー表示ボタンにはimage画像を使用
  • 押すと右側からメニューがスライドして表示
  • 表示速度は0.3s

表示の仕組み

  • 普段はメニューを画面の右外に設置し、視覚的に隠しておく
  • 表示ボタンが押されると画面全体が左にスライドし、右外に位置していたメニューが画面内に移動して視覚化される

編集するファイル

  • index.html
  • style.css

以上のみです。なお今回は分かりやすくするためjQueryの記述はindex.htmlにしていきます。
CSSの内容については、基本的に割愛させていただきます。
また、メニューボタンのviewに関しては画像を使用しています。

viewの作成

index.html
<body>
  <div id="wrapper">
    <header>
      <div class="container">
        <div class="title-block">
          <h1>Sample ハンバーガー</h1>
          <h2>右にハンバーガーメニューを設置</h2>
        </div>
        <div class="hamburger" id="open_nav">
          <img src="hamburger.png" alt=""> <!-- メニュー表示ボタン -->
        </div>
      </div>
    </header>
    <main>
      <div class="container">
        <section>
          <div class="content">
            <h1>Qiita用</h1>
            <p>ハンバーガーメニュー<br>
                    よくスマートフォン用サイトで使われていますが、<br>
                    利便性はもちろんのこと、なによりオシャレですよね</p>
          </div>
        </section>
      </div>
    </main>
  </div>
  <nav id="nav">  <!-- 表示されるメニュー -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</body>

htmlに関しては、今回詳しく説明しませんが以下がメニューを表示するためのボタンで

index.html
<div class="hamburger" id="open_nav">
  <img src="hamburger.png" alt="">
</div>

以下が、右側から表示されるメニューの内容です

index.html
  <nav id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>

おそらく、このような表示になっているかと思います。

スクリーンショット 2020-05-14 14.11.53.png

左側に表示されている物が、今回表示するメニューです。
普段は隠れていて、メニュー表示ボタンに対応して表示されるものですが、現段階では常に表示されていますね。
ちなみに、今のCSSはこのようになっています。

style.css
    padding: 24px 24px 0 24px;
    background: gray;
    color: white;
    width: 270px;
    height: 100%;
    position: fixed;
    top: 0;

色などは、自由に変更してください。
このCSSを編集して、メニューを隠します。

styll.cssを編集してメニューを隠す

style.css
    padding: 24px 24px 0 24px;
    background: gray;
    color: white;
    width: 270px;
    height: 100%;
    position: fixed;
    top: 0;
    /* メニューの幅(width)と同じ数値を指定 */
    right: -270px;

これで、メニューは画面外に位置するため、視覚的に隠れたかと思います。
次に、メニューを表示させるためのCSSも追記していきます。

style.css
.show {
  transform: translate3d(-270px, 0, 0);
}

showクラスを持つ要素を、左にスライドさせるための記述ができました。
あとは、表示ボタンが押されると、サイトのメイン部分である#wrapper と #nav にshowクラスが付与されるようJavaScriptを記述していきます。

JavaScriptの記述

index.html
  <script src="../../_common/scripts/jquery-3.4.1.min.js"></script>
  <script>
    'use strict'

    $(document).ready(function () {
      // メニュー表示ボタンが押されると発火します //
      $('#open_nav').on('click', function () {
        // #wrapperと#navを取得し、showクラスを付与、または剥奪します //
        $('#wrapper, #nav').toggleClass('show');
      });
    });
  </script>

以上で、画面の右外に位置してしたメニューが表示されるようになったかと、思います。
これだけでも使用できるのですが、好みに合わせて以下のようにするのも、いいかと思います。

style.css
#wrapper, #nav {
  transition: transform 0.3s;
}

表示のされ方が、右側からスライドして表示されるようになったかと思います。
あくまで好みの問題になりますので、ご自由に変更していただければと思います。

おわり

これで、スマートフォンサイトでよく見る、通称「ハンバーガーメニュー」が完成しました。
実装方法は、今回ご紹介した方法以外のものもありますので、色々と試してみると面白いかもしれません。
最後まで読んでいただき、ありがとうございました。

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

1分でDenoを触る

Deno v1.0が出たので、とりあえず触りたいという方向けに。

起動

Docker化してくれてる方がいるのでさらっと起動します。

docker run -it --entrypoint "bash" hayd/ubuntu-deno

サンプルを動かす

公式のサンプルを動かします。

deno run https://deno.land/std/examples/welcome.ts
アウトプット
Download https://deno.land/std/examples/welcome.ts
Warning Implicitly using master branch https://deno.land/std/examples/welcome.ts
Compile https://deno.land/std/examples/welcome.ts
Welcome to Deno ?

さらっとTypeScriptが走り恐竜くんが現れましたね。
あとは色々触ってみましょう。

参考

環境

% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.4
BuildVersion:   19E287

% docker --version
Docker version 19.03.8, build afacb8b
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

PHP - array_pushで躓いたこと

環境

ARM(といってもIntel SoC)
Linux(intel SoC向けディストリビューションPoky)
サーバはlighttpd
PHPバージョンは5.6.38

何が問題だったか

早速本題

ajaxからPHPをPOSTしてデータをやり取りしていました。
以下のコードではエラーが出てしまい、POSTデータが取れませんでした。

NG_code
$arr = array();
:
:
array_push($arr, $_POST['data1'], $_POST['data2'], $_POST['data3'], );

エラー内容は、鍵括弧の終わり「 )」がダメだよのエラー

PHPって最後にカンマ付けても問題ないはず

だがしかし、最後のカンマが問題でした。

OK_code
$arr = array();
:
:
array_push($arr, $_POST['data1'], $_POST['data2'], $_POST['data3']);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

graphql/dataloaderを使うときに足りないデータにnullを入れたり、順番を調整するのに使える

https://github.com/graphql/dataloader#batch-function
を応用すればいいだけ。
自分のjavascriptのレベルが低いときはスルーしてた

const users = [{
  id:3,
  name: "jone"
},{
  id:6,
  name: "paul"
},{
  id:8,
  name: "anna"
}];

const userIds =[6, 3, 8];

const mapped = userIds.map(
  userid => users.find(e => e.id === userid) || null
);

console.log(mapped);
/*
[
  { id: 6, name: 'paul' },
  { id: 3, name: 'jone' },
  { id: 8, name: 'anna' }
]
*/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Node.js】JavaScriptで組み合わせ,順列を列挙する (npmモジュールあり)

JSで組み合わせと順列を列挙する標準メソッドはない

Rubyだと

index.rb
array = [1,3,5];

#組み合わせ
p array.combination(2).to_a # => [[1, 3], [1, 5], [3, 5]]

#順列
p array.permutation(2).to_a # => [[1, 3], [1, 5], [3, 1], [3, 5], [5, 1], [5, 3]]

こんな感じで簡単に組み合わせ、順列の列挙ができるのにJavaScriptだとこれがない。Mathオブジェクトのメソッドにあってもいい気がするんだけど。。。

とにかくこのままだとpaizaで組み合わせ、順列の問題が出てくるたびにrubyで一から書き直す羽目になるので、JavaScriptで順列と組み合わせを列挙するコードを考え、ついでにrubyのコードより分かりやすく記述できるnpmモジュールも作りました。

コード

これから載せるのは実際にモジュールを作る際に書いたコードなのでしっかり動くはずです。

組み合わせ

//0~n-1の数字をk個ずつの組み合わせで列挙する関数
function rec(n, k) {
    if (k === 0) return [[]];
    const result = [];
    for (let i = 0; i < n; i++) {
        if (n - i - 1 < k - 1) continue;
        rec(n - i - 1, k - 1).forEach((js) => {
            result.push([i, ...js.map((j) => j + i + 1)]);
        });
    }
    return result;
}

//rec関数を使って返ってきた配列をarrayのインデックス番号と見立てて配列の組み合わせを作る
function com(array, num) {
    const last = rec(array.length, num);
    const result = [];
    for (let ite = 0; ite < last.length; ite++) {
        const answer = [];
        for (let fin = 0; fin < last[ite].length; fin++) {
            answer.push(array[last[ite][fin]]);
        }
        result.push(answer);
    }
    return result;
}

コード自体はそこまで長くないが、rec関数ではfor文をfor文で繰り返す回数が動的(語彙力)なので再帰関数を使うのがミソ。これに関しては「組み合わせ 列挙 javascript」でググれば上の方に出てくる記事(こんなのとか)にもあるので詳しくそちらを見ることをお勧めします。正直僕もあまり理解していません。

順列

//順列のコードは分からなかったので他サイト(後述)のほぼコピペ
const per = (array, num) => {
    const result = [];
    if (array.length < num) {
        return [];
    }
    if (num === 1) {
        for (let i = 0; i < array.length; i++) {
            result[i] = [array[i]];
        }
    } else {
        for (let i = 0; i < array.length; i++) {
            const parts = array.slice(0);
            parts.splice(i, 1)[0];
            const row = per(parts, num - 1);
            for (let j = 0; j < row.length; j++) {
                result.push([array[i]].concat(row[j]));
            }
        }
    }
    return result;
};

「組み合わせのrec関数を少し変えれば順列も作れるだろ」と鷹を括っていたものの、実際考えてみると全く思い浮かばず、結局他サイトのコードを少し変えただけという情けない結果に終わりました。このサイトの組み合わせのコードを使えば上のrec関数のくだりも必要ないのですが、流石にそれはあかん。ちなみにこの関数も再帰してますね。

作ったnpmモジュール

このコードを使ってモジュールを作ったので、開発の際に組み合わせ、順列の列挙がしたいという方は是非使ってみてください。

percom

permutation(順列)の"per"とcombination(組み合わせ)の"com"をくっつけた安直な命名。
npmページ
GitHub

環境設定は簡単。

こうして

$ npm i percom

こうするだけ

const percom = require('percom');

組み合わせ

組み合わせを列挙したければ

const array = [1,2,3]//もちろん文字列の配列でも可
const combinations = percom.com(array, 2);
  //combinations = [ [ "A", "B" ], [ "A, "C ], [ "B", "C" ] ]

順列

順列を列挙したければ

const array = [1,2,3]//もちろん文字列の配列でも可
const permutations = percom.per(array, 2);
  //permutations = [ [ 'A', 'B' ], [ 'A', 'C' ], [ 'B', 'A' ], [ 'B', 'C' ], [ 'C', 'A' ], [ 'C', 'B' ] ]

percom.com()もpercom.per()も第一引数に対象の配列、第二引数に列挙する組み合わせの要素数を入力すれば上手くいきます。


一から自分で作ったわけではありませんが割と苦労して作ったモジュールなので是非使ってください。ちなみにpaizaとかAtcoderではどのみちモジュールは使えないのでこのコードをコピペして使ってください。

Twitter

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

React Hooks: 子コンポーネントから親の状態をレンダー時に変えたら叱られた ー Warning: Cannot update a component while rendering a different component

ネストした子コンポーネントから親の状態を変えるReactアプリケーションで、少し試行錯誤したことを書きとめます。経緯の説明からはじめますので、タイトルの警告(Warning)の意味が知りたいという方は最後の「レンダーが済んでから親の状態を変える」をお読みください。

配列データから動的にドロップダウンメニューとコンポーネントをつくる

サンプルとしてつぎのコードで、ドロップダウンメニューと子のコンポーネントをつくります。同じ配列データ(selections)を用いて、それぞれ動的にテンプレートを組み立てました。3つのコンポーネントはメニューで切り替わり、表示されるのはつねにひとつだけです。

src/App.js
import React, { useState } from 'react';

function App() {
    const selections = [
        {name: 'Home', component: Home},
        {name: 'Products', component: Products},
        {name: 'About', component: About},
    ];
    const [selection, setSelection] = useState(selections[0].name);
    return (
        <div className="App">
            <h1>Selection</h1>
            <div>
                <select onChange={(event) => setSelection(event.target.value)}>
                    {selections.map((selection, id) => (
                        <option key={id}>{selection.name}</option>
                    ))}
                </select>
                <div>
                    {selections.map((_selection, id) => {
                        const Component = _selection.component;
                        return (
                            _selection.name === selection ?
                            <Component name={_selection.name} key={id} /> :
                            null
                        );
                    })}
                </div>
            </div>
        </div>
    );
}
const Home = ({ name }) => (<h2>{name}</h2>);
const Products = ({ name }) => (<h2>{name}</h2>);
const About = ({ name }) => (<h2>{name}</h2>);

export default App;

ひとつポイントとなるのは、以下に抜き書きした子コンポーネントのテンプレートをつくるコードです。配列からデータ(_selection)を取り出して、前述のとおりメニューの選択(selection)と一致するコンポーネントを表示しました。

このとき、コンポーネントをオブジェクトのドット参照(_selection.component)で定めるのは適切ではありません。クラスと同じアッパーキャメルケースが推奨されているからです(「[翻訳] Airbnb React/JSX Style Guide」「命名規則」参照)。そのため一旦変数(Component)に取り出しました。

src/App.js
{selections.map((_selection, id) => {
    const Component = _selection.component;
    return (
        _selection.name === selection ?
        <Component name={_selection.name} key={id} /> :
        null
    );
})}

これで、プルダウンメニューによりコンポーネントが切り替えられるようになりました(図001)。

図001■プルダウンメニューでコンポーネントが切り替わる

2005002_01.png

コンポーネントのテキストカラーを変える

プルダウンメニューでコンポーネントを切り替えたとき、ルートコンポーネント(App)のテキスト(<h1>要素)の色を変えます。この簡単なサンプルでは、メニューを選んだイベント(onChange)でそのカラー値を変数(color)にとり、テキストカラーに反映させればよいでしょう。

src/App.js
function App() {
    const selections = [
        {name: 'Home', component: Home, color: 'blue'},
        {name: 'Products', component: Products, color: 'green'},
        {name: 'About', component: About, color: 'red'},
    ];

    const [color, setColor] = useState(selections[0].color);
    return (
        <div className="App">
            {/* <h1>Selection</h1> */}
            <h1 style={{color: color}}>Selection</h1>
            <div>
                {/* <select onChange={(event) => setSelection(event.target.value)}> */}
                <select onChange={(event) => {
                    const name = event.target.value;
                    setSelection(name);
                    setColor(selections.find((_selection) => _selection.name === name).color);
                }}>

                </select>

            </div>
        </div>
    );
}

これでメニューを選ぶと、コンポーネントだけでなく、テキストの色も変わります(図002)。

図002■メニューを選ぶとテキストの色が変わる

2005002_02.png

子コンポーネントから親の状態を変える

子コンポーネントの切り替えが、メニュー以外からも行われるとしたらどうでしょう。たとえば、子コンポーネントの中に他のコンポーネントに移動するボタンがあるような場合です。それでも、ボタンクリックしたときの切り替え処理そのものは、親が一手に握るという対応が考えられます(多くの場合そうでしょう)。

ところが、本稿を書くきっかけとなったアプリケーションでは、子コンポーネントがルーターで遷移しました。つまり、ブラウザのナビゲーション(たとえば戻るボタン)でも、コンポーネントが切り替わってしまうのです。そこで、子コンポーネントの側から、自分が表示されたことを親に伝えようと考えたわけです。

つぎのように、子コンポーネントにそれぞれのカラー値と親の状態設定関数(setColor)を渡し、子の関数本体で設定をさせます。これで一応、コンポーネントの切り替えに応じて、親のテキストカラーが変わるようにはなりました。

src/App.js
function App() {

    return (
        <div className="App">

            <div>
                {/* <select onChange={(event) => {

                }}> */}
                <select onChange={(event) => setSelection(event.target.value)}>
                    {selections.map((selection, id) => (
                        <option key={id}>{selection.name}</option>
                    ))}
                </select>
                <div>
                    {selections.map((_selection, id) => {
                        const Component = _selection.component;
                        return (
                            _selection.name === selection ?
                            // <Component name={_selection.name} key={id} /> :
                            <Component

                                color={_selection.color}
                                setColor={setColor}
                            /> :
                            null
                        );
                    })}
                </div>
            </div>
        </div>
    );
}
// const Home = ({ name }) => (<h2>{name}</h2>);
const Home = ({ name, color, setColor }) => {
    setColor(color);
    return (<h2>{name}</h2>)
};
// const Products = ({ name }) => (<h2>{name}</h2>);
const Products = ({ name, color, setColor }) => {
    setColor(color);
    return (<h2>{name}</h2>)
};
// const About = ({ name }) => (<h2>{name}</h2>);
const About = ({ name, color, setColor }) => {
    setColor(color);
    return (<h2>{name}</h2>)
};

レンダーが済んでから親の状態を変える

メニューの切り替えを試してみると、ブラウザコンソールにはたとえばつぎのような警告が示されます。どうも、子コンポーネントから親の状態設定関数を呼び出すことが叱られているようです。

Warning: Cannot update a component (App) while rendering a different component (Products). To locate the bad setState() call inside Products, follow the stack trace as described in https://fb.me/setstate-in-render

Reactコンポーネントは、他のコンポーネントがレンダー中には副作用、つまりその状態を変えることが許されないのです。「React v16.13.0」の「Warnings for some updates during render」にはつぎのように説明されています(訳: 筆者)。

It is supported to call setState during render, but only for the same component. If you call setState during a render on a different component, you will now see a warning:

レンダー中に状態設定関数(setState)を呼び出すことがサポートされるのは、そのコンポーネント自身へのものにかぎられます。他のコンポーネントの状態設定関数を、そのコンポーネントがレンダーされているときに呼び出せば、つぎのような警告が示されるでしょう。

Warning: Cannot update a component from inside the function body of a different component.

ではどうするかというと、レンダーが済んでから状態設定関数を呼び出せばよいのです。解説はつぎのように続きます。

This warning will help you find application bugs caused by unintentional state changes. In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the setState call into useEffect.

この警告により、意図しない状態変更から生じるアプリケーションのバグが見つけやすくなります。あえて他のコンポーネントの状態を変えて、そのレンダー結果に反映したいというまれな場合は、状態設定関数の呼び出しをuseEffectでラップしてください。

あえて親の状態変更をレンダーに反映させたい今回の「まれな場合」は、つぎのように子コンポーネントからuseEffect()の副作用関数(第1引数)で親の状態を変えればよいということです。

src/App.js
// import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';


const Home = ({ name, color, setColor }) => {
    // setColor(color);
    useEffect(
        () => setColor(color),
        [color, setColor]
    );
    return (<h2>{name}</h2>)
};
const Products = ({ name, color, setColor }) => {
    // setColor(color);
    useEffect(
        () => setColor(color),
        [color, setColor]
    );
    return (<h2>{name}</h2>)
};
const About = ({ name, color, setColor }) => {
    // setColor(color);
    useEffect(
        () => setColor(color),
        [color, setColor]
    );
    return (<h2>{name}</h2>)
};

モジュールreact:src/App.jsの記述全体を、つぎのコード001にまとめます。併せて、実際のサンプルReactアプリケーションをCodeSandboxに公開しました。

コード001■子コンポーネントから親の状態を変える

src/App.js
import React, { useState, useEffect } from 'react';

function App() {
    const selections = [
        {name: 'Home', component: Home, color: 'blue'},
        {name: 'Products', component: Products, color: 'green'},
        {name: 'About', component: About, color: 'red'},
    ];
    const [selection, setSelection] = useState(selections[0].name);
    const [color, setColor] = useState(selections[0].color);
    return (
        <div className="App">
            <h1 style={{color: color}}>Selection</h1>
            <div>
                <select onChange={(event) => setSelection(event.target.value)}>
                    {selections.map((selection, id) => (
                        <option key={id}>{selection.name}</option>
                    ))}
                </select>
                <div>
                    {selections.map((_selection, id) => {
                        const Component = _selection.component;
                        return (
                            _selection.name === selection ?
                            <Component
                                name={_selection.name}
                                key={id}
                                color={_selection.color}
                                setColor={setColor}
                            /> :
                            null
                        );
                    })}
                </div>
            </div>
        </div>
    );
}
const Home = ({ name, color, setColor }) =>{
    useEffect(
        () => setColor(color),
        [color, setColor]
    );
    return (<h2>{name}</h2>)
};
const Products = ({ name, color, setColor }) =>{
    useEffect(
        () => setColor(color),
        [color, setColor]
    );
    return (<h2>{name}</h2>)
};
const About = ({ name, color, setColor }) =>{
    useEffect(
        () => setColor(color),
        [color, setColor]
    );
    return (<h2>{name}</h2>)
};

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

【初級編】JavaScript if文について

? if文

まずJavaScriptのif文の基本形を知りましょう♪

if(条件){
 条件が真なら実行
}

ifとは日本語で もし という訳をされます。
"もし条件が正しければ実行する"という感じの認識でいていただければOKです。

では試しに、もしheightが180なら、身長は180cmですという文章が出力されるコードを書いてみます。

const height = 180;

if (height == 180){
  console.log('身長は'+ height + 'cmです。');
}

これで、コンソール上には、身長は180cmです。と出力されると思います。
楽勝ですね!

? 【余談というか補足】

ちょっと話はそれますが、上記はあまり推奨されない記入例となっています。
どの部分かわかりますか?
正解は条件の部分にあります。
== ←この部分ですね。解説していきます。

const height = 180;

if (height == 180){
  console.log('身長は'+ height + 'cmです。');
}
// == この記載は、文字と数値を識別せずに値が一致していれば。tureを返します。どういうことかと言うと

const height = '180';  //string型
このように記載してもtureを返してしまうのです。
// 非常に気づきにくいバグを仕込んでしまうことがあるので、このように書くことは推奨されていません
//ではどうしたら良いのでしょうか?

if(height === 180){ //省略

このように,=== とすることで 型と値が一致したらtureを返すといったようになります。
//つまり、上記の条件だったとすると

const height = 180 ; //こっちなら型と値が一致しているので、console.logに出力される
const height = '180' //条件はnumber型の180を求めるのに対して、値はstring型の180となり、条件に反しているのでプログラムは実行されません。

ですので、基本的に条件が一致したらとする時は === このように書くと良いかと思います。

? 条件分岐【else,else if ,if文のネスト】

これまでは、条件が一致したら出力するというようなコードを書きましたが、
一致したら条件1を出力、一致しなければ条件2を出力といったような書き方をするにはどうすればよいでしょうか?
こちらは elseという物を使います。

基本形
if(条件){
//tureだったときの処理
}else{
false()だったら実行
}
//このように、if文のあとにelseと書いて値が違ったら実行するコードをかけばいいです。

const height = 180;

if (height === 180){
  console.log('身長は'+ height + 'cmです。');
}else{       //条件が一致してなかったら。
  console.log('身長は'+height+'cmではありません'); //この処理を行う。
}

このような形になります。elseはそうでなければこうする!みたいなイメージを持つと良いかもしれません。

複数の条件をつけたい場合【else if】

コレまでは真か偽かの2択でしたが、この条件、あるいはこの条件、そうでなければこの条件のように何パターンか条件を用意したいことが出てくると思います。
そんなときはelse ifを使用します。感覚としては、あるいは〜という感じでOKかと思います。
実際にコードを書いてみましょう。

基本形
if(条件){
//tureだったときの処理
}else if (新しい条件){
 //新しい条件がtureだったら実行
} else{
//false だったら実行
}
実際にコードで見てみましょう。

const coler = 'red'

if (color === 'red'){
 console.log('赤りんごです');
}else if (color === 'green'){
 console.log('青りんごです');
}else{
 console.log('やばいりんごです');
}

上記のコードであれば、redと打ち込まれれば、赤りんごです、greenと打ち込まれれば 青りんごですと返し。
その他は やばいりんごです といったように値が帰ってきます。
非常に簡単なコードですね。

if文のネスト

また、if文の中にif文を作ることも出来ます。それをネストといいます。
コードで書くとこのようになります。

const color = 'red'
const size = 'small'

if (color === 'red'){
  if( size ==='small'){
    console.log('そりゃイチゴです。');
 }
} 

2つの条件が一致したらそりゃイチゴです と出力されます。
しかし、このネストはどんどん重ねていくたびに条件が複雑になり、読み手がわかりにくいコードになっていくので
できるだけシンプルに書くことが推奨されます。
またelse ifも同様に増えれば増えるだけ分かりにくくなりますので出来るだけシンプルにif文で書くとよいです。

長くなるので、パート1はこの辺で終了したいと思います! 

? 【まとめ】

  • if文は 条件が 真 なら実行
  • 条件外なら else 条件を追加するなら else if
  • 一致の条件をつけるなら == ではなく === で書くと型も判別できる!
  • if文はネストできる!

? 【次回予告】

if文パート2になります!

記事を見ていただいてありがとうございます。
ご指摘有りましたら編集リクエストまでドシドシお願いいたします!

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

Glitchを使って24時間動き続けるDiscordBotを作る

前回の記事でBotをローカルで作成、起動する方法を紹介しましたが、あの方法だとパソコンを常に起動しておかないとBotがオフラインになってしまします。
なので今回はGlitchというサイトを使ってBotを起動し、常時起動にする方法を書いていきます。

必要なもの

  • BotのTOKEN
  • Glitchのアカウント
  • uptimerobotのアカウント

Botのトークンに関しては、前回の記事のTOKENの取得を見てください。

Glitch

https://glitch.com/
へ飛び、右上にあるSign inを押してください。
キャプチャ.PNG
アカウントを持っている場合はサインインしてください。
アカウントを持っていない人は、したのCreate an accountを押し、アカウントを作成し、サインインしてください。

サインイン出来たら、こちらに飛んでください
https://glitch.com/~discordbot-template-d-js
キャプチャ.PNG
下にスクロールしていくとRemix Your Ownというのがあるので、そこを押しましょう。

そうすると、編集画面に飛ぶかと思います。
この時点でコードはほぼ出来上がっているのでコードを書く必要はありません。
そしたら、.envファイルにあるDISCORD_BOT_TOKENにTOKENを入れましょう。
これでもう起動はするはずです。
しかしglitchの使用上、5分間程度ページを開いていないとアプリケーションが止まってしまいます。
そこで使うのがUptime robotです!
キャプチャ.PNG
編集ページの上にあるShowを押し、In a New Windowをおして開いた時に飛ぶページのURLをコピーしておいてください。

uptimerobotの設定

uptimerobotのページへ飛びましょう(https://uptimerobot.com/)
キャプチャ.PNG
アカウントををっている人はLogin、もていない人はSign-upからアカウントを作ってください。
(アカウントを作成する際、有料版か無料版か求められますが、無料版の方で問題ないのでそちらを選択しましょう)
ログインできればダッシュボードに進むはずです。
キャプチャ.PNG
そうしたら、+ Add New Monitorを押しましょう。
キャプチャ.PNG
そうするとこんな画面が出てくるので設定をします

  • Monitor typeは HTTP(s)
  • 名前はなんでもいいです
  • URLは先ほどコピーしたURLを入れましょう
  • 下にあるメールアドレスを選択しましょう(アカウント登録の際に使ったアドレスが出ているはずです) これで終わり! Create Monitorを押しましょう。

これで終わりです!

おわり

前回よりこちらの方が簡単な気がする... :thinking:
読んでくださってありがとうございました!

(もしかしたら抜けてるところとか間違えてるところがあるかもしれません。もしも間違えがあったらコメント等で指摘してください)

参考にしたページやサイトなど

https://glitch.com/~pumped-chopper
https://note.com/bami55/n/ncc3a68652697

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