…image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewbox="0 0 20 10" stroke="rgb(210,255,255)"><path d="M 1,10 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,…

…id="svge" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 300 450"><path d="M 0,0 300,0 300,450 0,450 Z" stroke="none" stroke-width="0" fill="black"></path><imagexlink:href="画像ファイルURL" x="-15" y="-20" width="170"></image><path …

…id="svge" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 100 100" style="background-color: lightblue;"> <text x="0" y="95" style="font-size: 100px;">じ</text> <text x="0" y="20" style="font-size: 20px;" id="j0" draggable="true"…

どうも！LSSです！！ 昨日の記事、 スマホでは動作しませんでしたが、今後これを使ってブラウザゲームとか作る上ではやはり、スマホでも遊べるようにしたい！！ というところで、スマホ対応を試みてみました！ マウスドラッグかスマホスワイプで移動する「もぐら」 コード 思ったより手間取りました^^; 難関その１ スマホにはマルチタッチがある事 難関その２ スワイプ操作は画面スクロールになる あとがき マウスドラッグかスマホスワイプで移動する「もぐら」 // コード <div id="…

どうも！LSSです！！ JavaScriptに「マウスドラッグイベント」というものがあります。 Webページ内の要素に対して、マウスドラッグを行おうとした時に発生するイベントで、これを仕込んでおくと ドラッグが開始された時 ドラッグが終了した時 ドラッグ中 などに、指定の関数を動作させる事ができます。 例えば「ドラッグが終了した時」に「要素の位置指定を、ドラッグ終了した地点に変更」するコードを書いた関数を用意しておけば、「Webページ内で自由にユーザー（読者）が配置変更できる…

…このように<svg xmlns="http://www.w3.org/2000/svg" style="height: 1em;" viewbox="0 0 20 20"><path d="M 0,20 5,0 5,10 10,0 10,10 15,0 15,10 19,0 19,20 z" stroke="black" fill="lightgreen"></path></svg>絵文字っぽく使う事もできますね^^ はてなブログの「HTML編集に貼り付ける」用に前後に[]を…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400"> <rect x="0" y="0" width="300" height="400" fill="lightblue"></rect> <circle id="sun" cx="230" cy="70" r="40" fill="red"></circle> <rect x="0" y="30…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100"><path d="M 5,100 Q 5,20 50,20 Q 95,20 95,100" stroke="black" stroke-width="2" fill="brown"></path><path d="M 20,55 Q 30,40 45,50" stroke="black" str…

どうも！LSSです！！ 今回も小ネタです。 とりあえず「SVGで紗綾型を描く」事には成功しました。 で、もうひとつ興味を持っていた事があって… 「とりあえず緑色と赤色を使っておけばクリスマスっぽくなるの？」 という疑問。 これを、あえて和風の柄である「紗綾型」でやってみました！ …うーん。 どうでしょうか？ クリスマスっぽい？和柄っぽい？ 自分の目には…そのどちらでもなくなってしまった気がしますｗｗｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^

どうも！LSSです！！ 今回は思いつきで、ちょっとした小ネタ。 「JavaScriptからSVGタグを書き出して、約300ピクセルの四角形を1～10ピクセルランダムにずらした頂点で描いてみる」というのをやってみます。 ちょっと歪んだ四角形 さじさんの記事から ちょっと歪んだ四角形 再描画 // '; gamen.innerHTML=txt+''+txt.replace(//g,'>')+''; window.getSelection().removeAllRanges(); …

…<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 20"> <path id="sygt" d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 14,7 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -14,-7 -2,1 2,1 -2,1 -2,-1 …

…<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 40 40"><path d="M 1,8 l 14,-7 2,1 -2,1 2,1 -2,1 -2,-1 -2,1 16,8 2,-1 -2,-1 2,-1 2,1 2,-1 2,1 -14,7 -2,-1 2,-1 -2,-1 2,-1 2,1 2,-1 -16,-8 -2,1 2,1 -2,1 -2,-1 -2,1 -2,-1 …

どうも！LSSです！！ 「時代劇が好きだった」って話をたまに書いていますが、その中でも「大岡越前」や「遠山の金さん」に共通して出てくる、ある模様が気になっていました。 そんな以前から気になっていたにも関わらず、今日になってやっとググって答えを見つけましたｗ 奉行所、お白洲の場面でのフスマの模様 紗綾形、っていうらしいです 同じ形のループである事から 奉行所、お白洲の場面でのフスマの模様 ↑久々に、はてなブログの「絵を描く」機能を使ってみました。 かなり下手ですが「なんかこんな…

…p>[] <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"> <defs> <radialgradient id="rg" cx="75%" cy="20%" r="20%"> <stop offset="30%" stop-color="white"></stop> <stop offset="100%" stop-color="lightblue"></stop> </radialgradie…

…<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"> <defs> <radialgradient id="rg" cx="75%" cy="20%" r="20%"> <stop offset="30%" stop-color="white"></stop> <stop offset="100%" stop-color="lightblue"></stop> </radialgradie…

…<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewbox="0 0 300 200" style="border: 1px solid black;"><text x="15" y="40">魔法使いの家</text><circle cx="50" cy="50" r="5"></circle> <text x="180" y="90">二人の生家跡地</text><circle…

