ちょっとだけカテゴリ整理

どうも！LSSです！！ お気づきの方もおられるかも知れませんが、最近、ちょっとだけこのブログのカテゴリを増やしました！ 4つの新カテゴリ まいくらにっき 超入門のさわりだけ まとめ記事 WebAudioAPI まだまだ仕分けるべきところはありますが… 4つの新カテゴリ 「まいくらにっき」 「超入門のさわりだけ」 「まとめ記事」 「WebAudioAPI」 の4つとなります。 まいくらにっき たまに思い出したように書く、ゲーム「マインクラフト」に関する記事です。 クリスマスなどの季節ネタだったり、装置ネタだったり。 超入門のさわりだけ HTML・CSS・JavaScriptなど、「全く知らないが…

【WebAudioAPI】なぞのがっき を作ってみました

どうも！LSSです！！ 今日は、WebAudioAPIを利用した「なぞのがっき」を作ってみました！ なぞのがっき 仕様 コード 唐突に、なぞなものを作った動機 にゃんこの反応 なぞのがっき 画面を閉じる ここをクリックすると始まります（注意：音が鳴ります） // 終わる時は画面左上に現れる「画面を閉じる」をクリックしてください。 仕様 一応、スマホやタブレットのマルチタッチに対応していますが、PCのマウスクリックでも鳴ります。 タップまたはクリックした場所の「画面上の横位置」に応じた高さの音が鳴ります。（約2秒間） コード <style><!--#gamen{display:none;back…

【日記】赤ちゃんのいる家

どうも！LSSです！！ だいぶ前に、 リモートの話とイモートの話（…無理があるなぁw） こんな記事を書いていましたが、ようやく…ようやく…姪っ子と初めてお会いする事ができました！^^ 本来なら、正月には妹夫婦は帰省してたハズだったんですが、コロナ禍で見送り。 でも、なんだかんだで自分以外の家族は全員、妹夫婦宅に行って対面していて、自分だけが会えずにいた、という状況でした。 何日か泊まっていくようで テストプレイの様子を見て思ったのは… 赤ちゃん向けゲームアプリを作る場合に開発者が留意すべき事 マルチタッチ対応が必要 全画面表示が望ましい 音と画像演出にこだわりたい 赤ちゃんに教わった事 家に赤…

【制作中】もぐらたたき 効果音つき【だいぶ中途半端^^;】

sound GAME STARTGAME STOP // 0){oc0p(0,999,0.7);}} } function gstop(){ if(gmst){gmst=false;for(i=0;i3){ms[i]=2};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3}break; case 3:m[i]--;if(m[i]0){oc0p(440,550,0.5);}};break; } document.getElementById('mg'+i).setAttributeNS(null,'y',(((i0){oc0p(600,100,0.3);} mg…

マウスを2台購入！

どうも！LSSです！！ 最近、長く使っていたマウスのホイールの動きが少し怪しくなり、使えなくはないですが微妙にストレスなので、買い替えちゃいました！ …と同時に、Amazonでちょっと変わり種のマウスを見つけたのでそちらもポチ。 Amazonのは昨日ポチって今日届き、メインのマウスは本日電器店で購入しました。 メインのマウス 変わり種デバイス「エアマウス」 いずれも低価格帯で買えるのが魅力^^ メインのマウス ロジクール ワイヤレスマウス 無線 静音 Bluetbooth Unifying 7ボタン M590RU ルビー windows mac Chrome Android iPad OS 対…

【制作中】もぐらたたき用 点数SVG案

どうも！LSSです！！ なかなか時間が取れず、進まずにいた 【制作中】もぐらたたき「倍速もぐら と 超速もぐら」 の制作ですが、「もぐらを叩いた時に点数が出てくる」ようにするための「点数表示」をSVGで描いてみました！ レトロゲーム風 実際の表示サイズはこのぐらいかな レトロゲーム風 コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" stroke="black" style="border: 1px solid black; background-color: green;"><path…

今年、学びたいこと

＃今年、学びたいこと by Udemy どうも！LSSです！！ 久々に？お題記事を書いてみます！ #今年、学びたいこと 浦島太郎状態 ブログを始めたのがきっかけ と、ここまでが前置き アウトプットも大事！ #今年、学びたいこと このブログ、始めた時はAndroidアプリ開発ブログとしてスタートしましたが、すっかり「HTML・CSS・JavaScript」ブログの様相を呈していますねw じゃあ、「今年こそAndroidアプリ開発」か？というとそうでもなく…引き続き、Web関連をまだまだ覚えていきたいです。 浦島太郎状態 何度か書いている事ですが、その昔、HTML4.0の時代にも、HTML+CSS…

