JavaScriptによる位置情報の取得を簡単に解説（geolocation）
更新日: 2018年8月30日公開日: 2018年8月24日JavaScriptによる位置情報の取得を簡単に解説（geolocation） Webブラウザのgeolocationオブジェクトを使うと、JavaScriptで現在位置（緯度／経度／高度と移動中なら速度／方向）を取得することができます。特にスマートフォン向けサイトでは、利用者の現在地を元に情報提供を行いたい場合もあるかと思いますので、位置情報を取得する流れを確認しておきましょう。 位置情報を取得するgetCurrentPosition() geolocationで位置情報を取得するには、getCurrentPosition()を呼び出して取得する方法と自動的に取得（位置情報を監視）し続ける方法があります。まずは、getCurrentPosition()で現在位置を取得してみましょう。 位置情報の取得には時間がかかることがあるので
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する ｜ Tips Note by TAM
下記のような絞込み検索を jQueryで実装する機会があったのでご紹介します。 検索ボックスに文字を入力するたびにページ内の検索対象から部分一致するワードを絞り込んで検索結果エリアに表示します。 部分一致ですので、検索ボックスに“2”と入力すると“2”を含む『りんご120円』と『いちご220円』が検索結果に表示されます。 設定したスクリプトはこちらです。 searchWord = function(){ var searchResult, searchText = $(this).val(), // 検索ボックスに入力された値 targetText, hitNum; // 検索結果を格納するための配列を用意 searchResult = []; // 検索結果エリアの表示を空にする $('#search-result__list').empty(); $('.search-result__
現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法 - JavaScript TIPSふぁくとりー
《2017年6月15日 11:30 AM 公開/更新》 現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法 [日付・時刻] JavaScriptを使えば、現在時刻をテキストでリアルタイムに表示し続けるデジタル時計をウェブページ上に作ることも簡単にできます。現在時刻を得て、ページ上の文字列を書き換える処理を、1秒毎に自動実行するよう記述すれば良いだけです。 現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法 現在時刻を得て表示する方法 1秒毎に特定の処理(関数)を実行する方法 1秒毎に描画を更新して、リアルタイムに表示し続けるデジタル時計を作るHTML＋JavaScriptソース 現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法 JavaScriptを使えば、現在の日付や時刻が得られます。一定間隔ごとに特定の処理を自動実行する方法は、記事「経過時間(秒数)をリ
マウスクリックで表示画像を差し替える方法 - JavaScript TIPSふぁくとりー
《2017年6月12日 1:00 PM 公開/更新》 マウスクリックで表示画像を差し替える方法 [装飾・内容変更] 表示されている画像を別の画像に差し替えたい(変化させたい)場合は、JavaScriptを使って対象の画像(img要素)のsrcプロパティに新画像のURLを代入するだけで簡単に実現できます。ここでは例として、閲覧者がマウスをクリックすることで画像を差し替える機能を作ってみます。 マウスクリックで表示画像を差し替える方法 あるIDが付加された画像を差し替える(変化させる) 指定IDの画像を差し替える汎用関数を作る マウスクリックで表示画像を差し替える方法 単一の画像表示スペースに次々に画像を表示させたい場合など、表示されている画像を別の画像に差し替えたい(変化させたい)ことがあります。 ここでは例として、閲覧者がマウスをクリックすることで画像を差し替える機能を作ってみます。すごく
ファイルをダウンロードさせるには？［JavaScript］
リンクをクリックするだけでファイルをダウンロードできるようにするには、HTML5のdownload属性を使う方法とJavaScriptコードを使う方法がある。 連載目次 Webページで、エンドユーザーにファイルをダウンロードさせたいことがある。ZIPファイルなどはHTMLでリンクを記述すればよいのだが、テキストファイルやPDFファイルなどのリンクはダウンロードされずにWebブラウザで開いてしまう。何とかならないだろうか？ 本稿ではJavaScriptでファイルをダウンロードさせる方法を解説する。 HTML5のdownload属性 JavaScriptを書き始める前に、HTML5での解決策を紹介しておこう。 リンク（HTMLの<a>要素）には、HTML5でdownload属性が追加された。この属性に対応しているブラウザであれば、テキストファイルやPDFファイルなどでもリンクのクリックでファイ
【初心者向け】HTMLとは？何が作れる、学ぶ意味があるのかを徹底解説！ | Skilled Magazine | Vue.js オフィシャルパートナー
キャリア2020.06.162021.02.18Yuki 【初心者向け】HTMLとは？何が作れる、学ぶ意味があるのかを徹底解説！ WEBプログラミングを学ぶ入り口としてほとんどの人が最初に学習するといわれるのが『HTML』です。 しかし、プログラミングを勉強したばかりの方は 『HTMLの意味が分からない』 『HTMLを覚えて出来ることはなに？』 など難しく感じているのではないでしょうか。 今回はそんなプログラミング初心者の方に『HTMLとは？』『HTMLを学ぶメリット』などについて分かりやすく解説していきます。 HTMLとは『Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）』の頭文字をとった略称で、ウェブページを作成するために開発されたマークアップ言語です。 普段あなたがChromeやsafariなどのブラウザで目にしているWebページは全
HTMLエディタを自作！「簡易的なHTMLエディタをhtml/css、javascriptで作成する方法」
現在、自作でホームページのCMSを作成しているのですが、記事作成画面となる「エディタ画面」も自作してみましたので、ここでまとめておこうと思います。 先に画像を貼っておきます。下のような簡易的なやつになります。 htmlのtextarerが入力画面となっていて、隣にあるdiv要素で作ったboxに入力した内容が反映される感じになってます。 Ajaxのような非同期通信にも見えますが、そんな高度な事はしておらず、javascriptのkey up関数で、キーボード入力が検知（キーが上がった瞬間）されれば、textareaの内容がdiv要素に渡されるだけの、簡易的なプログラムになります。 簡単なHTML/CSSとjavascriptで作成できるので、しょぼいですがなにかの参考になれば幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset
急がば回ってみる 自作ツール作成のすすめ~ nodeを使ったHTMLデータ収集ツール ~
誰も怒らないなら、ダイレクトお鍋（鍋から直接料理を食べてしまう）をしてしまう コーダー兼ズボラの小宮山です。 今回は自作ツールの紹介とその記録です。 玄人感はないので、あしからずご了承ください。 ご指摘のポイントたくさんあるかとは思いますが、楽しく作ったんだと感じてもらえれば嬉しいです。 ※すぐにツールを使いたい方は、こちらのアンカーリンクから読んでください。 ある日ふいにきたミッション きっかけの２択 ある日の忙しい１日ことです。 「40ページくらいサイト内の情報をページごとにエクセルデータにまとめたい」 というミッションを部内のディレクターから託されました。 ズボラな僕は、この作業がコンパクトに終わる最善の方法を考えはじめます。 そこで、最初に、Webでいろいろと検索し、すでに有益な情報をあげてくださっているみなさんのお力を借りることに。 情報をまとめてエクセルで出すツールはないだろう
shirasugohan0141のブックマーク / 2022年8月10日 - はてなブックマーク
初心者向けにJavaScriptで「Cannot read property 'プロパティ名' of undefined」というエラーが出る原因と対処法について現役エンジニアが解説しています。undefinedとは中身が設定されていない変数にアクセスしようとした場合に発生するエラーです。if文などで判定し対処できます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで「Cannot read property ‘プロパティ名’ of undefined」エラーが出る原因と対処法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで「Cannot read property 'プロパティ名' of undefined」というエラーが出る原因と対処法について現役エンジニアが解説しています。undefinedとは中身が設定されていない変数にアクセスしようとした場合に発生するエラーです。if文などで判定し対処できます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでselectオブジェクトの値（value）を取得する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでselectオブジェクトの値（value）を取得する方法について現役エンジニアが解説しています。selectタグはフォームの部品で、JavaScriptで要素オブジェクトを取得すると選択項目の値を取得することが出来ます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptでselectオブジェクトの値（value）を取得する方法についてテックアカデミーのメンター（現役エンジニア）が解説しま
【ざっくりわかる！】JavaScriptでできること15選 まとめてみた
JavaScriptはWebサービスやWebサイトで使われるプログラミング言語だ。 主に動きのあるユーザーの画面を作るときに使われる。カーソルを当てるとメニューが開いたり、ボタンをクリックすると動き出すページには基本的にJavaScriptが使われている。 しかし、実はJavaScriptでできることはそれだけではない。様々な分野で活躍するプログラミング言語だ。 このページではJavaScriptでできることを初心者の方向けにまとめてみた。JavaScriptに関心がある方は参考にしてみてほしい。 JavaScriptというプログラミング言語の特徴とは？ できることを紹介する前に、JavaScriptの特徴を見ておこう。 JavaScriptとはInternet ExplorerやChromeなど、インターネットを見るブラウザというソフトの上で動くプログラミング言語だ。 画像が横に動くスラ
完全カスタマイズOK！ブロックスタイルのテキストエディタを開発可能な「Editor.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Mediumなどにも採用されているブロックスタイルのテキストエディタを開発できるJavaScriptライブラリをご紹介します！ ヘッダー要素・リスト・画像など、それぞれのコンテンツを独立したブロックで管理することができ、保存時の出力はクリーンなJSONデータとして取得することができます。 また、簡単に開発できるプラグインにより、欲しい機能を好きなだけ拡張していくことも可能なので、オリジナルのテキストエディタにご興味ある方はぜひ参考にしてみてください！ なおpaizaラーニングでは、JavaScriptの基本が学べる講座「JavaScript入門編」を公開しています。そちらも合わせてチェックしてみてください。 【 Editor.js 】 ■「Editor.js」の導入方法 それでは、最初にEditor.jsをどのように使えばよいのかを見て
JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】
はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト 本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式
【JavaScript入門】コピペで簡単！サンプル集紹介と活用法 | 侍エンジニアブログ
こんにちは！ ライターのナナミです。 JavaScriptの勉強、はかどってますか？プログラミングの勉強ってなかなか大変ですよね…。かく言う私も、覚えるときはものすごく苦労しました。 そんな私を救ってくれたのが、数多くのサンプルコードです。これを活用することで、ノンコーダーだった私も今ではプログラムをべしべし書いています。今回はそんなサンプルコードをまとめてくれているサイトや、サンプルの活用方法を解説していきますよ！ この記事は下記の流れで進めていきます。
JavaScriptでできること9選！できないことと作品例を紹介
利用環境を選ばない 「クロスプラットフォーム」と呼ばれる様々な言語や動作する状態に変換するツールが多く存在しています。 クロスプラットフォームとは、異なるプラットフォーム（Windows、macOS、linuxなど）で同じ仕様のプログラムを動かせるプログラムのこと（Wikipediaより） そのため、JavaScriptを使ってWebサイトを動きのあるものにしたり、スマホアプリを作ったり、ゲームを作ることなど様々なことが実現できます。 オブジェクト指向 オブジェクト指向という考え方によってわかりやすいプログラムを組めるようになります。オブジェクト指向を簡単に説明すると、オブジェクトを１つのものとして考え、プログラムを組み立てていくような考え方になります。 また、複数人で１つのシステムを開発することも容易です。 これによって、機能の追加や機能の仕様変更も簡単にできるようになります。 ここから
JS メーラー起動 | キプレ - UIサンプル紹介
HTMLではmailto:でリンクを作るとデフォルトのメーラーが立ち上がり、メールを送るよう促すことができます。 しかし、meilto:で書かれたメールアドレスは迷惑メールの標的になる可能性があると言われています。 そこで対策としては、まずmailtoを使わずにフォームを作って、サーバーサイドでメール送信を送信することがお勧めされます。 ですが開発リソースが割けないこともしばしば…。よくある代替案としてメールアドレスを画像で書くこともあります。 画像にしてしまえば、ボットに拾われる可能性は下がりますが、メールを書く側はやはり不便です。 そこでメーラーを立ち上げあげるボタンをJavaScriptで記述した例を紹介します。 やっていることはmailto:と同じですが、メールアドレスを多少分割して書くことで多少免れる可能性が上がります。ユーザーもメールアドレスを書く必要がありません。 サンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで要素を左寄せ・中央寄せ・右寄せする方法
GitHub
localhostへの接続が拒否される