はじめに ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー
![JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/19e9a61500b81a1faa76ede60d3eb9c1a307bd44/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SmF2YVNjcmlwdCVFMyU4MSVBRSVFOSU4NSU4RCVFNSU4OCU5NyVFMyU4MSVBRSVFNCVCRCVCRiVFMyU4MSU4NCVFNiU5NiVCOSVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MCU4MiVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MSVBRSVFOCVCRiVCRCVFNSU4QSVBMCUyQyVFNyVCNSU5MCVFNSU5MCU4OCUyQyVFNSU4RiU5NiVFNSVCRSU5NyUyQyVFNSU4OSU4QSVFOSU5OSVBNCVFMyU4MCU4MiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MWE0OGMyMzIyZWMzMmU5Y2RiNjEyNjY5MmEwNWFhZDE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0YWtlaGFydSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDEzOTU1YzAyZDgwNzQ3YWI5NzVjODJkMzViNWUxNzM%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K144Kk44OQ44O844Ko44O844K444Kn44Oz44OI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Ddec3620fe3545633e82bfc12ab01693c)
はじめに ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー
pico.js: a face-detection library in 200 lines of JavaScript ブラウザ上でリアルタイム顔認識JS「pico.js」 特に真新しいも物ではなくなったかもしれませんが、200行、2kbという軽量で高速動作が可能なライブラリだそう 関連エントリ JavaScriptとHTML5 Canvasを使って顔認識するコードがすごい 画像や動画の顔認識ができる「jQuery Face Detection Plugin」
Nano ID Collision Calculator ランダムIDを生成できるJSライブラリ「Nano ID」 ロードすると関数で簡単にランダムIDを生成できます 関連エントリ JSベースで簡単ページネーション「paginathing」
どうもですよ、はやちですよ٩( ᐛ )و 以前、こちらの記事でご紹介したPixi.js。 今回はパーティクルを使用して、ちょいと「雪が降ってる風」の演出を実装する方法をご紹介します( ˇωˇ)☝ 導入方法 npmはこちらからインストールしてお使いください。 npm install pixi.js 実装方法 それでは実装方法ご紹介します( ˘ω˘)☞三☞シュッシュッ 土台の設定 はじめに表示するCanvasを用意します。 Canvasはサイズと背景色も設定できます( ˇωˇ)☝ let app = new PIXI.Application(800,600,{backgroundColor : 0x1099bb}); document.body.appendChild(app.view); 複製させる画像の数を決めておきます( ˇωˇ)☝ //表示をする画像の数 let totalSprite
ベーシックアドベントカレンダー22日目です。 8日ぶり3回目の@tkhrです。 画像の遅延読み込みライブラリ比較の話です。 LPの高速化のために遅延読み込みを導入します。 対象になるLPは広告からの流入で表示するページになります。 なのでユーザの熱を冷まさせない工夫が必要ですね。 そのための工夫の一つとして今回は画像の遅延読み込みに対応します。 画像ならキャッシュがあるじゃん。と言えるかもしれませんが、広告LPなので初めてのユーザが大半なのでアテにできませんね。 なので遅延読み込みによってファーストビューが表示されるまでの時間を短縮することが狙いとなります。 遅延読み込みとは ページにアクセスした時には画像の読み込みはせず、必要になった時に画像を読み込みます。 必要になった時というのは、その画像が表示される時ですね。 それによってページにアクセスした時の読み込み時間を短縮できるので、ユーザ
Webサイト内に横スクロールさせるエリアを作成した際にスマートフォン表示ではスクロールバーを表示させることができず、そのエリアが横スクロールさせることをユーザーに伝えるために苦労したりします。 そんな時に使える横スクロールさせるエリアが出現した時に、アニメーション付きのアイコンを表示してそのエリアが横スクロールできることを視覚的に伝えてくれるJavaScript「ScrollHint」がとても活用できそうだったので自分用メモとしてご紹介します。 スマホ表示で横スクロールさせるエリアにアイコンを表示してくれるJavaScript「ScrollHint」 ScrollHint この動作を実装させておくとページ内を上からスクロールした際に、横スクロールさせるエリアが出現した時点で、そのエリアの前面にアニメーション付きのアイコンを表示して、横スクロールができるということを視覚的に伝えてくれます。
nanoJSは簡単なDOM操作をjQueryライクに行える軽量ライブラリです。同じような構文でDOMを操作する事が出来る、というもので完全互換ではありませんが、非圧縮で100行ほど、圧縮すると0.6kbほどになると超軽量です。また、デフォルトで存在しないメソッドの追加や、使用しないメソッドを削除してより軽量化する等、カスタマイズしやすい設計にもしてあるのだそう。jQueryで簡単なDOM操作しかしていないならパフォーマンスを損なうほど重いjQueryを使うよりこの手の後発な軽量ライブラリを使うのも一つの手段として有効ですね。ライセンスはMITです。 nanoJS
JavaScriptの時間を0パディングする方法を紹介します。 1.問題点 下記の、今日の年月日を表示する簡単なサンプルを作ってみました。 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); alert(year + '/' + month + '/' + day); このスクリプトを実行すると、"2018/5/15"のように表示されます。 できれば、"2018/05/15"のように、月や日が1桁のときに0パディングしたいのですが、方法が分かりません。 ということで、JavaScriptの時間を0パディングする方法を紹介します 2.JavaScriptの時間を0パディングする JavaScriptの時間を0パディングするに
jQuery Migrate プラグイン 3.x の使い方と警告文を自分なりにまとめました。 記事作成時の jQuery Migrate プラグイン(以下 jQuery Migrate)の バージョンは 3.0.1 です。 jQuery Migrate 1.x と使い方は同じですが 用途や警告文が異なるので注意して下さい。 jQuery Migrate 1.x についてはこちらにまとめました。 jQuery Migrate plugin について 開発版と製品版 使い方 jQuery Migrate plugin のプロパティ 警告メッセージの種類 JQMIGRATE: Migrate is installed, version X JQMIGRATE: Migrate is installed with logging active, version X JQMIGRATE: jQuer
こんにちは。フロントエンドエンジニアのハルです。 今回は、keystone.jsで個人ブログを作った後、ポートフォリオを載せる機能を追加する想定でカスタマイズしてみたいと思います。 ベースの作成 ベースの作成の説明は、Qiitaで紹介した記事を投稿しました。 node.jsのCMSのkeystone.jsに触れてみようこちらを参考にしてください。 今回の設定項目 pugとlessを選択 galleryをNoにした cloudinaryはEnterキーを押してスキップした $ yo keystone ? What is the name of your project? sample-works ? Would you like to use Pug, Nunjucks, Twig or Handlebars for templates? [pug | nunjucks | twig | h
DriverはWebページを案内するページツアーを実装するスクリプトです。たまに見かける、任意の場所をハイライトしてユーザーにWebページの使い方等を教える、というもの。単純にハイライトするだけ、ハイライトせずツールチップで明示するだけ、といった事も出来ます。Webアプリなんかでは重宝するんじゃないでしょうか。非依存で軽量なので使いやすい印象です。ライセンスはMIT。 Driver
先日家に帰ったら流れていた「SING/シング」でMISIAが声優をしていてびっくりしたyanagimachiです。 あと長澤まさみの歌声初めて聞いたけど普通にうまかったです。 興味出た方は一度ぜひ! さて、ウインドウの高さ-下付きの広告の高さのオーバーレイとか作りたいときって結構困ります。 HTMLや広告のCSSは以下のようなものとします。 //HTML <section class="block-overlay"> <!-- overlay ここの高さを指定したい --> </section> <aside class="block-ad"> <!-- 下付きの広告 --> </aside> //CSS 下付きの広告 .block-ad { position: fixed; bottom: 0; left: 0; display: flex; align-items: center; j
シンプルなツールチップをはじめ、表示方向の変更、形状の変更、アニメーションの変更、ホバー・フォーカス・クリック・タッチ操作に対応したツールチップを簡単に実装できる軽量スクリプトを紹介します。 Tippy.js Tippy.js -GitHub Tippy.jsのデモ Tippy.jsの使い方 Tippy.jsのデモ Tippy.jsでは、さまざまなツールチップを簡単に実装できます。 デモにはそれらのツールチップが実際に試せるので、アニメーションで紹介します。 まずは、デフォルトと表示方向の制御。
ECMAScriptの改訂により、JavaScriptはよりシンプルな構文や、より厳密な構文が書けるようになってきています。以前、ES2015+相当のJavaScriptはES5相当へ変換したほうが実行速度が良くなるという話がありました(参照「2017-02-14のJS - JSer.info」)。JavaScriptプログラマーとしてはどのような書き方が最適なのか気になります。そこで、Chrome・Safari・Firefox Quantum・Edgeで、ECMAScriptの構文を一部ピックアップして実行速度を調べてみました。 パフォーマンスの計測方法 検証を行いたい構文を使ったコードを100万回実行・計測する関数を用意し、用意した関数を10回ずつ実行しています。 はじめに、for文を空の状態で実行するコードを用意しました。計測結果がミリ秒以下になる時があるため、さらなる精度で計測でき
今週公開した記事の中から、この週末に読んでおきたい注目記事をまとめて紹介。今週は、ネイティブなDOM操作メソッドの進化、Vue.jsでかっこいいグラフを作る方法、ついにリリースされたLaravel 5.5の新機能まとめなど、話題の記事を中心に8本をセレクト。平日は忙しくてチェックできなかった人も、休日にゆっくりまとめ読みしてみては? 【今週の一番人気】まるでjQueryみたい!ネイティブなDOM操作メソッドもこんなに進化していた! 「脱jQuery」をめぐる議論は何年も前からありますが、jQueryの使い勝手のよさは無視できません。ところが、WHATWGのDOM StandardではjQuery風の使いやすいAPIが考案されています。 【ソーシャルで話題】Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ Webアプリを作るときに便利なグラフ描画ライブラリ「Chart
自称ミニマリスト、フロントエンドのザワです。こんにちは。 今まで私はjQueryとマイメン的な感じで共に修羅場をくぐり抜けてきました。しかし、ミニマリストという性格上シンプルなものに惹かれるもので、断捨離したい衝動に駆られる時期がやって来ます。一大決心の末、jQueryにグッバイを告げ、JavaScriptとマイメン的な感じでコンビを組むことにしました。真夏のメモリー。 さて、今回は、jQueryで今まで私が記述していたものがどのように変わったのか、jQueryをよく使用するケースを例にとって、JavaScriptと比較していきたいと思います。 DOM取得編 jQueryを使用する主なメリットといえば、DOMの取得でしょう。idやclassから取得したり、findメソッドやclosestメソッドなど、DOMをトラバース(DOMを横断して移動するイメージ)して簡単に目的のDOMを取得すること
こんにちは、はっちゃんです。 今回はinfobox.jsの使い方をご説明します。 Google Mapをサイトに埋め込む際、Google Mapから取得できるURLで iframe として表示させるのではなく、スタイルやピンの画像を自由にカスタマイズできる「Google Maps JavaScript API v3」を使用することが多いですよね。 デフォルトのメソッド、InfoWindowの使い方 生成したDOMは、InfoWindowのオプションから、contentをvalueに設定するだけで簡単に表示できます。 See the Pen infowindow by k_hatsushi (@hatsushi_kazuya) on CodePen. ですが、たとえば「枠の色を変えたいなー」と思っても、従来のInfoWindowメソッドを使用して作ったDOMだと、枠の内側にもうひとつ枠が生成
JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル(文字列がランダムで切り替わる演出)の表現を行うためのライブラリで、SPA(シングル・ページ・アプリケーション)やゲームの演出やスペシャルコンテンツなどの演出に役立ちます。 たとえば、ウェブサイトでマウスカーソルが触れたときに次のような演出ができます。 JSライブラリはMITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 shuffle-text: JavaScript Text Effect library. shuffle-text を使ってみよう 本記事では、JSライブラリを組み込み利用するまでの手順を解説します。以下のデモが今回作成するもののサンプルとな
STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 stimed.style.create([ {target:'body', time:'00:00', property:'background-color', value:'#fff'}, {target:'body', time:'18:00', property:'background-color', value:'#000'}, {target:'body', time:'24:00', property:'background-color', value:'#fff'} ]);昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えたり、要素を動かしたり、とアイデアは豊富です。transition-delay等じゃサポートしきれない仕様に対応で
Photo by フリー写真素材ぱくたそ 今回紹介するのはJSでスクロールを一時的に禁止する方法です。 以外と使う機会多いんですよね。 「このライトボックスを開いた際はページのスクロールは止めたい…」 「このスマホサイト、このメニューを開いた場合はスクロールされないようにしたい」 「または、全体はスクロール禁止で指定オブジェクトのみスクロールさせたい」 制作しているとこんな要望を聞くことがたまにあります。 やり方忘れた頃にぽろぽろと出現するのでメモしておこうと思います。 ちなみに生のJSで書くのは手間なのでjQueryは使います。 スクロールイベントを取得して何もしなければいい やり方は単純で、mousewheelやtouchmoveとかに”何もしないイベント”を追加すればいいのです。 PCは色々あるマウスホイールイベントをまとめて指定、スマホの方はtouchmoveにスクロール禁止のイベ
失敗談です。例えばデザインで文字に対して一律に文字間(トラッキング)が10%かかっていた場合に、<body>タグにletter-spacing:0.1emと指定すると意図しないものになる可能性があります。 bodyタグでの指定は全ての文字間を一括で0.1emにならない <body>タグにletter-spacing: 0.1emを指定するとbodyのフォントサイズ(例:16px)に対する0.1em、つまり例のパターンだと1.6pxという固定値が一括でかかります。 この場合、小さい文字では文字間が空きすぎ、大きな文字ではイマイチ空かなくなります。デザインではその文字サイズの10%を文字間を意図しているはずなので、固定値では当然ズレてきます。 面倒でも個別に指定しよう letter-spacingが固定値ではなく、文字サイズに対する割合の場合、面倒でも都度指定するのが安全です。
この記事は新野淳一氏のブログ「Publickey」に掲載された「AWSの主要サービスをローカルでエミュレート、「LocalStack」が1.0に到達」(2022年7月25日掲載)を、ITmedia NEWS編集部で一部編集し、転載したものです。 LocalStackを利用することで実際のAWSにアクセスすることなくローカルの環境で開発やテストを行えるようになるため、迅速な開発サイクルの実現やAWSの利用コスト削減などが期待できます。 LocalStackはオープンソースですが、無料で使える「Community」版では基本的なAPI群が利用可能、月額28ドルからの有償となる「Pro」版では全てのAPIが利用可能。さらに上位の「Team」版と「Enterprise」版も用意されています。 AWSの主要サービスをエミュレート LocalStackでエミュレートできるAWSのサービスは、「Amaz
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. 『メタタグ』とは、検索エンジンやブラウザなどのシステムに対して情報(メタデータ)を伝えるHTMLタグのことだ。 サイトの内容をシステムに伝える説明書き、と言い換えるとわかりやすい。 一口にメタタグといっても数多くの種類がある。 「これさえ記載すれば検索順位が上がる」といった直接的なSEO効果を持つタグは存在しないが、下記のようなメタタグを適切に設定することで、検索エンジンに認識されやすくなり、総合的にSEOに良い影響をもたらすことが期待できる。
UIデザインでは Figma が基本的にデザイン使うツールになりつつあります。 画面のUIデザインから、最近は簡単なバナーも最近はFigma で作るようになりました。 UIデザインからい画面遷移の動きをつけるプロトタイピングに使えるので、ほぼFigmaで作業しています。 Figmaアニメーションもプロトタイピングでできなくはないですが、細かい動きはやはり専用のソフトウェアがよさそう。 そう考えていたところに、気軽にアニメーションを作れて組み込みもできそうなツールを知りました。 モーショングラフィックツールの「Rive」です。 https://rive.app/ Rive の編集Rive は、Webアプリなのでブラウザ上で動かします。 Editor画面などは、Figma にも通じるシンプルUIです。操作がわかりやすいながらも、結構多機能だと思います。 ざざっと見てみた感じですが、下記のことが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く