【JavaScript】WebAudioAPIで12音階を鳴らしてみます！

どうも！LSSです！！ WebAudioAPIで色々試していますが、今回はそのうち「ドレミ」12音階を鳴らしてみるものを作ってみました！ なお、基準となる音「ラ」の音の周波数は440Hzだったり442Hzだったりするようですが、今回は「442Hz」で計算しています。 スライダーでオクターブや音階を選び、「音を鳴らす」ボタンを押すと、3秒間、指定した音が鳴る、というサンプルになります。 サンプル コード あとがき サンプル // コード <p><input id="oto1" type="button" value="音を鳴らす" /></p><p><span id="octg"></span>…

もしも、あなたがLSSだったら…

どうも！LSSです！！ なんとなーく、考えた事なんですが… 自分はこうして、趣味としてプログラミングぽい事をかじり、色々と試みています。 いっても素人ですが、お褒めに預かるととても嬉しいですね^^ で、思ったのですが、「もし、あなたがLSS程度の技術を持っていたら」何をしたいですか？ …なんて、ふと聞いてみたくなりましたw 実現の可能性の大小や、規模の大小を問わず（例えば「タイムマシン制作に挑戦したい」でも「ブラウザ上で動作する電卓を作りたい」でもOKw） と言ってみたらどうなるかな？って思いましたw ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

【JavaScript】WebAudioAPIで音を生成してみるテスト

どうも！LSSです！！ 昨日、 【JavaScript】できないと思ってたらできた！？ Web Audio API でJavaScriptから音を生成（サンプル第一歩目w） で新たな扉を開いてしまいましたw で、色々と試していたんですが、どう設定したらどんな音になるか？は、想像がつきにくいですよね。 なので、主に自分用にですが、「手軽に設定変更して即座にどんな音になるか試せるツール」を作ってみました！ 「特に何かの役にたつ」というものではありませんが、…とりあえず遊べますw 音生成テスト コード 一番分かりにくいのは「変化」の項目 他にも色々試してみています 音生成テスト 以下の各項目を変更す…

【JavaScript】できないと思ってたらできた！？ Web Audio API でJavaScriptから音を生成（サンプル第一歩目w）

どうも！LSSです！！ 「できたらいいのに」と思っていた事のひとつに、「JavaScriptで音を生成して鳴らす」があります。 JavaScriptで音をどうこうする、のは、知ってる限りでは「別途音声ファイルを用意し、それを演奏したり止めたりの制御ができる」ぐらいで、MIDIのように音階・音量を指定して演奏するような事はできないもの、と思ってました。 …が、実はそれができちゃったようです！？ WebAudioAPIを使用したサンプル 音作りの設定箇所 WebAudioAPI、かなり奥が深そう… 思うままに効果音が作れる… WebAudioAPIを使用したサンプル // コード <input i…

【制作中】もぐらたたき「倍速もぐら と 超速もぐら」

どうも！LSSです！！ に続き、もぐらたたきを作っています。 まだ、もぐらのSVG絵をいろいろ描かなきゃなんですが、今回はシステム的な面で手を加えてみました、の中間報告です^^ もぐらたたき 説明 ゲージ レベル もぐら 倍速もぐら 超速もぐら 未実装の要素 スコア タイトル画面 もぐらをたたいた時の演出 金もぐら メカもぐら 難易度設定 もぐら画像のバリエーション あとがき もぐらたたき // 3){ms[i]=2};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3}break; case 3:m[i]--;if(m[i]60){lv++;gg=0;} gw…

AmazonMusicに誤って登録してしまった話w

どうも！LSSです！！ 以前、Amazonが出しているタブレット、Fire7を安い時に入手しました。 普段は￥5,980で販売されていて、それでも十分安いのですが、たまに￥3,980になったりするようです。※3/20追記！この記事を投稿した翌日、3/20から3日間のタイムセールで￥3,980になってます。なんてタイミングだw Fire 7 タブレット (7インチディスプレイ) 16GB 発売日: 2019/06/06 メディア: エレクトロニクス 安さの秘密は…そもそもスペック的にはあまり高くない事と、ロック画面に広告が表示される事、GooglePlay非対応で代わりにAmazon独自のアプリ…

