SVG

どうも！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で「とりあえず動く様子」を見られるようにしてみました！ …まず自分が見てみたかったからですｗ コード（スクリプト部分のみ） <script>// <…

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

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

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

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

どうも！LSSです！！ 今回は、「漫画のような雲型のフキダシをSVGで描いてみたけど下手すぎた」話と、「雲型のフキダシSVGを画像borderに使用してみたけど…」という話の２本立てでお送りします！！ SVGで描いてみたフキダシ かっこいいフキダシとは 以下、未解決案件^^; SVGで描いてみたフキダシ なんとか頑張って描いてみました（例によってコード手打ち） 中の四角は後で消しますが、文字を入れるスペースを確保するための目安です。 コード <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 20 12"> <re…

どうも！LSSです！！ 昨日の記事中で、 SVGはベクター形式の画像ですが、例えていえば「絵描き歌」みたいなもので、 「まーるかいてちょん、まーるかいてちょん」みたいな「描き方の指示」が書かれているというのが基本である以上、写真画像などを表示するのは不向きである、というのは常に ついて回ります。 インラインSVGについて、ぼーっと考えてみた - Little Strange Software てな事を書きました。 「絵描き歌」みないなもの、というのは我ながら大胆な比喩だったな、と思いつつ、要は「描き方の手順を順に文（テキスト）で表記したもの」という事が言いたかったんですね。 というわけで、今回…

前回、インストールまでは終わった。 次のステップ Start with Vue GitHubからサンプルダウンロード Download Required Tools Install Ionic Tooling Create an App PWA Elements Run the App shigeo-t.hatenablog.com shigeo-t.hatenablog.com 次のステップ 公式ドキュメントにしたがって進めてきた。次は「次のステップ」である。 ionicframework.com 今回はVueを選んだのだが、Vueだけ英語ドキュメントである。 Start with Vue …

sbt 1.4から標準にdependency graphが取り込まれた https://github.com/sbt/sbt/pull/5883 https://github.com/sbt/sbt/pull/5880 標準で(拡張子的にはhtmlだが)svgで出力するやつがある https://github.com/sbt/sbt/blob/7969a155b0978a925d3bd4aeefcb2ace163835db/main/src/main/resources/graph.html https://github.com/sbt/sbt/blob/7969a155b0978a925d3…

◀︎ 前へ｜次へ ▶︎️ W3Cで仕様が定義され，矩形や円，直線，文字列などの図形オブジェクトをXML形式で記述し，Webページでの図形描画にも使うことができる画像フォーマットはどれか。 OpenGL PNG SVG TIFF // 解答 ウ 解説 OpenGL作成中 PNG作成中 SVG作成中 TIFF作成中 // 参考情報 分野・分類 分野 テクノロジ系 大分類 技術要素 中分類 マルチメディア 小分類 マルチメディア技術 出題歴 AP 平成29年度秋期 問25

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。 Vertical Timeline codyhouse.co さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。github.com <div class="cd-timeline js-cd-timeline"> <div class="container max-width-lg cd-timeline__co…

こんにちは、LayerXでデザインを担当しています森です。 今回は、爆速と呼ばれるDX事業部での開発の様子をお話ししたいと思います。 デザインをしない 以前に @yyoshiki41 がお話ししたように、開発チームは横断的で、エンジニアはフロントエンド、バックエンドを問わず、機能単位で担当し開発しています。その中で私も、フロントエンド、主に表示まわりの開発に関わっています。 tech.layerx.co.jp 事業責任者の @mosa_siru が、「デザインプロセスを挟まない開発」と呼んでいますが、仕様が相談された後、詳細なワイヤーや画面デザインを待つことなく開発が進んでいきます。 機能が実…

今回は、茅ヶ崎駅北口の駅を背にして左側の小道に入ってすぐ（派出所の隣かな）にあるカレーハウス ブータン さんに初潜入です。 お店は、雑居ビルの1階にあるのですが、陰に隠れるように入り口があり、通りからは看板やメニューが見えるのみで入口が分かりづらい。 お店に入るとカウンターのみの長細い感じで、入って左側に券売機があります。 今回、私は、チキンカツカレー（560円）＋野菜トッピング（100円）＝合計660円を注文しました。 腰の曲がった年配の料理長が1人で切り盛りされていましたが、熟練の腕でてきぱきとこなしていましたが、チキンカツが薄めなんですが、この薄さがいいのかサックサクで柔らかくて、食べや…

前回は準備で終わったIonic Frameworkの環境構築。 CLIのインストール アプリケーションの起動 Packeges & CDN 次 shigeo-t.hatenablog.com CLIのインストール ドキュメントの手順にしたがってインストールしてみる。 ~ % npm install -g @ionic/cli /Users/shigeo-t/.nodebrew/node/v14.16.1/bin/ionic -> /Users/shigeo-t/.nodebrew/node/v14.16.1/lib/node_modules/@ionic/cli/bin/ionic + @io…

循環交代勤務となり平日がお休みなったので、空いてるかなと思って江ノ島にランチで足を延ばしてみました。 江ノ島の とびっちょさんへ 行ってきました。 現在、しらす漁が解禁となっており、この日はシケでもないから生しらす頂けるかなと思って行ってきました。ところが・・・平日でもそこそこ混んでました（汗 受付すると１５組待ち・・・３０分くらいかなと・・・ まあ、適当に待ってればと思い、トイレに行ったり、お土産を見てお店前に行くと人が減っている。混んでいたので他に行った人多くて、番号を確認するとどんどん進み、結局１５分くらいで案内されて、しかも２人で４人席。ゆったりできた。 生しらすは、とびっちょ丼しか食…

こんにちは。SRE の @int128 です。 Quipper では GitHub Actions Self-hosted Runner を一部のジョブで導入しています。本稿ではその目的と具体例を紹介します。 背景と解決したい課題 Quipper では以下の CI サービスを用途に合わせて利用しています。 CircleCI（テストやデプロイなど） GitHub Actions（テストやデプロイなど） AWS CodeBuild（主に Terraform など AWS リソースにアクセスする場合） Google Cloud Build（主に Google Cloud のリソースにアクセスする場合…

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報が更新されます。クライアントにHTMLの知識が無い場合でも、前回の授業で紹介したGoogleカレンダーやSNSのプラグインを上手く使って、更新頻度の高いサイト作りを目指しましょう。 Twitter Twitterのタイムラインを埋め込みます。タイムラインにも数種類ありますが、今回は一番シンプルな物を埋め込んでみましょう。Twi…

TwitterのOGP画像が表示されないときにチェックすることについて、備忘録がてら書いていく TwitterのOGP画像は絶対パスで指定すること Habanero Beeの開発をしていてTwitterのOGP画像が表示されていないことに気づいた。 なぜかと思って調査したところ、結論から言うと、TwitterのOGP画像は絶対パスで指定しないと表示されないのだった。 (以前にも同じケースで詰まったことがあったので、途中で、はたと気がついた) 修正したときのissueはこちら github.com 余談: Habanero Beeのversion 0.8.0をリリースしました ちなみにHaban…