かつてプログラミングをかじった事がある程度の初心者が、CSSやJavaScriptで色々作ってみたりするブログです。 同じ志を持つ方には何かの参考になれば、かつて初心者だった上級者の方には微笑ましく見守っていただければ幸いです！
当ブログの紹介。 Webページ上で画像ファイルを生成・保存できる「画像生成ツール」カテゴリ、音を作って鳴らす事ができる「WebAudioAPI」カテゴリ、記事内で遊べる「ブラウザゲームそのままプレイ」カテゴリなど、JavaScriptで出来る事が幅広くて面白いですね^^ まったくの初心者向けに書いた「超入門のさわりだけ」カテゴリなんてのもあります。
|
https://twitter.com/LSS0324 |
|---|
【JavaScript】JSONをJavaScriptで試してみます【実験】
どうも！LSSです！！ 昨日の記事… JSON→ジェイソン、から安易に「13日の金曜日」に繋ぎましたが、JSON自体が正体不明で怖かったですねw とりあえず「JSONってなんぞや」というのを自分は分かったつもりになったところですが、プログラミングを覚えるのには「読んで分かったつもりになるのではなく、自分で書いてみる事が重要」という基本に立ち返り、今回ちょっと書いてみました！ JSONを試してみる！ どこがJSONかというと パース（展開） JSONを使わずに同様のオブジェクトを作成する場合 JSONを試してみる！ 試しに、こんなコードを書いてみました。 <script>jtxt='{"name…
どうも！LSSです！！ 「じぇいそん」と聞いて、多くの方が真っ先に連想するのは…「クリスタルレイクの殺人鬼」じゃないかと思います。 ホッケーマスクつけたアレですね。 ところが。 プログラミング界隈で「JSON」というものがあります。 ええと…13日の金曜日とはまったく関係がありませんw JSONのJSはJavaScriptのJSですが、JavaScriptに限らず様々な言語で利用可能なデータ記述形式の事だそうです。 今までもあちこちで見かけてはきましたが、そろそろ手を出してみようかな…。 ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
【JavaScript】なんとなく…ページ中に存在する、divタグとspanタグをスクリプトで洗い出してみた
どうも！LSSです！！ はてなブログでは、記事として書いた内容の他に様々なHTML要素が使われています。 例えばブログテーマを作成する際などには、それらがどれだけ使用されていてどのように使われているかをある程度把握する必要が出てくるかと思います。 そこで、役に立つか立たないか分かりませんが、「ページ中のdivタグとspanタグの一覧」を取得し、それらにつけられたidとclassを一覧出力するスクリプトを作ってみました。 結果 コード とりあえずdivとspanだけですが 結果 ここをクリックすると取得します。結構大量に出てくるので驚かないでくださいねw // '; } gamen.innerH…
どうも！LSSです！！ 最近、「ちょっと気になってる」Webサービスがあります。 マンガノ 新しい時代のWebコミックがここから生まれるのかも…？ と、気になってはいるものの… マンガノ manga-no.com はてなブロガーなら誰しもお世話になっている「はてな」と、少年漫画誌で時代を築いた「集英社」が手を組んで開発したWebサービス「マンガノ」 まだ出来たての新しいサービスです。 新しい時代のWebコミックがここから生まれるのかも…？ はてなブログにも様々な漫画ブログがあり、Twitter上でも漫画作品を公開されている方がおられますが、素人でも投稿可能かつ作者が望めば収益化も可能！というサ…
どうも！LSSです！！ 昨日の記事、【SVG】波打つ文字（文字変形）に少し手を加えてみました。 波打つ文字、点線バージョン 線を点線にする 昨日記事をあげてから、早速使ってくださった方が！ 今回の点線は 波打つ文字、点線バージョン Little Strange Software コード []<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 200 40"><defs><path id="pt1" d="M 4,35 Q 60,5 100,25 Q 140,40 195,15"></path></defs><use…
どうも！LSSです！！SVGならこんな事も！ SVGで波打つ文字を「描いて」みる コード 半年ほど前に、さらっとやってたネタなんですけどねw SVGで波打つ文字を「描いて」みる 記事冒頭ですでにやっていますが、 あいうえおかきくけこさしすせそたちつてと って感じで、波打つ文字を表現する事ができます。 「描いて」というのは、これがCSSではなくSVGによる描画であり、「画像」扱いとなるからだったりします。 が、そのくせ、文字をテキストとして選択できてしまう、という面白味もあります^^ コード はてなブログ用に、前後に[]を付与したコード []<svg xmlns="http://www.w3.o…
どうも！LSSです！！ たまには日記w 今日は年に一度（だっけ？）の健康診断でした。 普段、時差出勤なんですが 電車の状況 で、一度職場によってから病院へ 仕事終わり！ おまけ：日記以外の話 普段、時差出勤なんですが 本来、9:00～18:00勤務ですが、このご時世で時差出勤という事で10:00～19:00というカタチになっています。 ところが、今日の健康診断。 受付が8:30～という事で、結局、普通の通勤ラッシュ時の電車に乗ることに^^; 昨日は普段よりちょっとだけ早めに寝ました。※普段が遅すぎるので、早めでも日付変わってからですw 電車の状況 そういえば、時差出勤は電車の駅にも推奨するよう…
どうも！LSSです！！ 昨日の記事、 その後も色々調べてみたんですが、どうも画像を伴おうとすると急激に難易度が上がるみたいですね。 ブログ公開時のツイートのアイキャッチ画像なら、はてなブログの機能任せでいいのですが、動的に変化する画像となると、不可能じゃないけど難しいっぽい。 あー、でもそっか。 結果の種類数が決まっていれば、その結果数だけ記事を作ればいいのかも？と安易な方向に逃げる考えも浮かんだりしますが、それは多分やらないwww とりあえずは文字だけでなんか作ってみたいですね。 あと、もっと難易度の高い方の話になりますが、ブログに飛ばなくても、ツイートのカード内で操作可能なものを作る事もで…
どうも！LSSです！！ よくWeb上で見かける、Twitterに投稿するリンク。 診断メーカーなどでよくありますね。 あれってどうやってやってるんだろう？ 難しいのかな？ と思ってましたが、調べてみると思いのほか カンタンだったようです。 コード <a href="https://twitter.com/intent/tweet?text=ちょっと実験中…&url=https://little-strange.hatenablog.com/&hashtags=ハッシュタグ&via=LSS0324" target="_blank">ツイート</a> ↑のようなリンクタグを置くだけ。 背景色をつけ…
大昔にノートに書いたゲームブックを発掘しました！＆ちょっとだけCSS
どうも！LSSです！！ 中学生の頃、ノートにゲームブックを作る趣味を覚えました。 高校生あたりまでやってたかも？ そのうち、最後に作ったものと思われるノートを発掘したので、晒してみますw 実物写真 文字が読めないですよねw CSSフィルターを使用しました 未完の大作 あとがき 実物写真 文字が読めないですよねw 実物は読めるのですが、こう鉛筆書きのノートを写真で撮ると、文字が読みづらくなってしまう事があります。 画像加工で読みやすくする、という手もありますが、CSSでもっと手軽に改善する方法を見つけました！ ちょっとだけマシになったのがこちら！↓（画像ファイルは同じものです） CSSフィルター…
【JavaScript超入門番外編】乱数の活用方法3例【プログラミング初心者向け】
どうも！LSSです！！ 今回は、「乱数の活用方法」について。 記事タイトルに「プログラミング初心者向け」と書きましたが、乱数を扱ったプログラムを書いた事のある方には「言われんでも分かってるわい！」と言われそうな内容となっておりますw 「乱数を返す関数があるのは分かったけど、それを利用するのにどう手を加えたらいいの？」と考えている方向けの記事となります。 なお、JavaScriptの場合について書いていますが、考え方自体は他のプログラム言語にも応用できます！ 今回使用する2つの関数について Math.random() Math.floor(引数) 1～6のいずれかの整数をランダムに返す 説明 1…
【時事ネタ】インターネットエクスプローラー、終了のお知らせ（1年ちょい先の話）
どうも！LSSです！！ 今回は珍しく時事ネタです。 MicrosoftがIEのサポート終了を発表 開発はかなり前から止まってました 諸行無常の響きあり、盛者必衰の理をあらはす MicrosoftがIEのサポート終了を発表 ja.wikipedia.org ↑既にWikiにも反映されていますが、とうとうというか、ようやくというか、MicrosoftがIEのサポート終了を発表しましたね！ 2022年6月15日（日本時間では16日）にサポート終了との事。 Windowsに標準搭載されているブラウザで、利用者も多かったですね。（今なお使用されている方もおられると思いますが） やがてGoogleChro…
ファミコン探偵倶楽部 スイッチ版 うしろに立つ少女 クリアしました！【ネタバレ「なるべく」自重中】
どうも！LSSです！！ 5/14に発売された、スイッチ版「ファミコン探偵倶楽部」。 「消えた後継者」と「うしろに立つ少女」のセットでしたが、「消えた後継者」を5/16に、「うしろに立つ少女」を昨日5/18にクリアしました^^ うしろに立つ少女は2度目のリメイク 最高のリメイク！ 声優さんの演技がすご！ シナリオについて ちょっと残念なところ うしろに立つ少女は2度目のリメイク 両作が世に出たのは、最初はファミコンディスクシステム用のソフトとしてでした。 任天堂がディスクシステム用ソフトとして発売したアドベンチャーゲーム（←テキスト主体でコマンドを選択しながらストーリーを進めるゲームジャンル）は…
// =255){flg=true;} }while(!flg); txt=''; for(i=0;i'+cnt[i]+''+(i%10==9?'':''); } txt+='最小値は '+Math.min.apply(null,cnt); gamen.innerHTML=txt; } // ]]> どうも！LSSです！！ 乱数のテスト もし乱数が偏っていたら？ テスト結果 今回のテストに使用したコード あとがき 乱数のテスト この記事の冒頭にある「テスト」ボタンを押すと、その下に10×10、100個のボックスが出てきます。 中には数字が入っていて、赤っぽい色になっています。 これは、以下の手…
今週のお題「やる気が出ない」 どうも！LSSです！！ ただいま、23時40分。 さっきまで、JavaScriptの乱数についての実験をしていました。 その昔、JavaScriptでゲームを作っていた時に、なんとなく乱数に偏りがあるような？気がした事があったんですね。 「気がした」程度の話で、実験して確かめてみよう、には至らずじまいでした。 そこで、「実際に実験してみよう。そして昔はともかく、今のJavaScriptの乱数に偏りがあるか確かめるコードを書いてみよう。」と思い立ち、作っていました。 …で、一応、それっぽいものは作れたのですが… これ、記事としてあげてもあまりにもわけわかめすぎやしな…
ファミコン探偵倶楽部 スイッチ版 消えた後継者 クリアしました！【ネタバレ自重中】
どうも！LSSです！！ 発売日5/14に無事、家に配達された、スイッチ版ファミコン探偵倶楽部。 「消えた後継者」と「うしろに立つ少女」のセットなんですが、そのうち「消えた後継者」のほうをクリアしました！ そのために買ったスイッチでした で、消えた後継者のほうからプレイしてました クリア後の感想（ネタバレ自重中） クリアはしたけど まだ「うしろに立つ少女」が残っています！ そのために買ったスイッチでした 幸いにして、ファミコン探偵倶楽部発売を目前にして、Liteじゃないほうのスイッチを入手していました^^ 結局、NintendoSwitch（Liteじゃないほう）買っちゃいました！実に悩ましい選…
【JavaScript】簡易テキストファイル書き換えスクリプト
→ // どうも！LSSです！！ 今回は、使いどころのよく分からないツールを作ってみましたw 使い方 例えば… コード あとがき 使い方 テキストファイルの中の特定の文字を、違う文字に変換するツールです。 まず「変換元の文字列」「変換後の文字列」を入力します。 次に、「ファイルを選択」ボタンを押し、お手元の端末内にある対象のテキストファイル（HTMLファイルやSVGファイルやCSVファイルも選択可能です）を選ぶと、即座にそのテキストファイル内に「変換元の文字列」と同じものがあったら全て「変換後の文字列」の内容に書き換えられます！ なお、出力後のファイル名は、元のファイル名の末尾に「_r」が付与…
どうも！LSSです！！ 今日、TVで「タイタニック」やってたそうですね（TV見ない人）。 レオナルド・ディカプリオ主演のタイタニックはかつて映画館で見ました！ が…良い映画だったとは思うのですが、その後にそれのパロディ映画を2作みてしまい、そのあまりのどぎつさに、元ネタの映画の記憶がほぼ上書きされてしまっていますw TwitterでTV放映されてると見たところからそんな話を思い出したので、今回はその「パロディ映画2作」について書いてみます。 …という記事の性質上、TV放映された本家「タイタニック」の感動の余韻にもうちょっと浸っていたい、という方には今回の記事はオススメできません^^; 親指タイ…
どうも！LSSです！！ いよいよ、明日に迫りましたね！ ファミコン探偵倶楽部発売日！！ ダウンロード購入の人はあと数分でプレイできる…んでしょうか？w 自分はパッケージ版をポチったのですが、今日Amazonから「発送しました」メールが届き、「いよいよだな！」と実感が湧いてきましたw 「消えた後継者」と「うしろに立つ少女」の2本セット。 どっちから遊ぼうか、と先日から考えてたりもしました。 元々の発売順でいうと「消えた後継者」が第一作目、「うしろに立つ少女」が2作目となりますが、続編ではなく「うしろに立つ少女」は「消えた後継者」の前日譚となります。 （消えた後継者は話の終盤にとんでもない事実が明…
【JavaScript】カウントダウンタイマーを作ってみました【Webアプリ】
JavaScriptで「カウントダウンタイマー」を作ってみました。 分・秒を設定して、「START」を押すとカウント開始し、指定時間経過後に音が鳴ります。 「STOP」ボタンで カウントダウンや音を停止できます。
結局、NintendoSwitch（Liteじゃないほう）買っちゃいました！実に悩ましい選択でしたが…
どうも！LSSです！！ とうとう…スイッチ本体をゲットしました！！ ゲットはしましたが…手放しで喜んでいいのかどうか、少しビミョーなところも含みますw 昨日までのあらすじ 本日、有給休暇 センタープラザ北館中央付近 まず1軒め。 2軒目。 Sofmap。 結局、買ったのは… 帰宅後、設定して触ってみました 昨日までのあらすじ 2020年内にファミコン探偵倶楽部がリメイク発売される！という情報が出たのが2019年9月。 これまで魅力的なソフトがばんばん出てもスルーしてきたNintendoSwitchですが、今度ばかりは買わずにいられない！w 発売延期からの、2021年5月14日に発売が決定し、任…
とうとう…発売日が今週に迫りました！ファミコン探偵倶楽部スイッチ版！！
どうも！LSSです！！ いやぁ…とうとう、今週発売ですね！ 当初「2020年内発売！」と言っていたのが延期になっていた、「ファミコン探偵倶楽部」のスイッチリメイク版！！ 予約購入でポチっときました！ 好きすぎてもう… 楽しみにされている方は結構多そうです！ なのに…実は… 予約購入でポチっときました！ Amazon ファミコン探偵倶楽部 消えた後継者・うしろに立つ少女 COLLECTOR'S EDITION -Switch (【Amazon.co.jp限定】オリジナルロゴ入りブックカバー(調査ファイル同等A4サイズ) 同梱) ゲーム 第一作である「消えた後継者」、第二作「うしろに立つ少…
線の色 背景色 点の位置 線の太さ サイズ こんな模様になります^^ // (Math.floor(a/2)%2)*20; zhmj=a=>(a>3?ichi[a%2+2]+','+zhmj0(a):zhmj0(a)+','+ichi[a%2]); icr.addEventListener('input',gw,false); bcr.addEventListener('input',gw,false); btn.addEventListener('click',sfl,false); tbtn.addEventListener('click',trd,false); t0.addEventL…
どうも！LSSです！！ を、自動生成するようなものを作ろうと…していたのですが、途中でだいぶ手間取ってしまいました^^; 作りかけですが、今こんな感じ、という中間報告です。 作りかけ スクリプトコード 作りかけ 線の色 背景色 // (a>3?ichi[a%4]+','+((Math.floor(a/2)%2)*20):((Math.floor(a/2)%2)*20)+','+ichi[a%4]); icr.addEventListener('input',gw,false); bcr.addEventListener('input',gw,false); btn.addEventListen…
どうも！LSSです！！ かなり前の過去記事で、 というのがあります。 Androidアプリを作っていた頃の記事ですね。 タイマーアプリというのは、ありふれていながらも実用性が広くありそうです。 が、ブログの方向性がAndroidから離れてWebネタばかりになって久しくw じゃあ「Webアプリとしてタイマーは作れるのか？」というと… 「カウントダウンもストップウォッチも作れる、けど、カウントダウン終了時に音で通知するのに音声ファイルを用意したりする必要がありそう」 だったんですね。 ところが、最近になって 音声ファイルを用意しなくても、JavaScriptから音を鳴らせる事を知りました！ じゃあ…
【CSS+SVG】オリジナルなパターン背景の作り方を考えてみました【実験】
どうも！LSSです！！ 【CSS+SVG】ヘリンボーン模様の背景 とか、 【CSS+SVG】インラインSVGを背景画像に指定 とかを作りながら、漠然と考えていたんですが、「パターン画像を繰り返して背景として繋がるようにするには…画像の上辺の点と、同じ位置に当たる下辺に点、左辺の点と同じ位置に当たる右辺に点、それらが繋がるように線を引いて模様を作れば、どんな繋げ方でも繰り返し模様になるんじゃないか？」と。（この文章で伝わる自信は あまりありませんが^^;;;。） と、いう事で、今回はその思いつきを試してみる事にしました！ まず、四角があって、その辺にいくつか点があります テキトーに点と点を線で繋…
【まいくらにっき】ゴーゴーサウス！ひたすら南に旅してみよう【後編】
今週のお題「おうち時間2021」 どうも！LSSです！！ 【まいくらにっき】ゴーゴーサウス！ひたすら南に旅してみよう【前編】 に続き、マインクラフト内で旅をした話、後編です！ 奇妙な地形 氷山＆ジャングル！ 謎の遺構 パンダ！！ また雨が降ってきました、からの… 10000ブロックの旅の最後に 奇妙な地形 奥に見える不思議な地形 前編の最後の渓谷は、回り込んでやり過ごしました。 そしてちょっと進んだところで、上記のような奇妙な地形を発見！ …マイクラでは割とよくありますw 完全に宙に浮かんでいる島を見つけると、「ラピュタは本当にあったんだ！」って言いたくなったりしますね。 盛り上がった湿地帯 …
【まいくらにっき】ゴーゴーサウス！ひたすら南に旅してみよう【前編】
今週のお題「おうち時間2021」 どうも！LSSです！！ 今年のGW、だいたいステイホームしています。 そもそも引きこもりには慣れているんですが、気分転換に出かけたくなる時もありますね。 そこで、今回は、「ゲーム内で疑似的に旅行しよう！」と思い立ち、「マインクラフトで新規にワールド作成して、一定方向にひたすら進む」という事をやってみました！ マイクラは自動的に地形や建造物が生成され、さまざまな風景を楽しむ事ができます。 中には人工的でレアな建造物が生成されているのに出会ったりもするので、そのあたりを楽しみにしつつ、ひたすら南に進んでいきます！ 連休は旅にでようかマイクラで— LSS (@LSS…
幅: 高さ: // ax=xmax ay=ymax?0:parseInt(mztxt.substr(ax+ay*xmax,1)); mzw=(ax,ay)=>{mztxt=mztxt.substr(0,ax+ay*xmax)+'0'+mztxt.substr(ax+ay*xmax+1);} makemaze(); rgx.addEventListener('input',makemaze,false); rgy.addEventListener('input',makemaze,false); function makemaze(){ xmax=parseInt(rgx.value)*2…
幅: 高さ: // '; for(j=0;j';} if(i==1 && j==1){txt+='';} if(i==xmax-2 && j==ymax-2){txt+='';} }} txt+=''; gamen.innerHTML=txt; } function dig(xd,yd){ vt=Math.floor(Math.random()*4); vy=Math.floor( (vt-1)/2); vx=(vt*2-3)-vy*3; if(mz(xd+vx*2,yd+vy*2)==1){ mzw(xd+vx*2,yd+vy*2); mzw(xd+vx,yd+vy); xd+=vx*2;y…
【論理パズルの回答】Twitterにあげた問題、その考え方と回答
どうも！LSSです！！ 連休に入りましたね^^ 昨日さらっと出題しましたが、すっきりするべく、早速解答記事をあげておきますw こんな問題でした Hの発言から解る事 するとGは… 結論 こんな問題でした #論理パズルG，H，Iの3人がいた。この3人はそれぞれ、「決して嘘をつかない正直者」か「決して本当の事を言わない嘘つき」のどちらかです。G「この3人の中に正直者はいます」H「この3人の中に嘘つきがいます」Iの発言は聞くまでもないですね。誰が正直者で、誰が嘘つき？— LSS (@LSS0324) 2021年4月30日 Hの発言から解る事 Gはいったん置いといて、まずHの発言から考えてみます。 Hは…
「ブログリーダー」を活用して、LSSさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
