【振り返り】2021年4月、このブログはこんなんでした。

どうも！LSSです！！ 4月の最終日。明日から5月＆暦通りなら5連休ですね^^ このLSSのブログでは、今月はどんな記事書いてたっけ？と、振り返ってみます。 記事一覧ページ MMLプレイヤー 加速度センサー 英単語抽出 CSSサンプル 論理パズル ペンタブ 記事一覧ページ 2021-04-01から1ヶ月間の記事一覧 サイドバーの「月別アーカイブ」から、いつでも見る事ができますが、4月の記事一覧はこんな感じでした。 MMLプレイヤー あ、これ今月からだったんだ。 WebAudioAPI自体はもっと前から触れていましたが、それを使ってMMLを再生するものを作ってみよう、と取り掛かったのが今月の最初…

ペンタブ練習中！エアブラシがいいかも？

どうも！LSSです！！ 先日、購入したペンタブですが、 ちょこちょこと合間を見て、お絵描き練習しています。 へのへのもへじ エアブラシ版 まるいの まだまだ使っていない機能はありますが… へのへのもへじ 前回描いた「つるニハまるまるムシ」さんより圧倒的に有名な「へのへのもへじ」さんを描いてみました！ 描いてみて思ったのですが、特に「じ」の描き方で印象をだいぶ変えられるんじゃないかな？と。 輪郭って顔の印象のうちで大きいのかもですね。 エアブラシ版 まるいの これまでずっと「ペン」ばかりを使っていましたが、「エアブラシ」もあります！ どうも「ペン」だと一発で決まってしまいすぎる？ような気がして、…

【CSS+SVG】ヘリンボーン模様の背景

どうも！LSSです！！ 【CSS+SVG】れんが模様の背景 で、CSSにSVGを織り込むという手法で、背景を描くコードを作成しました。 そのコメント欄に、 さじ(id:conasaji) レンガの組み方でヘリボーンってのもあるんですけど、以前の彩綾型みたいに組まれた模様で面白いかもです。%23にしなくちゃいけません、って決まりなんですか？誰が決めたんでしょうね（笑） とのコメントをいただき、ヘリボーンについて調べてみると、いつも通ってる歩道で見かけるような模様でした。 さじ様、いつもありがとうございます^^ ヘリンボーン (模様) - Wikipedia ※英語の読み方次第で、ヘリングボーンだ…

【CSS+SVG】れんが模様の背景

どうも！LSSです！！ CSSで描く背景について、色々と考えていました。 ふと「れんが模様の背景って描けないかな？」と思い立ったのですが…。 【CSS】うろこ模様 その他【小ネタ】 【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます！【極端な例】 【CSS】repeating-radial-gradientを何気に初めて使ってみる 【CSS】CSS模写 再び！【格子模様】 ↑これらと同様の手段を用いて、描けないものかと色々試みていましたが…挫折^^;;;;; で、 【CSS+SVG】ちょっと変テコな模様（背景用）を考えてみました で…

【JavaScript】はじめてのアロー関数

どうも！LSSです！！ 昨日の記事のコードのなかで、しれっと rndm=a=>Math.floor(Math.random()*a); という怪しげな一行を忍ばせていました。 これ、「アロー関数」と呼ばれるもので、何気に初めて使ってみたのです。 =>が「アロー関数」の特徴で、アロー＝矢っぽいからそう呼ばれているようですね。 JavaScriptの関数と言えば アロー関数 関数宣言からアロー関数への変化の道のり あとがき JavaScriptの関数と言えば function 関数名(引数){処理内容} のように記載するもの、という認識でした。 そうして宣言しておけば、同スクリプト内の別のところで…

【作りかけ】SVGお絵描きツール…を作り始めてみました【まだまだ】

SVGコードを取得する // ';} } class Svgell{ constructor(cx,cy,rx,ry,sw,sc,fl){this.cx=cx;this.cy=cy;this.rx=rx;this.ry=ry;this.sw=sw;this.sc=sc;this.fl=fl;this.name='楕円'+objs.length;this.nameid='ell';} get svgtxt(){return '';} } class Svgrct{ constructor(x,y,w,h,sw,sc,fl){this.x=x;this.y=y;this.w=w;this.h=h;…

【JavaScript】後からJavaScriptに実装された「class」を試してみました