…txt='<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400" id="gamen" style="border: 1px solid black;"><path d="M 250 50 Q '+ev.offsetX+' '+ev.offsetY+' 50 350" stroke="black" stroke-width="3" fill="none"></…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400"><rect x="0" y="0" width="300" height="400" fill="lightblue"></rect> <circle cx="230" cy="70" r="40" fill="red"></circle><rect x="0" y="300" width="3…

どうも！LSSです！！ JavaScriptで出来る事、を色々調べていくうちに「これは凄い！」とびっくりするようなものを見つけました（結構 前に、ですがｗ） ちゃんと自分で咀嚼し、飲み込んでから、解説記事など書きたいと思っていますが、いったん「JavaScriptはこんな事もできる！！」というのをシェアしたいと思います^^ ダウンロードリンク これだけでは何が凄いのか分からないですよね^^; 何が凄いか、って 汎用性 ダウンロードリンク // \n\n\n\n'; blob …

…コード例 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400"><rect x="0" y="0" width="300" height="400" fill="lightblue"></rect> <circle cx="230" cy="70" r="40" fill="red"></circle><rect x="0" y="300" width="3…

… コード <svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400"><rect x="0" y="0" width="300" height="400" fill="lightblue"></rect> <circle cx="230" cy="70" r="40" fill="red"></circle><rect x="0" y="300" width="3…

…clk」という関数をxml側で割り当てています。 で、「今、画面に表示されているのはどのシーン（story_textのいくつめの要素）か」を管理するInt型（整数型）の変数「story_i」を story_i++ で、まず+1しています。 次の if は「シーンが最後まで進んだら（story_iがstory_textの要素数を超えたら）、話を最初に戻す（story_iを0にする）」 という処理を行っています。 そして、 tv0.text=story_text[story_i]…

…ndex 画面関連 xml shape Animation パーツ関連 TextView SeekBar NumberPicker 音関連 Ringtone MediaPlayer SoundPool 時間関連 calender handler データ保管関連 SharedPreferences SQLite その他 AndroidManifest.xml クラス Vibrator GooglePlay Intent ImageAsset .jks 購入書籍 このインデックス…

…ドを書くというよりはxmlレイアウトを試行錯誤している状態です^^;;; たどり着いた結論（こんな風にしたかったのです） LinearLayoutの入れ子とlayout_weightの組み合わせは、AndroidStudioに怒られます！ 格子状のレイアウトならTableLayoutでしょ！ この時点での画面の雰囲気がこんな感じ しっくりは来ないけど、こういうモノと思うしか…？ たどり着いた結論（こんな風にしたかったのです） アプリ起動時の画面。 ここから、使うタイマーを選ぶ…

…を取られたのは、ほぼxmlでした。 明日もやるよー！年内にどこまで進められるか？？ 案は色々練ってましたが 第二弾はタイマーアプリ ３分、５分、時間設定可能タイマー、２種類の時間を交互にカウントダウンするタイマー、ストップウォッチ、と使い分けできる 画像を極力使わず、見た目はxmlで凝ってみる 配色ごちゃごちゃするよりモノトーンで作るとシブいかも？ などなど案を温めてましたが、「とりあえず作り始めなきゃね！」と腰を上げたのです^^ 成果 ※画面は開発中のものです。（←って言っ…

…を ↑のように変えるxmlファイルを作りました。 今回は、「普段凸状態で、押されると凹状態になるボタンを表現するxml」を作ります！ まずは恒例の（？）xmlファイル作成から！ pushable.xmlの内容を編集するよ～ ここでちょっと説明 という事で、押されてる時と押されてない時のxmlを pushable.xmlは、こんなコードになります。 以上でいけてるハズ。動作テストします。 って、ええええ！？ まずは恒例の（？）xmlファイル作成から！ 画面左の「app」の中の「…

…dManifest.xmlに数行コピペするだけで共有候補に出てきた！」事であっさりと目的の大半は達成してしまいましたｗ とはいえ、「共有候補に出てくるだけで何もしてくれないアプリ」だとクソ詐欺アプリなので、今回はしっかりと「送られてきたデータを受け取って、自作アプリの画面上にとりあえず表示」するところまでやってみます！ こういうのを作ります！ まず、xmlを変更！ 普通のIntentデータの受け取り方でOKでした^^ URLとタイトルは取り出せたけどさ、 あとは更新日時を取得…

…dManifest.xmlの内容 やってみた手順 「共有」にアプリを載せたいだけだったら 結果の画面写真と、AndroidManifest.xmlの内容 Chromeのメニューから 共有を開くとそこにいます。 タップすると自作アプリ起動！ AndroidManifest.xml（intent-filter部分をコピペしただけ！） <?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://sche…

…までいきました！ （xmlしか触ってないですねｗ） 触ってみた感想ですが、 ソフトウェアキーボードがコードを書きやすいように用意されてます^^ コンパイル速度も意外とあまり待たされないで実行できます！ ↑のように背景をdrawableから引っ張ってきた際、プレビューでは確認できない？？ ALL英語（AndroidStudioもそうですがｗ） 非常に残念な事に、言語はJava。Kotlinには未対応。 補完も一応してくれますが、AndroidStudioほどではない…？ スマホ…

…作ります 前回作ったxmlを元に改変します！ まず、xmlをコピペします！ layer2.xmlを編集します！めっちゃ簡単な方法を思いつきました！ 表示テスト、いってみよー！！ 今回やった事って、 今回はこういうものを作ります layer2.xml <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item…