Mozilla CorporationでJavaScriptのエバンジェリストとして働く、John Resig氏によって作られたJavaScriptライブラリ。メソッドチェーンで処理をどんどんつないでいける特徴を持つ。 モットーは「Writing JavaScript code should be fun.」。
このブログのjQueryをVue.jsにリプレースしてる。 あわせてよみたい このブログのjQueryをVue.jsにリプレースしてる。 日曜の夜であるな。今日はちょっと遊びすぎて押しちゃってるのでさっさとブログを仕上げて、家事諸々をして風呂入って寝てしまおう。うちの会社は公休日はないので普通に出勤なんだよね。 まぁ、今日はそこそこ遊ぶことができてストレス解消にはなった。この上部にある記事要約のパーツをVue.jsで書き直すプログラミング遊びをしていたのである。 ちなみにソースコードについてはGithubで公開してるので、ソースを読める人は読んでみてもいいかもしれない。 github.com …
皆さん こんにちは、読書大好き大化社員の紙魚(シミ)ちゃんです。 普段はPHPやC#を使って開発をしています。 しかしWeb開発では別言語を使う人の画面を修正する場合も多く、そんな時よくjQueryで苦労していました。 今回は そもそもjQueryって何? について書いてみようと思います。 jQueryとは JavaScriptのコードを簡潔に書くことを目的に開発されたライブラリです。 短いコード量で動かせることや、どのブラウザでも同じコードが使えるため効率的に開発できることなどがメリットとして挙げられます。 最近はTypeScriptが出てきたために使用されなくなってきているそうですが、Ty…
// // ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) // ]]> ブログ記事のカテゴリ名をメニュー名にするのですが、 そのカテゴリの更に詳細なカテゴリ名もメニューに表示したいと思うことがあります。 例えば、プログラミングのカテゴリの中には、C言語やC++などありますが、 C言語やC++もメニューに表示したい場合には、階層型メニューがわかりやすいです。 ここでは、jQueryを作った階層型メニューの作り方を書いていきたいと思います。 jQuery…
HTML・cssの課題で作成したサイトに動きを付けてみましょう! 下記は復習と、新しく覚えたいことを記録しておきます。 手探りでの作成なので、きっとコードがごちゃごちゃで、お恥ずかしいですが、記録として残しておきます。お気づきの点がありましたら教えて頂けたら嬉しいです! 01. 課題①:ドロワーメニューの実装 ≪HTML≫ まとめ ≪CSS≫ まとめ 新しく覚えておきたいこと ≪jQuer≫ まとめ 課題②:ページトップへ戻るボタンを付ける ≪HTML≫ まとめ ≪CSS≫ まとめ ≪jQuer≫ まとめ 覚えておきたいこと 01. 課題①:ドロワーメニューの実装 まず、こちらのサイトを参考に…
前回に引き続きjQueryについて学んでいきましょう。 メソッドとパラメーター メソッドとパラメーターについて jQueryの代表的なメソッド 情報の追加と変更 要素の挿入と削除 属性の取得、変更、追加、削除 class属性の追加と削除 cssの取得、設定 cssの複数の設定方法 メソッドチェーン メソッドを使用したアニメーション 代表的なメソッド一覧 イベントの監視・構文 .on()を使った主なイベント処理 クリックイベントの例 hoverイベントの例 ワンポイント【いろいろなイベント構文の書き方】 メソッドとパラメーター 前回、jQueryはjQuery("セレクタ").メソッド("パラメ…
DOM操作を含めたJavaSprictの基礎を学んだところで、jQueryの学習に入っていきましょう! ■jQueryとは?■ jQueryを使うための準備 jQueryを書く時のルール セレクタ(HTML要素)の指定方法【jQuery("セレクタ")】 メソッド("パラメータ") 繰り返し処理【.each(function)】 複数のセレクタを指定する まとめてセレクタを使用 子要素や孫要素などの条件を追加して指定 メソッドを使った要素の指定【Tree Traversal】 ワンポイント jQuery(function(){})について jQueryの省略 ■jQueryとは?■ JavaS…
前書き rails6のradio_buttonタグでradioボタンを作成したところデフォルトのスタイルをクリックしたら文字の色が変わるようにスタイルを変更したいと思いました。色々苦戦したので記事に残します. 環境 Ruby 3.0.6 Rails 6.1.7.6 jquery: 3.7.1 変更前. . 変更後. やったこと ①○を非表示にする. ②クリックした要素を赤く色を付ける。 ①○(radio_button)を非表示にする. radio_buttonの部分のコードだけ載せます。 = f.label :weekly_goal,weekly_goal.weekly_goal,for: "…
submitボタンのおさらい 皆さんはForm内にあるsubmitボタンをどのように制御していらっしゃるでしょうか。 ボタンのような形をしているので、button要素と同様clickイベントのリスナーを設定して、対応するイベントハンドラで動作させると思いがちですが、そもそも、submitボタンはForm内にあってForm内のinput要素、textarea要素、select要素のvalue属性を集めてFormのaction属性に設定されたエンドポイントに送ることがデフォルトの動作となっています。 したがって、イベントリスナーの設定は当然に予定されているものではないのです。 もちろん、Formの…
ラジオボタンの設定をjqueryのスクリプトで行うときにハマるという話です。 問題の前提 ラジオボタンは通常複数の同一name属性をもつ要素が集まってできています。 <input type="radio" name="post_radio" value="val1" checked>要素1 <input type="radio" name="post_radio" value="val2">要素2 <input type="radio" name="post_radio" value="val3">要素3 こんな感じです。 ここで、要素3にチェックを入れるという設定をjqueryでやりたいとい…
学生の頃ってよくパフェとかシェイクとかアイスとか食べてたのに 大人になるとぜーんぜん食べなくなった。 ダイエットとか全然関係なく、そこへの欲求が出てこない。 だけど、大人になるまで食べたことなかったものを大人になって食べたいな~って 思うことも増え、挑戦することも増えた。 その中の1つがこのメロンソーダフロート。 一口目は喉を潤したいから、メロンソーダをストローでグイっと。 (ストローはグイっとではないと思うけど) しゅわしゅわを味わった後に、ぷかぷか浮かぶアイスをちゅるっと。 大人になって味わう、このモダンチックな食べ物と雰囲気。 THE★大人 幸せのひと時を有難う。 ☟本日の授業の流れ a…
CSSでスタイルを適用する対象を指定するために使用するのがセレクタ(selector)です。 今まで使用してきたセレクタには以下のものがあります。 使用してきた代表的なセレクタ classセレクタ idセレクタ 子セレクタ 子孫セレクタ 擬似クラス 新しいCSS ここ数年、特にMicrosoftのIEのサポートが完全に停止した2022年6月以降、CSSは非常に速いスピードで新機能が実装されています。正確には元々実装されていた機能が主要ブラウザでほぼ対応され、実際に使用出来るようになったのです。 新しいセレクタ 兄弟要素(jQueryのsiblingsとは違い、下の兄弟要素のみが対象) 隣の要素…
あのブログよりもちょっと差がつくはてなブログの簡単なカスタマイズをご紹介します。ブログをちょっとカスタマイズするだけで自分のブログに愛着がわくかもしれませんよ。 検索ボックスを見やすく はてなブログでサイドバーに表示できる「検索ボックス」(デザイン→カスタマイズ→サイドバー→モジュールを追加→「検索」)で文字を入力する時(フォーカス時)にちょっとだけ見やすくします(このブログの検索ボックスで確認してみてください)。 検索ボックスの「記事を検索」を消す 検索ボックスに文字を入力する時に「記事を検索」を消します。文字を入力するタイミングで検索ボックスの「記事を検索」の文字色を検索ボックスの色(背景…
window.onload = function () { let tes1 = document.getElementById("test1"); tes1.addEventListener("click",function(){ tes1.innerText = "タイトル" }) } window.onload = function () { let tes1 = document.getElementById("test1"); tes1.addEventListener("click",function(){ tes1.innerText = "タイトル" }) } タイマ割り込みを…
Laravelでcorsってどうやんの?って聞かれたので「そもそもCORSってなんや?」って言えないので調べる。 CORSの基礎知識 www.youtube.com zenn.dev よし、わかった。じゃあ後は実践的に試してみる。 Laravelで試すための下準備 3年ぶりにLaravel触るのですっかり忘れてた。やり直し。 環境 t-ito@DESKTOP-BR8SCJA:~/lesson/laravel$ cat /etc/debian_version 12.5 t-ito@DESKTOP-BR8SCJA:~/lesson/laravel$ cat /etc/issue Debian GN…
浪人のサムライです。 本日、ホームページを新しくしました。 こちらです。 kawan0116.web.fc2.com 1日でできた 現在、DEJAVINAさまのホームページを作っているのですが、ちょっと落ち着いた。 無事に公開にたどり着きました。 あとは更新対応のみです。 その合間を縫って、自分のホームページも作り替えることにしました。 いきなりHTMLコーディングをしましたけどね(笑)。 その場でデザインを思いついたらガッツリとCSSを書いていく。 ちなみに、Adobeドリームウィーバー(以下DW)でHTMLコーディングを使っています。 前はvscodeを使っていたのですが、起動しなくなった…
SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。 しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて1つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも…
こんにちは。Sansan Engineering Unitで副部長を務めている笹川 裕人です。新たにスタートする、この「Sansan Tech Talk」。Sansan技術本部のテックリードたちが取り組んでいる技術的な取り組みやチャレンジを対談形式で深掘りします。初回となる今回はEight Engineering Unitで部長を務める大熊 秀治にインタビューしました。
cgworks.jp 要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。 ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。 自分のスクロール量 :画面トップから対象要素のトップまで位置 :画面の高さ :対象要素の高さ まず、1と2を使って自身のスクロール量と対象要素の位置が同じになったタイミング(要素が画面の上端に到達したら)でaddClassします。 この時の計算式は1 = 2になります さらに3の値を使って、addClassするタイミングを1画面分下にします。 1 =…
jQueryで複数のオブジェクトに対して繰り返し処理を行う場合は、each() メソッドを使用します。 まとめて処理されるパターン <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script> $(function(){ alert($('li').text()); }); </script> jQuery.each() の使い方 複数あるli要素に対して…
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。 note.com html htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの…
構想はあったものの、忙しいとかしんどいとかそんな理由で8~10年ほど暖めていた(割りには大したことないが)、実装開始から2週間でようやくカラフルクロックが完成した。 yamada1221.github.ioこの調子で、リゼロのやつも作りたいものだ、この前座と言っても過言ではない。 jQuery使いたくなかったので、Reactでやるか?で挫折していたが、これが作れるならプレーンなjsで実現可能だろう。毎秒背景色が変わるはずなのだが、微妙に意図しない動きになっているものの、これくらいは良しとしよう。
UIToolkit とりあえず使う UIBuilder シーンに置く デザインやレイアウト変更 スクリプトから操作 デザインやりたいこと 日本語フォント テキスト省略... 画像を入れる 影を付ける デフォルトコンポーネントの細かいUI編集(?) highlighの色など(?) コードでのuxml,uss編集 uxml USS(?) 公式サンプルアセット QuizU Dragon Crashers 公式ドキュメント 最後に UIToolkit Unityの新しいUI実装のツール. 昔はUIElementという名前でEditor拡張用のイメージがあったけど、今は普通のゲーム実装でも推奨になってい…
以前の職場では主にjQueryのajaxを使用していましたが、新しい職場ではJavaScriptのFetch APIを使うことになったので、基本的なアレコレをまとめてみた。
目的 今 SNMP 関連のことをやっていて、いい MIB ブラウザがないか探しています。 アプリ版であれば前回ご紹介した以下の SnmpB があるのですがもっと手軽にみたいなと思い、少し構想を練っています。 amegon.hatenablog.com イメージとしては以下のような感じです。 MIB ツリーをブラウザで表示(インストール不要で手軽) MIB ファイルを後から追加することでツリーの拡張ができる MIB ツリーから対象の SNMP ホストに SNMP-Get、SNMP-Set ができる 一気に全部はできないのと Web 関連のアプリ開発はちんぷんかんぷんなので、一歩ずつ進めていこうか…
5chアニメ速5chアニメ速 1主にスレ画のせい5chアニメ速 2スレ画のおっさんはおっさんで哀れif(typeof(adingoFluct)!="undefined") adingoFluct.showAd('1000194985'); window.gnshbrequest.cmd.push(function() { window.gnshbrequest.applyPassback("1536626", "[data-cptid='1536626']"); });5chアニメ速 5>>2詰んでる状況なのが悪いとこはある5chアニメ速 3だいたいこいつのせい5chアニメ速 6うぅ…もう一度…