どうも！LSSです！！ プログラム言語の進化の歴史の中で、「オブジェクト指向」という考え方が取り入れられるようになり、今やほとんどのプログラム言語で「オブジェクト指向」の概念が取り入れられています。 で、そのオブジェクト指向言語につきものなのが「クラス」という概念です。 オブジェクト＝モノクラス＝型 で、「クラスって何？型ってどういう事？」の説明によく引き合いに出されるのが「たい焼き」の話。 「たい焼き」は小麦粉の生地が魚のカタチになっていて、中にあんこが入っているスイーツですが、その「魚のカタチ」にするのに「焼き上げた後からいちいち魚のカタチになるように彫刻する」なんて作り方はしません。 あ…

ペンタブ練習中！

どうも！LSSです！！ 以前、記事の終わりの方に書きましたが、 【日記】ペンタブ届きました！ - Little Strange Software 久々にペンタブを購入しました！ ペンタブって、特に絵が得意というわけでもないのに、たまに欲しくなっちゃう魅力がありますよね？（高い本格的なものは除くw） かなり以前にも購入していたのですが、使いこなす…どころか、最低限扱えるようになる以前にほったらかしにしてしまっていました^^; 今回は、使いこなすには至らないまでも「最低限扱える」と自分で思える程度には、使えるようになりたいです！ で、実際届いて触ってみましたが、やはりなかなか難しいですね。 ペンタ…

論理パズル 解答

どうも！LSSです！！ 一昨日、出題させていただいた論理パズル2本立て 今回はその解答です！ 第一問「正直村と嘘つき村」の答え 第二問「Eは嘘つきか？」の答え 第一問「正直村と嘘つき村」の答え 「君たちは3人とも同じ村の出身ですか？」という問いに、2人は「はい」、1人は「いいえ」と答えました。 まず、この「君たちは3人とも同じ村の出身ですか？」という点から考えてみると…実際3人とも同じ村の出身だった場合は2通りの可能性（3人とも正直村だった場合・3人とも嘘つき村だった場合）があります。 3人とも正直村だった場合は、3人とも「はい」と答えるハズですね。3人とも嘘つき村だった場合は、3人とも「いい…

【WebAudioAPI】MMLプレイヤー、タイミング合わせに成功しました^^

どうも！LSSです！！ JavaScriptで曲を演奏できる！と知ってから取り掛かり始めた、MMLプレイヤー作成ですが、 複数のメロディを再生できるようにはなったものの、タイミングがズレてしまう！という致命的な問題にぶち当たっていました^^; が、解決策を見つけ、試してみたところ、無事成功しちゃいました！！ 他に実装したい機能もあるにはありますが、とりいそぎ、お披露目しちゃいます^^ MMLプレイヤー コード 音ズレの解決策 あとがき MMLプレイヤー l4g8r16g16ag<c>b2 g8r16g16ag<dc2> g8r16g16<gec>ba2r2 <f8r16f16ecdc2.> o…

論理パズル「正直村と嘘つき村」「Eは嘘つきか？」

どうも！LSSです！！ もう結構前になりますが、 こんな問題をあげていました。 で、突然思い出し＆また問題を思いついたので、出題してみます！ 今回は二本立て、でもどちらも前回より簡単な問題です^^ 第一問「正直村と嘘つき村」 第二問「Eは嘘つきか？」 今回はノーヒント 第一問「正直村と嘘つき村」 とある国の、とある地方。 そこには「絶対に本当の事しか言わない人ばかりが住んでいる『正直村』」と、「絶対に嘘しか言わない人ばかりが住んでいる『嘘つき村』」がありました。 ちなみに、その地方にはこの2つの村しかなく、その地方の出身者はどちらかの村の出身者、という事になります。 さて、その地方から都会に出…

【駄文】スクリプトのネタ

どうも！LSSです！！ JavaScriptの可能性といいますか、できる事が意外に多いなと思う今日この頃。 「Android・iOS用アプリを作って、ストアにアップロードして許可を得て…」ってしなくても、Webアプリでたいがいの事ができてしまうのでは？って思っちゃいますw やりたい事ばかり増えていき、消化が追いつかない感もありますが、ここでちょっと温めてるネタの一部を書いてみます。（ゲーム多め） すごろく プログラムすごろく 暗黒迷路 日替わり自動生成迷路 SVGコード生成ツール あとがき すごろく 「すごろく」ってゲーム。 あれって基本的には、戦略性のない完全な運ゲーなんですね。（特殊なマス…

