【javascript】レスポンシブ対応のクリッカブルマップをプラグインを使わないで実装する
どうも、今回はタイトルの通りですが、クリッカブルマップをレスポンシブ対応させる必要がある時って意外とありますよね。特に地図系とか。 それで、「クリッカブルマップ レスポンシブ」とかで検索すると大体jQueryのプラグインを使って対応するという記事がずらーっと出てくるわけです。。ただ、最近はvue.jsやangularとか脱jQueryの動きも活発なわけで、そんなjQueryのプラグインなんか使いたくないという需要が少しはあるのかなと思うので、プラグインなしでレスポンシブ対応のクリッカブルマップの実装方法を紹介したいと思います。 実装概要 まず、今回の実装方法の概要を簡単にまとめます。 日本地図をクリッカブル 今回はこちらの日本地図の画像をサンプルとして、それぞれの地域をクリッカブルエリアにしていきたいと思います。 多角形（poly）パスを使用 クリッカブルマップには「rect」、「circ
JavaScript の第一歩 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
よくわからないJavaScriptが綺麗にされたらCard Stealerだった件 | Recruit Tech Blog
こんにちは、Recruit-CSIRTのきっかわです。 「ウィルスオタクの若手エース」と呼ばれるようになったから、というわけではないでしょうが（笑）、このたび、話にはよく聞くが見かけたことのなかった「クレジットカード情報を盗むJavscript」を見つけたので、そのマルウェアと周辺の攻撃について情報を共有します。みなさんにとって本ブログが有益な情報になれば幸いです。 忙しい方へ 今回発見されたJavaScriptの概要 クレジットカードのチェックディジットの計算とクレジットカード番号の構成をチェックする チェックが通ると、外部サイトへ入力情報を全て送信する Javascriptコードの仕込まれ方 Webサイトのjsファイルを改ざんして動作 元のサイトの動きに対して、見た目上の動きは変わらない IOC https://ww1-filecloud[.]com/img 攻撃の流れ 今回観測した攻
Opalとは(2018年版) - Qiita
OpalはRubyのコードをJavaScriptに変換するコンパイラです。Opalを使うと、Rubyのプログラムをブラウザ上で動かすことができます。 Opal: Ruby to JavaScript Compiler Opalの用途 ブラウザで動くアプリケーションをRubyで書けるよ、というのが主な用途になります。JSでいいじゃん、という人には訴求しないですけど…、Rubyをブラウザでも使いたい、という人にはとても良くできているツールだと思います。筆者はJSも書けなくはないですがRubyが一番長く使っていて手に馴染むので、Opalの可能性には期待しています。というだけではなくて、DXOpalというゲームフレームワークと、OvtoというWebフレームワークを実際に作って使っています。 Opalでゲームプログラミング DXOpalは筆者が作ったゲームフレームワークです。Rubyist Maga
無限アラートはブラクラではない - Qiita
まずこの記事はChrome最新版に基づくものです。その他のブラウザの情報や検証結果などありましたらコメントいただけるとありがたいです。 今回の無限アラートがブラクラだとして、不安を煽るような記事が多数存在しており、もちろんエンジニアなら簡単にわかることですが、その会社の影響なのかブラクラだと勘違いする人が自分の観測範囲に多くいたので、なぜブラクラではないのか技術的な観点から検証していきたいと思います。 まずブラクラ（ブラウザクラッシャー）は広い意味で使われているので、齟齬が無いようにこの記事内での言葉通りブラクラはブラウザをクラッシュさせるものだと定義します。実際にブラウザがクラッシュする他に著しく不安定になったり、正規の方法で閉じれなくなるようなこともクラッシュに含め、ブラウザのバグに起因するものは除外するとします。 無限アラートがブラクラではないことを検証する前に、ブラクラがどんな物な
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
スッとスライドを作れ！
とつぜんですがみなさま．大急ぎでスライドを作る必要に迫られたときどうしておられるでしょうか． 先日，わたしもそんなような感じになったので，どうやってやり過ごしたのかを紹介します． 環境 基本的にはUbuntu 18.04で作業しますが，発表はmacOSあるいはWindowsで行わなければならないかもしれません． 時間がないのでちょちょっと書かないといけません． 高価なソフトウェア（およびそのライセンス）は所持していません． 現代人として版管理はしますよね？ 要望 ようするに，まずはクロスプラットホームを望みます．というより，プレーンなテキストとして書く→なにがしかの処理をする，という感じであれば，動作する環境は限定的であるとしても，スライドの作成自体はいつでもどこでもできそうだなぁという感じでしょうか． テキスト自体はやはりAsciidocで書きたいというか書くべきというかそう思います．M
極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiita
やりたいこと データを変形・加工するスクリプトをURL上にホストをして、 ポータブルで永続的でブラウザで完結するWebアプリを作れるようにします！ Rubyはデータ加工に最適！ Rubyは豊富なメソッドが標準で用意されていて、特にArray, Enumerator, Stringなどよくデータを加工したいときに使えるメソッドがとても豊富です。 メソッドチェーンでつなげていけるところが、人の思考にあっていて、どんどんデータを変えていけるところがRubyの良さだと思います。 そのためデフォルトの言語はRubyです。JavaScriptもオプションで選べるようになってます。 そこで、 データ加工に便利なRubyで書いた小さいWebアプリをURL上にホストします！ URLにすべてのコードを載せてしまえば究極的にポータブルなWebアプリになるのではないかという発想です。Itty.bittyにインスパ
GASを使って運転日報のWEBシステムを作ってみた話
GASでこんな事が出来るよ。という一例として書かせていただきます。 事の成り行き 事の始まりは、ある飲み会の時に自社の営業部門のマネージャ（M）から言われた一言。 M「あのさ。今、うちって社用車を使ったら紙に運転日報を記録して管理してるじゃん？それをやめようと思ってスプレッドシートで管理しようとしたんだけど、毎回スプレッドシートにアクセスして記入するのって億劫だしiPhoneからだと入力しにくくて。。。なんか良い感じに、アプリケーション作ってくれない？」 私「あ、なるほど。ならGsuite(google)だけで完結する、アプリケーション作りますよ。ちょうど明日から出張だったんで、行き帰りの新幹線の中ででも作っときますね。」 という事があり、運転日報をGASで運転日報を作りました。 まずは、完成して現在運用している画面を見てください。 後半で画面の全体と説明を行いたいと思いますが、このような
【両OS対応】 React Nativeで爆速プロトタイプアプリを作ろう 1/3 【ウェルカム画面編】｜川西発之
※※※※※ 本記事は2018年5月に執筆されました．当時の React Native の環境から変わっている部分もありますので，2020年5月より記事の値段を大幅値下げすると同時に，記事更新や質問等のサポートの対象外とさせて頂きます． m(_ _ )m 1/3 【ウェルカム画面編】：799円 → 199円 2/3 【ホームタブ編】：899円 → 299円 3/3 【プラスボタン編】：999円 → 399円 ※※※※※ 1. ウェルカム画面編 ← 今ココ 2. ホームタブ編 3. プラスボタン編 note.muの中の方からもコメント頂けました！ありがとうございます！ ↑このシリーズの最終完成形 ↑この記事での目標 この記事で得れる物・上図のスマホアプリが作れるようになる ・React Nativeの流れを図で直感的にわかる ・なぜこのようにプログラミングをしたのかまでわかる この記事の対象者
Electronアプリを公開するまでにやったことノウハウまとめ - Qiita
利用したもの Git npmパッケージでgithubからURL指定でリポジトリから取得してくる時に利用する node.js electronのnode.jsはnpm時に自動的にインストールされる npmをインストールしたり開発向けデバッグ起動に使うものでバージョンは神経質になる必要は無い yarn npmより超高速にインストール出来る npm-shrinkwrap.jsonにあたるyarn.lockがデフォルトで生成されるのでバージョン固定化・統一がしやすい npm install -g yarn yarn && cd src && yarn 本プロジェクトではルートにはelectron他、デバッグ、ビルド用devDependenciesを、実際にパッケージングされる場合に必要なnode_moduleはsrc以下にpackage.jsonを作成しdependenciesに追加して無駄なno
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
コーディング作業は無しで、デスクトップ・スマホ向けのテンプレートをすぐに構築できる次世代ツール -GrapesJS | コリス
HTMLやCSSのコーディング作業は無しで、デスクトップ・スマホ向けのさまざまな種類のテンプレートをすぐ簡単に構築できるフレームワークを紹介します。 ランディングページはもちろんのこと、CMSにも使用できるように設計されており、オープンソースとして利用できます。 普通のページビルダーのように見えますが、実際にはより多くの機能を備えています。 CMSもサポート テンプレートを簡単に作成できる Webサイト、スマホアプリ、HTMLメールなど、HTMLベースのテンプレートを素早く簡単に作成できます。 レスポンシブ対応 レイアウトのベースはFlexboxで、デスクトップ、タブレット、スマホに完全対応。 CMSをサポート 動的テンプレートの作成をスピードアップするためにCMS内部で使用できるように設計されています。 HTML, CSSのコーディング作業は無し コーディング作業は一切無しで、テンプレー
JavaScriptのXHRの送り方いろいろ: XMLHttpRequest, fetch, async/await - Hack Your Design!
JavaScriptのXHRの送り方いろいろ: XMLHttpRequest, fetch, async/await 目次 前提1. XMLHttpRequest モダンな書き方にしてみよう！2. fetch API3. fetch + async/await結論（おまけ）babelで使う場合参考JavaScriptのXHR(XMLHttpRequest)の送り方は１つだけではありません。モダンなXHRに向けてそれぞれのHTTPリクエストの送り方を比較・検討してみます。 前提jQuery, superagent, axiosなどのAJAX系ライブラリは使用しないこととする。検証に使うブラウザは最新版のChrome (現在はVersion56.0)今回リクエストを送る先は仮想的に下記のURLとする
「Webサイト用」モダン開発環境の考察 - Qiita
社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。 なんとなくで読んでください。 Index 「Webサイト用」モダン開発環境 パフォーマンス施策 Webサイト制作において必要な条件 モダンな技術を採用しつつ、今までの案件で使える SPAではなくWebサイトに対応 HTMLファイルが各ページで存在している head内の情報が直接書かれている きれいなHTML minifyされていない Nuxt.jsのgenerateみたいに、最適化されすぎていない 変えたいもの 脱Gulp Gulp -> npm scripts（タスクランナー） Gulp -> webpack（バンドラー、トランスパイラー） jQuery -> Vue.js & Vanilla.js ES2015+ -> TypeScript（Classベース） EJS -> Pug 脱Gulp（Gulpをや
2018年の最先端フロントエンドエンジニアになろう - Qiita
フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて
フロントエンドの必要性について
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptが辿った変遷 - Qiita
Vue.jsとFluxで実現するラピッドプロトタイピング - Qiita