環境 2. canvasタグ使い方 3[…], javascriptでmathオブジェクトのcbrtメソッドを使用して立方根(3乗根)を計算するサンプルコードを記述してます。 目次 1. スクロールした時に処理を実行するには、オブジェクトをwindowにし、addEventListenerでイベントの種類を「scroll」に設定します。, 色々と省略して、次のようなものを作りました。座標を出力する場所は変えたいので、関数rectTest2でちがうdivを指定することにします。ただし、取得する座標はさっきのクリックして表示するdivのものです。, スクロールすると自動的に座標が取得されるようになりました。そして、要素が画面外にある場合にも、x/y座標が取得され続けることがわかりました。 「ある程度までスクロールすると表示されるアレ」を、プレーンなJavaScriptとHTML/CSSで実装してみました。なぜかスマホだとうまく動かないですが、説明用なのでOK!, 最初に要素を取得する必要があります。まず説明用にonclickを使って、要素をクリックするたびに処理が行われるようにします。, これでdivをクリックするたびに、関数「rectTest」が実行されるようになりました。では、座標を取得してみたいと思います。, 取得した座標は一度変数に代入し、代入した変数からプロパティ「left」および「top」で具体的な値を引き出します。, 上の要素をクリックすると座標が表示されます。これが何かというと、「要素の左上が画面の左上にくっついた場所」を0,0として、左からどれぐらい右にいったか、上からどれぐらい下に離れているかを意味しています。下に離れている=要素が下に移動しているので、要素が上に移動する=画面を下にスクロールするにつれて数字が少なくなります。 環境 2. hi[…], javascriptで、window.navigator.userAgentを使って、現在使用しているOSを判定するサンプルコードを記述してます。 目[…], javascriptで、Math.randomを使用して、ランダムに動くhtml要素を作るサンプルコードを記述してます。 目次 1. ダウンロードに関してはOfficeの公式ページの他、有志が作成したライブラリを取り込... マクロで罫線を作る時、線の種類以外に線の太さも指定することができます。ただし、LineStyleの設定によっては無効となる場合もあり、その相性についても記述しています。, Excelで元の列・行の幅のままコピーする方法/貼り付けのオプション(元の列幅を保持)他の使い方, やりたいことから方法を探すエクセルExcel操作・関数・VBA(マクロ)逆引きまとめ, 関数・演算子・メソッド・プロパティ名から探すExcel/VBA(マクロ)使い方・組み合わせ方まとめ, Excelでよく使う(あるいは人によっては役にたつ)ショートカットを集めてみました。, ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。, HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。, イラストレーターと並んでエンジニア業界でも突出して人気の高い、Adobe社の画像編集・作成ソフト、Photoshop関連記事のまとめとなります。毎回変な絵を使ってますが、大体マウスでがんばって描いてます。. 必要に応じてダウンロード、Excelに追加することで有効化することができます。 createdではまだ参照できませんが、mountedではthis.$refsから参照できるようになります。, 自分で読み返すために、学習の過程をそのまま書きのこしています。誰かの役に立ったらそれも良いかなと思います。, motomichi_worksさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog c#でのマウス座標の取得方法や設定方法をご存知でしょうか。座標には「スクリーン座標」と「クライアント座標」があり、それぞれに取得・設定方法があります。c#でのマウス座標について整理しましたので、興味のある方はぜひご覧ください。 アドインというのは、Excelに任意で追加できる関数や機能のことです。 このy軸をif文の条件に使えば、スクロールした時に特定の動作をさせることができそうです。, 画面に表示された時のy軸の座標は、実際のところ端末やブラウザの状態に左右されます。ある程度メディアクエリを使用して書き分けるのが理想的かもしれませんが、ひとまずここではy=400以下になった場合に処理をすることにします。, hideクラスには、CSSのopacityで「透明にする」という設定をしています。これを排除することで、不透明になりながら表示する処理を与えることができます。, JavaScriptで一定時間ごとに同じ処理を繰り返す方法/setIntervalメソッドの使い方, Excelで住所から都道府県だけ抜き出す方法/If、Left、Mid関数の組み合わせ方, ExcelVBA(マクロ)で印刷する方法/PrintOut、PrintPreviewメソッドの使い方, JavaScriptで新しいwindowを開き、文字を表示する方法/document.open・writeメソッドの使い方, Excel(エクセル)で別のシート・別のファイル(ブック)の情報や数字を参照する方法, ExcelVBA(マクロ):ブラウザを閉じる・終了する方法/Quitメソッドの使い方, Excelエクセルで名簿を五十音順に並べ替える方法と昇順・降順の意味/並べ替えとフィルターの使い方, Excel(エクセル)で数値の二乗や累乗、ルート(√)を求める方法/Power関数、Λ(べき乗)記号の使い方、キーボードでの打ち方, ExcelVBA(マクロ):Internet Explorerでタグからテキストを取得する方法/getElementsByTagNameメソッドの使い方, Excelで文字列の途中、一部を抜き出す方法/Mid関数の使い方、Find関数との組み合わせ方, Excelで関数を使って数値が閾(しきい)値以上、未満を判定する方法/Gestep関数の使い方, ExcelVBA(マクロ)で一行おきに色を付ける方法/Color、For Next文、If文の組み合わせ方, Excel(エクセル)でセルを桁区切りの数値(通貨形式)に設定するショートカット/Ctrl+Shift+1の使い方, HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。, 足し算といえばSum関数ですが、掛け算といえば? 意外と知らない人が多いProduct関数のご紹介です。, 文字を斜体=イタリックにするには、ボタン操作の他ショートカットを使う方法もあります。, 相当特殊な状況でしか使わない関数ですが、本来Max関数では含まない文字列や論理値も範囲に含み、最大値を表示する関数が存在します。. javascriptで、getBoundingClientRectメソッドを使って、html要素の座標を取得するサンプルコードを記述してます。 OpenPoseでの関節の座標はどこで取得するのだろうと試行錯誤していたらようやく見つけました。 関節の座標取得. 環境 2. g[…], javascriptでreverseメソッドを使用して、配列の値を反転させるサンプルコードを記述してます。 目次 1. 座標系全体の変換をせずに済む場合があります。 (画像やCSSの背景ではない)ページに埋め込まれたSVGはDOMの1部になり、ほかの要素と同様に操作されます。たとえば、以下のような1つの円を持つ基本的なSVGがあった場合、 以下のようなCSSエフェクトを適用できます。 さらにイベントハンドラーにアタッチして、属性を修正します。 次のデモでは、30個の円を1つのSVG画像に追加し、ホバーエフェクトをCSSに適用し、さ … 環境 2. […], javascriptで、history.lengthを使って、ブラウザの履歴の数を確認するサンプルコードを記述してます。 目次 1. )… tf_pose/estimator.pyに以下のような記述があります。 estimator.py. @staticmethod def draw_humans (npimg, humans, imgcopy = False): if imgcopy: npimg = np. 画面をスクロールして再度マウスを乗せるとy軸の数値が変わりますし、ブラウザのサイズを変えるとdivの位置も調整されるので、x軸も変わります。, このgetBoundingClientRectを、スクロールした時に自動的に実行するようにしてみます。 ExcelVBA(マクロ)で印刷のページ設定をする方法/PageSetupオブジェクトの使い方, ExcelVBA(マクロ):Internet Explorerで表示したページのタイトルを取得する方法/Documentプロパティの使い方, ExcelVBA(マクロ)で文字フォントを変更する方法/Font.Nameプロパティの使い方. Ma[…], 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons", "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css", // document.getElementById('resultop');を省略, jquery prevメソッドを使って同一階層のhtml要素から1つ前のhtml要素を取得する, React.js ライブラリ「react-notification-timeline」を使って通知機能を実装する, Laravel7 axios(アクシオス)を使用してWebApiからデータを取得する, React.js ライブラリ「react-icons」を使用して様々なアイコンを利用する. 環境 2. images使い方[…], javascriptで、location.reload使って、リロードボタンを作成するサンプルコードを記述してます。 目次 1. […], javascriptで、getSelectionメソッドを使用して選択中のテキストを取得するサンプルコードを記述してます。 目次 1. 環境 2. reverseメソ[…], javascriptで、Object.keys(obj).lengthを使用して、画像自体のサイズを取得するサンプルコードを記述してます。 目次 1. | 「画面サイズ」や「イベント発生座標」を取得する方法について取り上げます。似たようなプロパティがいくつかあり、目的のプロパティを利用するには、違いを理解しておく必要があります。各プロパティがどういった値を持っているのか実例とともに確認します。 環境 2. loca[…], javascriptで、canvasタグを使って、円や半円を描画するサンプルコードを記述してます。 目次 1. getBoundingClientRectは、HTMLエレメント(要素)の位置座標を取得することができるメソッドです。 トレジャーハントMAP G12地図座標 (Treasure hunt G12) 古ぼけた地図 (Treasure Hunt) G9 G10 深層(Lost Canals) G11 G12 新サイト(New Website) 今後このサイトで地図の追加はおこないません。新サイトへお願いします。 当ページの画像の転載を禁止します。 (Unauthorized copying prohibited. copy (npimg) image_h, image_w = npimg. ブログを報告する, 参考にさせていただいたページ vue-test-utils公式(英語) Getti…, stateの更新に伴うDOMの更新を待ってからテストする(非同期処理で更新されるstateのテスト)…, this.$storeを参照している子コンポーネントを単体でテストする | Vuex + vue-t…, vue.js 2.x その0004-02 アコーディオンを作る(jQueryのslideToggle…, vue.js 2.x その0005 lodashのdebounce()とthrottle()で処理の…, templateにコメントを書いて「warning 'v-html' directive can lead to XSS attack vue/no-v-html」の警告を個別に無効化する, railsのdatetime_selectで生成されるselectタグにスタイルを適用する, Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib (LoadError) の解決, hexoのcssの編集が反映されない(public/css/style.cssが更新されない). 色々と省略して、次のようなものを作りました。座標を出力する場所は変えたいので、関数rectTest2でちがうdivを指定することにします。ただし、取得する座標はさっきのクリックして表示するdivのものです。 addEventListener("scroll",rectTest2); 参考にさせて頂いたページ Vue.js サンプルコード 以下のように書いてみました。 click here foo foo Motomichi Works Blog モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。 2017-03-10. vue.js 2.x その0006 refで要素を参照する. javascriptで、getBoundingClientRectメソッドを使って、html要素の座標を取得するサンプルコードを記述してます。, getBoundingClientRectメソッドを使用すれば、html要素の座標を取得することが可能です。, 以下は、「取得」ボタンをクリックすると、各座標を取得して表示するサンプルコードとなります。, ※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。, javascriptで、imagesを使って、指定した画像のサイズを変更するサンプルコードを記述してます。 目次 1. Copyright © 2018-2020 すなぎつ All Rights Reserved. 環境 2.