【CSS】CSS小ネタ。box-shadowでこんな効果が！

どうも！LSSです！！ なんとなくCSSをいじっていたら、「かなりシンプルな記述で面白い効果」を見つけました！ シンプルなサンプル box-shadowって border-radiusとpaddingを使わないとこんな感じ 見出し装飾や、ちょっとしたポイントに良さそうですね シンプルなサンプル この枠には、border-radius、box-shadow、paddingしか使っていません。box-shadowにinsetをつけて、ぼかしを大きめにとるだけでこんな効果に！お手軽に やわらかく立体感のあるボックスが作れますね^^ コード <div style="border-radius: 15p…

【制作中】もぐらが動きます！

どうも！LSSです！！ 昨日に続き、もぐらたたきに手を加えてみました！ 動きます！ とりあえず動く様子だけ見られるようにしようと ランダムにぴょこぴょこ出てきますね^^ 動きます！ // 3){ms[i]=2;};break; case 2:mw[i]++;if(mw[i]>3){ms[i]=3;}break; case 3:m[i]--;if(m[i] とりあえず動く様子だけ見られるようにしようと 青空も入れてみました。 で、JavaScriptで「とりあえず動く様子」を見られるようにしてみました！ …まず自分が見てみたかったからですw コード（スクリプト部分のみ） <script>// <…

【制作中】もぐらたたきをSVGで作ろうとしています

どうも！LSSです！！ 以前、即興で「もぐらたたき」をJavaScriptで作ってみました。 「もぐら」という文字をクリックする、という素気ないものでしたが、画像・ゲーム性ともに充実させたものを作りたい、とは思っていて、 やけに可愛くできあがってしまった「もぐら」の絵も描いたりしていました^^ あと、叩かれた「もぐら」の絵なども用意しなきゃですが、先に「ゲーム画面」をどうするかを考えていたので、今回ちょっとそれを形にしてみます。 まず穴を5つ配置します もぐらが隠れるためのカバーを用意します ほら、こうすれば土管じゃなくなりますw いよいよ、もぐら召喚！ 今のところはここまで まず穴を5つ配置…

ファミコン探偵倶楽部 スイッチ版 発売日決定してたんですね^^

