QDくん⚡️Python x 機械学習 x 金融工学 @developer_quant 東工大が無料公開しているPython解説サイト chokkan.github.io/python/index.h… 初心者の目線に合わせた丁寧な説明で、かゆいところに手が届く教材。 基本的な文法、データ構造、ファイル入出力やオブジェクト指向、NumpyとMatplotlibの使い方などをひと通り学べる。 pic.twitter.com/XyBBslyeBa 2022-10-08 22:01:21 QDくん⚡️AI関連の無料教材紹介 @developer_quant 東工大が無料公開しているPython解説サイト chokkan.github.io/python/index.h… 初心者の目線に合わせた丁寧な説明で、かゆいところに手が届く教材。 基本的な文法、データ構造、ファイル入出力やオブジェクト指向、
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Result スクロールするとテキストにアニメーションしながらハイライトする、というもの。 通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。 JavaScript (function (document) { const markers = [...document.querySelectorAll('mark')]; const observer = new IntersectionObserver(entries => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { entry.target.style.animationPlayState = 'running'; observer.unobserve(entry.target); } }); }, { threshold
#概要 ランディングページとサンクスページのドメインが異なるサイトにおいて、Googleアナリティクスが広告コンバージョンを計測するために必要な設定は何か？どう動くのか？を考察・検証したノートです。 さて、前回の記事「Google広告：クロスドメインコンバージョン計測の実装パターンを検証」とはどのような違いがあるのでしょうか。 ※以降、ランディングページ～サンクスページの間で異なるドメインへ遷移することを「クロスドメイン」と呼びます。 #結論 ##計測の仕組み ランディングページのURLパラメータを計測に使う Google広告とは異なり、コンバージョンポイントではクリックIDを格納したCookieは利用しません。Googleアナリティクスは、ランディングページにアクセスした際、以下いずれかのURLパラメータを元にして流入元を判別しています。 クリックID:gclid カスタムキャンペーンパ
「Mercari Engineering」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Jonathan Saring 氏により2018年 6月に公開された『 11 JavaScript Animation Libraries For 2019 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 何かいいJavaScriptのアニメーションライブラリがないかとWebを眺めていても、「おすすめ」されているはずの多くライブラリが、実は長い間メンテナンスされていませんでした。 そこで私は調査を重ね、あなたのアプリにも使える11の優れたライブラリ、そして今はほとんどメンテナンスされていないものの
[レベル: 中級] ネイティブ Lazy-load を簡単に実装する WordPress 用のプラグインを Google が公開しました。 ネイティブ Lazy-load は JavaScript のライブラリを利用することなく loading 属性を追加するだけで、画像と iframe の遅延読み込みを可能にします。 1 か月前にリリースされた Chrome 76 でサポートされました。 設定不要、インストールするだけで WP で Lazy-load Native Lazyload プラグインの使い方は非常にシンプルです。 インストールして有効にするだけです。 設定項目はありません。 有効にすると、img タグと iframe タグに loading=”lazy” 属性をプラグインが自動的に追加します。 現状では、loading 属性をサポートするブラウザは Chrome 76（以上）だ
きっかけ 最近、GDPR（EU一般データ保護規則）と騒がれ日本語のサイトでも見かけるクッキーの同意文。 わざわざそのためにレイアウト作るのが面倒な方に、テンプレート埋めればCookieの同意文が書けるJavaScript。 完成形 See the Pen CookieContept by haikyoiko (@haikyoiko) on CodePen. 上記を完成させるのは、スリーステップで必要な記述が完成。 ステップ１：以下のURLを開く ステップ２：Configureで必要な設定を埋める 以下の画面よりボタンの配置、レイアウト、配色、LearnMoreの遷移先などを設定 ステップ３：CopyCodeを選択 ラスト：自身のサイトに埋め込めば完成！（ の前に置く） ※ 他にも以下にいろいろサンプルがある 注意 上記の対応はただのCookieの同意文のみを表示させている。 本格的にCoo
![[GDPR] 海外サイトによくあるCookieの同意文を表示させるJavaScript - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a057d57fe0170dad4cd91eba62f9b459d305e8fa/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCR0RQUiU1RCUyMCVFNiVCNSVCNyVFNSVBNCU5NiVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MyU4OCVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MSU4RiVFMyU4MSU4MiVFMyU4MiU4QkNvb2tpZSVFMyU4MSVBRSVFNSU5MCU4QyVFNiU4NCU4RiVFNiU5NiU4NyVFMyU4MiU5MiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5NSVFMyU4MSU5QiVFMyU4MiU4QkphdmFTY3JpcHQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQ1ZThiODczOGUzYWI0NzU2MTVhNmZjNmExMDExODJl%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGFydXRvMTY3JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kYzg3Y2RiM2E5Y2RlN2YyYWUxYzM4YTNlYTk2ZGZkNw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D32b4243f5f7439244a15d5fdd3a7a758)
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
先日Twitterでお世話になっているサキさんが無断転載対策を紹介されていました。 ＞＞＞無断転載は正しくリンクを貼ってもらうことで被リンクにすることができる このなかで使われているCCCというプラグイン。 ＞＞＞Check Copy Contents(CCC) – WordPress テキストのコピーを検知してメールでお知らせしてくれるプラグインです。 興味本位で入れた見たとことろ、まぁなんとコピーされていること。 物販系アフィリエイト特化サイトなのでコピーされるのは「型番」や「商品名」がほとんどなのですが、一部に明らかにリライト目的っぽいコピーが見受けられます。 CCCはアクセス元のIPアドレスも記録されるのですが、同じIPで何度も数時間に渡ってコピーが続いたりします。 どうせリライト程度では上位表示できないとわかっているのですがあまりいい気はしないですよね。 ということで、1セッシ
ウェブフロントエンド技術は変化が激しいと言われるけれども、多くの人にとって最新のウェブフロントエンド技術を無理してキャッチアップする必要は無い。以下理由。 ここでいう最新のウェブフロントエンド技術とは、新しいブラウザのAPIや新しいJavaScriptの文法や新しいフレームワーク・ツールなどを指す 今のHTML5はドキュメントを表現するプラットフォームだけではなくアプリケーションプラットフォームとしても機能するように進化をしている最中 だからアプリケーションプラットフォームとしての進化を支える新技術がたくさん出てきている 逆に言うと、アプリケーション(SPAとか)を書かない人にとってはキャッチアップする必要の無い場合がたくさんある また、それらのウェブフロントエンドの新技術を全てキャッチアップするのは基本的に不可能だと思う 自分はウェブフロントエンドやそれのパフォーマンスを専門の一つにして
はじめに WordPressでプログを公開し始めて、もう半年以上も経ちますが、SEO対策はほとんどやっていませんでした。 さすがに少しぐらいはSEO対策をやろうと思い、エンジニアリングでできそうなところとして、GoogleのPageSpeed Insightsのスコアを上げる対策をしてみました。 基本的なことですが、下記の対応をするだけこのブログサイトのスコアは常時80以上のスコアをキープできるようになりました。ぜひ、参考にしていただければと思います。 現状のスコアと改善点を確認する 何はともあれ、現在のスコアと改善を確認するところからですね。 こちらのサイトで計測したいウェブページのURLを入力して、分析ボタンを押してください。 暫くすると現状の「スコア」と「適用可能な最適化のリスト」が表示されます。この「適用可能な最適化」を一つずつ改善していけばスコアは上がります。 とはいえ、一つずつ
![[WordPressのSEO対策]PageSpeed Insightsのスコアを上げる方法 | RE:ENGINES](https://cdn-ak-scissors.b.st-hatena.com/image/square/a86cdd2429788a7ccf25f192a974c88b0a914c41/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fre-engines.com%2Fwp-content%2Fuploads%2F2017%2F11%2Fwordpress-logo-notext-rgb.png){kind=logo}
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本
ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。
![[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/73c5f616116e59d40f567ed5c484ab9ef70b0605/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017052401-01.png)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
ネットショップ運営[楽天・ECサイト]に関する情報 便利ツール Webサービス CSS Javascript jQueryなど紹介していきます ネットショップを運営していくなかで楽天スーパーセールのような期間限定のイベントを実施することがあると思います。 イベントの期間だけ表示したいバナーがあるんだけど、イベント開始、終了が夜中だったりすると更新するのが大変ですよね。 そこで、本日は表示したい画像等を期間指定出来るJavascriptを紹介したいと思います。(H27.6.10追記あり) javascriptを使って画像などを期間指定で表示・非表示<div id="MyEvent"> <a href="リンク先URL"> <img src="画像URL"> </a> </div> <div id="Usually"> 通常時に表示する内容 </div> <script> // イベントの開始
このサイトのテーマはtwentyfourteenの子テーマなのですっかり普通にJQueryが使えるような気がしてしまっていました。普通に、というのは $( とかの書き方でなのですが… 自作のPluginにDatepickerを使いたくて試していたら、普通にJQueryを動かすまでちょっと手間がかかったので書いてみます。 WordPressにはJQueryが既に読み込まれている ググって調べると ・WordPressにはJQueryが既に読み込まれている ・だけど、それを使わずにgoogleのJQueryを使った方がいい という記事が多数見つかりました。なぜ？と思ったのでちょっと実験してみました。 なにもしなくてもJQueryが動くかどうか 使っている子テーマの header.php を開いて <?php wp_head(); ?> の後に、 <script type="text/javas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
