たかはしのんき

以前(いぜん)はパソコンを作(つく)る会社(かいしゃ)に勤(つと)め、今(いま)は貸(…

たかはしのんき

以前(いぜん)はパソコンを作(つく)る会社(かいしゃ)に勤(つと)め、今(いま)は貸(か)しアパートの会社(かいしゃ)を経営(けいえい)中(ちゅう)。還暦(かんれき)を過(す)ぎ、残(のこ)りの人生(じんせい)は若(わか)い人(ひと)たちのために使(つか)おうと思(おも)います。

トラブルシューティング日誌(にっし) - Chrome(クロム)の検索(けんさく)エンジンがYahoo!(ヤフー)になる件(けん)

いつの間にかパソコンのブラウザー Chrome のアドレスバーにヤフーのアイコンが表示され、Google 検索ではなく、Yahoo! 検索になっていたので、設定を確認してみました。 本来なら「Google」となっているはずのところが「セキュア サーチ」になっていました。通知でセキュアなサーチにするかと訊かれて設定を変更してしまったかもしれないと思いました。気持ち悪いので元に戻しました。

たかはしのんき

    • 模様(もよう)をSVG(エスブイジー)にする

      青海波という模様を SVG にしてみました。 このような繰り返しの模様を SVG で作るのは結構大変です。 一つの波だけならこんな感じです。 <svg id="Pattern" xmlns="http://www.w3.org/2000/svg" width="640" height="400"> <rect x="0" y="0" width="640" height="400" style="fill:#fff"></rect> <path d="M0,

      たかはしのんき

      • 12星座(せいざ)

        昨年の5月から黄道12星座の SVG を作り始め、3月で全て完成しました。 いずれも SVG を扱うライブラリ SVG.js（おうし座のみ）または Snap.svg を利用した JavaScript プログラムにより星を SVG として出力しています。以下のそれぞれの絵を実行結果のページへのリンクしています。 リンク先の「生成されたコード」に SVG のコードが表示されています。「生成されたコード」の例としていて座のコードを以下に示します。 <svg id="Zodia

        たかはしのんき

        • 引用符(いんようふ)

          ここ最近、毎月星座のプログラムを書いています。今月はさそり座です。 Snap.svg というライブラリでさそりの SVG に赤経、赤緯の線や星などを付け加えています。 完成した SVG のコードを絵の下に表示しているのですが、Scorpius と ♏ の表示部分が、 <text x="506" y="272" fill="#ffffff" style="font-family: 'Curlz MT'; font-size: 32px;">Scorpius</text><

          たかはしのんき

        トラブルシューティング日誌(にっし) - Chrome(クロム)の検索(けんさく)エンジンがYahoo!(ヤフー)になる件(けん)

        たかはしのんき

          polygon(ポリゴン)で卵(たまご)

          SVG の polygon 要素を使って卵の絵を描きました。polygon とは多角形のことです。 この大きさだと卵に見えますが、実際は64角形です。polygon のコードは以下の通りです。 <polygon points="235.0,200.0 235.4,204.5 236.6,209.1 238.7,213.8 241.5,218.6 245.0,223.4 249.3,228.1 254.3,232.6 259.9,237.0 266.1,241.1 272.

          たかはしのんき

          polygon(ポリゴン)で卵(たまご)

          たかはしのんき

          GIMP(ギンプ)でSVG(エスブイジー)

          『GIMPパーフェクトガイド』という本を購入しました。GIMPでベクトル画像を編集しSVGとして保存できることが、この本を読んで分かりました。 今日はGIMPを使ってSVGを作ってみたいと思います。 GIMPとは GIMPはラスター画像を編集する無料ソフトウェアです。ラスター画像だけでなく、パスを作成することができます。 直線をつなげる パスツールで画面上を連続してクリックすると直線をつなげていくことができます。 パスを閉じるには[Ctrl]キーを押しながら始点をク

          たかはしのんき

          GIMP(ギンプ)でSVG(エスブイジー)

          たかはしのんき

          角丸三角(かどまるさんかく)

          今月も星座の絵をSVGで作りました。今月はしし座です。 いつものように Small Basic から持ってきた SVG を Illustrator でちょこっと直しました。今回直したのは目と鼻ですが、鼻について解説します。 元々三角形だった鼻を右側のレイヤーで選択し、左側のツールで「ダイレクト選択」を選ぶと、三角形のそれぞれの角にちいさな円が現れます。この円をドラッグすると角丸三角形に変更することができます。 ただし SVG として保存するとパスになってしまうのでその後

          たかはしのんき

          角丸三角(かどまるさんかく)

          たかはしのんき

          Illustrator(イラレ)で表示(ひょうじ)できないSVG(エスブイジー)

          Adobe Illustrator は SVG ファイルを読み込んで編集し SVG ファイルとして出力することができます。 ところが、私の作った Shapes という Small Basic のプログラムで出力した SVG ファイル（以下のリスト）を Illustrator に読み込んでも表示されません。 <svg width="598" height="428"> <defs> <g id="g1"> <ellipse cx="123" cy="134

          たかはしのんき

          Illustrator(イラレ)で表示(ひょうじ)できないSVG(エスブイジー)

          たかはしのんき

          Illustrator(イラレ)のシェイプ形成(けいせい)

          今回作成したのはふたご座の絵です。 この絵はもともとは Small Basic のプログラムとして作成したものです。 この絵を Shapes というツールを使って SVG に変換し、Adobe Illustrator で描き直しました。 Illustrator に「シェイプ形成」というツールがあり、ふたごの髪の毛はこのツールを使って楕円をつなぎました。 このプログラムに関する詳細はブログ「JavaScript (59) Snap.svgライブラリを使用」をご覧ください

          たかはしのんき

          Illustrator(イラレ)のシェイプ形成(けいせい)

          たかはしのんき

          星座(せいざ)の絵(え)

          星座の絵をSVGで描いてみました。 以前作成した Small Basic のプログラムを JavaScript に置き換えたものです。 詳しい内容についてはブログ「JavaScript (58) おうし座」をご覧ください。

          たかはしのんき

          星座(せいざ)の絵(え)

          たかはしのんき

          魚(さかな)を変(か)えてみた

          水族館の魚を変えてみることにしました。 上の絵は娘が小学校の頃、イベントの魚釣り用に使ったものです。 この中の魚の骨をSVGにしてみました。SVGはちょっと長いですがこんな感じです。 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="988"

          たかはしのんき

          魚(さかな)を変(か)えてみた

          たかはしのんき

          水族館(すいぞくかん)

          水族館のアニメーションを SVG で作ってみました。 JavaScript のプログラムで三角関数（cos）を使って魚の幅を縮小させています。 /** * moveFish function * @since 0.1 */const moveFish = function() { for (i = 0; i < max; i++) { a[i] += da[i]; if (a[i] > 2 * Math.PI) {

          たかはしのんき

          水族館(すいぞくかん)

          たかはしのんき

          「の」の字(じ)を描(か)いてみた

          SVGでひらがなの「の」を表現してみました。 前回のロケットの形と同様、path 要素を使っています。 SVG.js で生成した「の」の字のコードは以下のようになりました。M は移動 (move)、L は直線 (line)、A は円弧 (arc)を表しています。 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sv

          たかはしのんき

          「の」の字(じ)を描(か)いてみた

          たかはしのんき

          path(パス)要素(ようそ)使(つか)ってみた

          前回のロケットをいろいろ改良してみました。改良点は以下の通りです。 ロケット頭部を円弧に変更しました。 ロケットの高さを変更できるようにしました。 ロケットを左に90°回転するようにしました。 横方向への移動を加えました。 // <path d="M22,96 // A595,204 0 0 1 92,0 // A595,204 0 0 1 162,96 // V239 // H22 // V96

          たかはしのんき

          path(パス)要素(ようそ)使(つか)ってみた

          たかはしのんき

          ロケットの打(う)ち上(あ)げ

          JavaScript のプログラムから SVG の画像を動かす準備が整ったので、今回は、いよいよアニメーションを実現します。 2015年に書いた SVG のコードではロケットを動かすために、下記の要領で SVG の animate 要素を使いました。 <use x="208" y="154" xlink:href="#g2"> <animate attributeName="y" begin="0s" dur="3s" from="154" to="78" />

          たかはしのんき

          ロケットの打(う)ち上(あ)げ

          たかはしのんき

          Notion AI(ノーションエーアイ)使(つか)ってみた

          Notion というサイトがあります。ノートやちょっとしたデータベースの作成などが簡単にできるので、私はCMS（コンテンツ管理システム）の一種かなと考えています。 その Notion に AI機能が搭載されたとのことなので、さっそく使ってみました。 結果はこちらです。 Notion AI に作ってもらった記事の内容を載せてみます。次回以降、これを参考にしながら SVG のアニメーションに取り組んでみたいと思います。 アニメーションの作成方法 このドキュメントはNot

          たかはしのんき

          Notion AI(ノーションエーアイ)使(つか)ってみた

          たかはしのんき