【日記】ペンタブ届きました！

どうも！LSSです！！ に書いていた、ペンタブ届きました^^ 注文から24時間かからないうちに届くの、凄いですね！ 夕方に届いたようなのですが…爆睡していましたw とりあえず、接続＆ドライバインストールまでは行いました。 ちなみに XP-Pen ペンタブレット ペンタブ 4*3インチ 2mm厚さ 8192レベル筆圧 イラスト入門用 OSU!ゲーム用 黒 StarG430S B メディア: エレクトロニクス この機種、指操作はできないようですね。 ペンタブであり、タッチパッドではない、という事で、純粋にペンタブとしてはそのほうが都合がいいのかも？ サイズ的には一番小さいものですが、小さくて困るほ…

【グッズ・ガジェット】テレビをモニタにした話＋少しだけペンタブ欲

どうも！LSSです！！ 先日、購入したテレビの話 の続きになりますが、本日ようやく「モニターアーム」「HDMIケーブル」「アンテナケーブル」を買ってきて、接続してみました！ 結論から言うと…「デュアルモニタ化に成功しました！！」^^ （アンテナケーブルのほうはまだ使っていません） 不安要素はありましたが… 自分のPCの話 いざ接続！…あれ？映らないぞ？？ ググりました。 安価に構築できたデュアルモニタ環境 少しだけペンタブ欲 今、安く買えるペンタブは？ 不安要素はありましたが… ￥3,980で購入した「スタンドが欠品したテレビ」。 HDMI入力端子を2つ備え、どこかのQ&Aサイトで「VESA対…

【CSSサンプル】隠れた文字を照らし出すサーチライト【小ネタ】