どうも！LSSです！！ 初報では「2020年内発売！」とざっくりした告知で、そこから音沙汰ないなーと思っていたら、案の定発売延期になっていた「ファミコン探偵倶楽部 スイッチ版」ですが、2021年5月14日に発売決定！ していたようです！ さらにYouTubeにはPVもアップされていました！（2/18に…。気づくのおっそw） YouTubeのPV PVの感想 ファミコン探偵倶楽部について 第一作「消えた後継者」 第二作「うしろに立つ少女」 現代におけるリメイク、どうなることやら… YouTubeのPV ファミコン探偵倶楽部 消えた後継者・うしろに立つ少女 [Nintendo Direct 202…

【雑記】続アイコン案

どうも！LSSです！！ 昨日に引き続き、アイコンをコードで描く、という挑戦を続けていました。 まぁだいたい、形になったかな？完成でいいかな、ってところです。 // コード <p>[]<canvas id="cv2" style="border: 1px solid white;" width="256" height="256"></canvas>[]</p><p><img width="64" height="64" id="s64" /> <img width="16" height="16" id="s16" /></p><script>// <![CDATA[ctx=cv2.getCo…

LSSのアイコンって適当すぎるよねw

どうも！LSSです！！ はてなブログのアイコンについて。 ブログを開始してから、途中一度アイコンを変更していますが、それっきり。 黄緑色の背景に、文字を3つ乗せただけのごくごくシンプルなアイコンとなっていますw ↑こういうの。 ちょっと描き直そうか…でも大きく変えると、これまでスターを押してきたブログの方々に「えっ？誰？？」と思われそうなので、「全体的な雰囲気は変更せずに、微妙にかっこよくしたい」と思ったわけです。 なお、今回の記事はお役立ちツールではなく、LSS個人がアイコン制作に「多分他の人はやらない」方法で取り組んでいる様子を綴っただけの記事となります^^; どうやって描くか？この際コー…

【ツール】集中線・ベタフラ画像ジェネレータ【v0.1】

どうも！LSSです！！ 先日の、【ツール】ちぎり絵風枠ジェネレータ【プレビュー版 v0.2】の制作過程において、だいぶ最初のうちに「canvasにランダムに線を引くテスト」をしていました。 その過程の状態が「作ろうとしているものとは違うけど、これはこれでアリなんじゃないか？」と思えるものでしたので、別物として装丁を整えたものを今回公開しちゃいます！ 集中線・ベタフラ画像ジェネレータ 使い方 今回、作ってて気づいたんですが 他、このツールの改良案 集中線・ベタフラ画像ジェネレータ 線の数 : 線の色 : // 使い方 選択できるパラメータは「線の数」と「線の色」だけです。 スライダーや色選択をい…

【ガジェット】ロマンしかない！SFを夢見るプロジェクションキーボード

どうも！LSSです！！ 近年…というよりも もっと前から、科学技術の進歩と商業的成功の足並みが整ったと言いますか、色々とステキな商品が手の届く範囲で販売されるようになりましたね^^ 実現してなくても夢を語れるSFは、常に現実を先導していましたが、ひと昔前のSFに出ていたツールが現実のものとなっていたりします。 ふと思い返すと…自分が子どもの頃には「ノートPC」ですら夢のツールでしたねぇ…w さて、今日は近年 実際に販売されているけど、知名度はもうひとつ？なロマン溢れるガジェット「プロジェクションキーボード」について書いてみます！ プロジェクションキーボード まぁ、過度の期待は禁物w 使用場面を…

【ツール】ちぎり絵風枠ジェネレータ【プレビュー版 v0.2】

どうも！LSSです！！ の続編となります。 まだ、速度の方は改善されていないんですが^^;、とりあえず模様だけ増やしました。 前回同様の「ちぎり絵」の他、「ハート」「花びら」「星型」を選ぶ事ができます！ このツールを用いて作成・ダウンロードされた画像はご自由にお使いいただけます^^ ちぎり絵風枠ジェネレータ やりたい事がたくさん出て来て追いつかないw ちぎり絵風枠ジェネレータ 幅 : 高さ : 内側の幅（比率） : % 内側の高さ（比率） : % 破片サイズ : 数 : 色味 : 破片の形状 : ちぎり絵 ハート 花びら 星型 // (wd.value/2-wd.value*wdi.value…

【試行錯誤】ハートマークを描こう！

どうも！LSSです！！ 今回はただ、ハートマークの描き方に試行錯誤してみただけの記事になります。 おとといの「ちぎり絵風枠ジェネレータ」にいただいた、ブクマコメントで、 yasumarutaiwan LSSさんの作品たちにはいつもお世話になっております☺️✨ ちぎり絵かわいい！これバリエーション豊富にいけそうですね。1枚1枚の紙をハート型にするとか、星型にするとか。ブログが華やかになりますね💕 というアイデアをいただきました^^なるほど、無数のハートマークをちりばめた枠、ウケが良さそうです！！ 破片のカタチを何種類かから選択できるようにするとかも良さそうですね。 …さて、実際にそれを作るとした…

ちぎり絵枠＋アイキャッチ画像 こんな合わせ技も！！

どうも！LSSです！！ 昨日はなかなか時間がかかりましたが、自分でも面白いと思うものができました^^ コメント・ブクマコメントくださった皆様、試していただいた方、誠にありがとうございます！！ 画像作成してダウンロードできるツール ここから本題。ちぎり絵＋アイキャッチ画像作成 画像作成してダウンロードできるツール このブログ上で、画像を作ってダウンロードできるツールとしては、以前に こんなのを作っていました。 手持ちの画像ファイルを位置・サイズ調節・合成して、アイキャッチ画像にちょうどいいとされるサイズの画像として出力するものです。（これを公開して少ししてから、はてなブログにcanvaとコラボし…

【ツール】ちぎり絵風枠ジェネレータ【プレビュー版】

どうも！LSSです！！ ちょっとまた変わったツールを作ってみました。 このツールを用いて作成・ダウンロードされた画像はご自由にお使いいただけます^^ ちぎり絵風枠ジェネレータ（プレビュー版） 使い方 注意点（改良の余地^^;） 今回、プレビュー版とします ちぎり絵風枠ジェネレータ（プレビュー版） 幅 : 高さ : 内側の幅（比率） : % 内側の高さ（比率） : % 破片サイズ : 数 : 色味 : // (wd.value/2-wd.value*wdi.value/200))&&(tx(ht.value/2-ht.value*hti.value/200))&&(ty 使い方 スライダーで各パ…

【SVG+JavaScript】SVG要素をDOMで追加【実験】

どうも！LSSです！！ ↑先日、JavaScriptから要素を追加するDOMを試してみました。 innerHTMLを使うと「あたかも最初からそうHTMLを書いていたように」書き換えられる、という使い勝手の良さがありますが、それだと不都合なケースもあります。（inputタグによる、ユーザー操作で変更されるものなどを含んだ場合とか） で、そういえばSVGタグもHTMLと似たようなタグ構造を持っているので、そちらもDOM操作できるんじゃないか？と試してみました！ 結論から言うと…「できるけどHTML要素をDOM操作する時とは少し違う点がある」という結果になりました。 実験成功例 失敗例 悪ノリしたサ…

【駄文】SVGネタばかり浮かぶ今日この頃

どうも！LSSです！！ なんか最近、ブログ書こうとするとSVGネタばかりになります。 今も、SVGに関連する新たな実験をやって、なんとかうまくいったのでそれを書きかけていましたが、ちょっと後日にまわそう^^; HTML+CSS は、綺麗にレイアウト・装飾されたWebページを構築でき、HTML+JavaScript は、動的なコンテンツ（ブラウザゲームとか）を作る事ができます。 HTML+CSS+JavaScript で綺麗かつ動的なWebページが作れるようになりますが、CSSが苦手とするタイプの描画を埋められるのがSVGで HTML+SVG+JavaScriptでもコンテンツとして良さげなもの…

【グッズ・ガジェット】素敵なアダプタ・ケーブルたち！

どうも！LSSです！！ 今やほとんどのPC・スマホ・タブレットについてるUSB端子。 （スマホ・タブレットの場合はmicroUSBだったりTYPE-Cだったりライトニング端子だったりしますが、形状が異なるだけで役割的には同様です。） このUSB端子が出てくる前は、マウスにはマウス、キーボードにはキーボード、プリンタにはプリンタ用の端子が用意されていました。 それを「なんでも汎用的に繋げる事ができるようにしよう」として登場したのがUSB！ そしてほとんどのPCなどでUSB端子が標準装備されている今、一般的なもの以外にも色々面白いものが出て来ています。 有線LANアダプタ ディスプレイ（モニタ）ケ…

【CSS+SVG】ちょっと変テコな模様（背景用）を考えてみました

どうも！LSSです！！ 今回は、【CSS+SVG】インラインSVGを背景画像に指定に続き、画像ファイル不要で使える背景模様を考えてみました！ ちょっと変テコな模様 改変について CSSだけでも出来たかも？ですが ちょっと変テコな模様 '); background-size:50px; } --> ちょっと変テコな模様を作ってみました。CSS＋SVGで描いているので画像ファイルのアップロード不要です^^ちなみに、アルファベット小文字の a をモチーフにしています。この調子で作っていくと26種類の背景画像ネタを作れる事に！？w コード <style><!--.bga{padding:0.6em;b…

はてなブログ全体から記事検索

どうも！LSSです！！ 昨日、こんな記事を書いていました。 まぁさすがに検索機能…皆さんご存知ですよねw その記事にいただいたコメントで、興味深いコメントがありました。 やすまる(id:yasumarutaiwan) 私も自分の記事のリンクを貼り付けたいときに使っています。これすごく便利ですよね。誰かのブログ単体ではなく、はてなブログ全体の検索ってどこかにありますかね？それ、ずっとみつけられなくてタグの機能もイマイチ分かってないです…泣 なるほど、「はてなブログ」全体から、同じ趣味を持つブロガーと繋がりたいなどの場合に、「はてなブログに限定して」文字列検索ができると便利そうです！！ はてなの公…

【はてなブログ】記事検索機能、使った事ありますか？

どうも！LSSです！！ 自分が はてなブログデビューしてからそろそろ1年半ほどになります。 はてなブログ自体はオープンから10年近くになるそうですね！ その10年の間に、はてなブログはより良いブログサービスを目指して、様々な機能追加・改訂を行ってこられたようです。 その歴史の中には、なんとなく1年以上書き続けてきただけでは気づかなかったかも知れない！？機能も多々ありそうで…。 今回は、そんな はてなブログの機能の中から「記事検索」を紹介してみます！（いや、さすがにそれは知ってるわ！って声が多数あがりそうな気もしつつw） ブログ開設すると標準装備されてます 記事検索の使いどころ 他のブロガーさん…