どうも！LSSです！！ 先日、記事にいただいたコメントの返信を書いていた時に、ふと思いついてしまった小ネタがありました。 決して「使い勝手がいい」とは思わないですが、思いついてしまったものは仕方がありませんw ちょっとした小ネタとして「こんな事もできるんだ」程度に見てやっていただければ、と思います^^ サーチライト 設定変更 元記事 逆のほうが良かったかも… サーチライト 闇に描く君はあの日のまま僕に微笑みかける コード <style><!--@keyframes scha{0%{background-color:#000000;background-position:-1000px 0,10…

実は…最近、テレビを買っちゃいました

どうも！LSSです！！ 自分はテレビをほとんど見ない生活になって結構な年月が経ちます。 このブログを書き始めて間もない頃に↑のような記事を書いたりもしてましたね。 テレビ・ブログに関する感覚はこの頃と変わってなくて、購読中のブログを軒並み読む事で、受動的な情報流入になっています。 購入した機種 購入に至った経緯 でも実は、まだ通電すらしていません^^;;; 唐突に昔話 さて…電器屋にいくか、それともポチるか 購入した機種 買ったのはこちら！ 東芝 19V型 液晶 テレビ 19A8000(K) ハイビジョン 2009年モデル 発売日: 2009/03/18 メディア: エレクトロニクス Amaz…

【CSS】再び！キーフレームアニメーションについて

どうも！LSSです！！ CSSに実装されている「キーフレームアニメーション」機能、このブログでもたびたびサンプルなどで使用しています。 だいぶ前（一年ぐらい前）に、 こんな記事も書いていましたが、今回は「実際にキーフレームアニメーションを使ったものを作るのに、どんな手順で書いているか」を書いてみます！ はじめに、土台となるものから作ります 次に、動き（変化）を指定するkeyframesを作ります testクラスにキーフレームを呼び出すアニメを指定 最後まで再生したら逆再生で戻る 静と動 あとがき はじめに、土台となるものから作ります テスト中… コード <style><!--.test{wid…

【CSSサンプル】カーソルを載せると動くグラデーションバー

どうも！LSSです！！ また、なんか謎のCSSサンプルを作ってみました。 カーソルを載せると動くグラデーションバー コード 色変更・移動量変更・変化時間変更について あとがき カーソルを載せると動くグラデーションバー カーソルを載せると動くグラデーションバー ↑にマウスカーソルを載せてみてください。（スマホの方はタップ） コード <style><!--.grdbar{--gc1:#aaaaee;--gc2:#bbbbee;background-image:repeating-linear-gradient(135deg,var(--gc1) 0%,var(--gc1) 3%,var(--gc2…

【つまづき】加速度センサーを使ったアレの問題点いくつか

どうも！LSSです！！ 初めて、加速度センサーをJavaScriptから読む事に挑戦してみたのですが、下書き段階では問題なさそうに思えたものの、公開してみると色々と出てきましたw iPhoneで動作しない Andoroidでも発生する問題 最初から分かってた問題「スマホ専用」 iPhoneで動作しない そもそも、加速度センサー＋WebAudioAPIを使用したサンプルで、どっちかがコケても鳴らないのでどっちに問題があるか分かり辛い、という状況でした。 WebAudioAPIについては、タッチイベントで開始しないと、クリックイベントからはiPhoneで鳴らない…らしい？というところまで掴んでいた…

【WebAudioAPI】なぞのがっき2【スマホ専用】

どうも！LSSです！！ ほとんどのスマホには加速度センサー（動かした時の速度）や、ジャイロセンサー（傾き検知）が搭載されています。 自分がスマホを使い始めた頃は、それらのセンサーを使ったゲーム（TempleRunとか）を遊んだ覚えがありますが、近年まったくと言っていいほど、センサーを活用したものを見かけない気が…。 単にLSSが知らないだけかもですが、それはさておき。 JavaScriptからも、それらのセンサーを読み取る事ができるので、今回は「加速度センサーを利用した なぞのがっき」を作ってみました！ （今回はスマホ専用です。） なぞのがっき2 コード 加速度センサー 音について あとがき …

【つまづき】WebAudioAPIとiPhone

どうも！LSSです！！ 【WebAudioAPI】その昔、初めて片想い→失恋を経験した男が作った曲w - Little Strange Software がiPhoneで再生できないようで、iPhoneを持ってない身では「うーん、どこからだろう？」ってなってますw 追記：タッチイベントボタン「鳴らす（iPhone用テスト）」を追加してみました。 例えば…だいぶ前に遡って、 【JavaScript】WebAudioAPIで音を生成してみるテスト - Little Strange Software は鳴ります？ あと、 【WebAudioAPI】超簡易MML（作り始めw） - Little Str…

今週のお題「下書き供養」

どうも！LSSです！！ 今週のお題「下書き供養」 何を書こうかな？と思いながら、ふと見ると、今週のお題がこれ！ マジか…。 一年以上前に、 こんな記事を書いた事がありますw 思えばその後も、色々下書きにカタチにならないままのネタが貯まってきました。 という事で、今回はそのうちの一部を引っ張り出してみます！ CSSサンプルのできそこない SVGアイコン案 せざるを得ない 自作小説 「黄金の霧雨」 あとがき CSSサンプルのできそこない コード <style><!--.nnm01{width:300px;height:300px;background-image:linear-gradient(1…

【JavaScript小ネタ】複数行からなるコードを一行にまとめてみます

どうも！LSSです！！ 先日、 というものを作って記事にしていました。 その記事中で使用したコード、元々の話が「学び」だったのもあり、誰かの参考＆自分が見返す時にいいかな？と 「処理を細かく行に分け、さらにコメントをしつこめに入れる」 って事をやってました。 じゃあ逆に「可読性を無視して、とにかくコードをひとまとめにしようとしたら、どこまで まとめられるか？」をちょっとやってみたくなりましたw 元のコード まずは、functionの中身から手をつけてみます 次はちょっと話が変わってきます ソート…？ 重複削除、も「置き換え」で考えると 最後に画面に書き出すところさえも、まとめてしまう ここまで…

お題「#新生活が捗る逸品」

お題「#新生活が捗る逸品」 どうも！LSSです！！ …自分自身は新生活する予定はないのに、このお題に挑戦してみましたw 超コンパクトな炊飯器！ 屋台横丁 ミニアイロン 大容量なのに厚さ10mmをきるモバイルバッテリ あとがき 超コンパクトな炊飯器！ 2段式炊飯器 コロナ感染抑える高速弁当箱炊飯器 0.5~1.5合 ひとり暮らし用 蒸し 炊き 温め機能付き 1台3役 小型 一人用 小型炊飯器 米もおかずもこれ一台 車中泊 自宅 職場でも大活躍 1年品質保証 メディア: これはやっぱり気になりますね！ 昔は一人暮らしするなら炊飯の量に迷ったものでしたが、今ならこんなにコンパクトに！！ しかも、持ち…

【CSSサンプル】2つの四角形に囲まれたボックス

こんな風に、2つの色の違う四角い枠線がズレて配置されたようなボックスを作ってみました！実はこれ、枠線じゃなくて背景だったりします。でも、枠の内容のサイズに応じて伸縮しても支障なく表示されますよ^^ どうも！LSSです！！ 実は以前からCSSサンプルのネタとして↑のような枠を思いついていたんですが、 border outline box-shadow のどれを使ってもしっくりこなくて、伸ばし伸ばしになっていました^^; …が、ふっと別の方法を思いついたのでやってみたところ、うまくいったのが今回のサンプルとなります！ コード 枠線の正体 アニメ―ションもつけてみました 他にも改変のやりようはありま…

【WebAudioAPI】その昔、初めて片想い→失恋を経験した男が作った曲w

どうも！LSSです！！ ええと…もう遥か昔の話になりますが。 自分が初めて「失恋」というものを体験した際に、記念に（？）作った曲がありますw WebAudioAPIで曲を演奏できる事を覚えたので、ここでひとつ、晒してみます！ 曲名：Sweetdays 元々、切ない系メロディが好きですが 音ズレについては未だ解決せず 曲名：Sweetdays eab <c>bab4g4e agfg4e4c fede4ea<c> b4g#e4eab <c>bab4g4e agfg4e4c fede4ea<c> b4g#a4eab <c>bab4g4e agfg4e4c fede4ea<c> b4g#e4eab <…

【JavaScript】英文から英単語を抽出してみる

どうも！LSSです！！ さじ(id:conasaji)さんの記事、 conasaji.hatenablog.com を読みました。 その中で、 出来れば最初にどんな系列の単語を覚えたいのかを登録できたらいいですね。英文を読み込んだらその中から毎日ひとつずつ出てくるとか。 学び舎を求め。 - ゆるっと広告業界 と書かれていましたが、この「英文から英単語抽出」、作れる自信はありましたがそういえば作った事がなかったな、と思い、今回試しに作ってみました。 英文から英単語抽出 コード Google翻訳で英文ゲット！ 今回は英単語抽出してみただけですが 英文から英単語抽出 Once upon a time…

【WebAudioAPI】MMLプレイヤー制作中【なにかがおかしい】

どうも！LSSです！！ 【WebAudioAPI】超簡易MML（作り始めw） に続き、MMLプレイヤーを作っていました。 オクターブ変更・半音階対応・音長指定・3チャンネルまでの同時再生、に対応できました！！ …が、どうも最後の「同時再生」が微妙にズレるような…？？ MMLプレイヤー まずは「鳴らす」をクリック MML文法について 音階 音長 オクターブ その他 同時再生については（仮）って事で^^; MMLプレイヤー <c4>bagfed crcrccde fffec2> b4<c4d4>b4< cdedc2 bbbbb2 <cccc4.>b4 <c1> o3 r1 e2f2d2e2 c2d…

【CSS＋JavaScript】フルスクリーン表示サンプル

どうも！LSSです！！ 先日の記事、 で、しれっと「ブログの記事幅を無視して全画面を覆うような表示」を行っていましたが、今回はその部分だけをサンプルとして公開します！ 性質上、スマホはあまり関係なく、PCでブログを見る場合向けのネタとなります。 サンプル コード 使い方 CSS装飾・仕組みに関係ある部分と関係ない部分 問題は…「何を見せるか」ですねw サンプル 閉じるここに、フルスクリーンで見せたい内容を記述します。何を書くか迷っちゃいますね^^;;; 開く // ↑の「開く」をクリックすると、ブログの記事幅設定に関係なく、画面いっぱいに表示されます。 表示中に右上に出てくる「閉じる」をクリッ…

【WebAudioAPI】超簡易MML（作り始めw）

どうも！LSSです！！ WebAudioAPIでやりたかった事のひとつに、「MMLを再生するプレイヤーを作る」があります。 「オクターブ変更は…」「音の長さを変えるには…」「休符は…」「テンポ指定は…」などなど、考えれば考えるほど大変そうになってきますw ので、とりあえずは「ごくごく簡単なモノ」をまずは試しに作ってみました^^ （LSS得意のハードル下げw） 超簡易MMLプレイヤー MMLとは 「超簡易」とはいえ、MMLプレイヤーを名乗るのはおこがましいレベルw 一応…今回のコード！ 超簡易MMLプレイヤー // ='a' && mml.value.charAt(pos) まずは「鳴らす」ボタ…