仕事ですぐに使えるTypeScript - PDF版
TypeScript Future Corporation 2022 11 14 i TypeScript 1 3 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.2 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.3 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.5 . . . . . . . . .
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
ES2015(ES6) 入門 - Qiita
はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES
Firefoxで戻るボタンを押したときに前の効果が残ったままになる - Qiita
タイトルのことで少しハマったのでメモメモ。 検索ボタンなどを二重押しさせないようにJavaScriptの方で、一度押したらそのボタンを押せないようにしてた（もちろん検索後はPOSTするので元に戻る） IEでは問題なくこれで動くけど、Firefoxでは戻るボタンを押したときにボタンが押せないままになっている。 この原因はIEとかChromeはonloadイベントが呼ばれるけど、Firefoxでは呼ばれないために起こるっぽい。 なのでFirefox用に戻るボタン押下時やページ表示時に実行されるというpageshowを使って対応することにした。 /* * 検索ボタン */ $( document ).on( "click", "#Search", function() { /* 検索の処理とか */ /* ------------ */ document.body.style.cursor =
ページを半透明
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction. Usage is very simple; to block user activity for the page: $.bl
さいきょうの二重サブミット対策 - Qiita
この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！ 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
jQueryで簡単アコーディオンをつくってみた | 学び続けるweb制作者の独り言
学び続けるweb制作者の独り言 html・css・photoshop・illustorator・fireworks・php・wordpress・javascript・jquery WEB制作者は技術を学び続ける必要があり、(私の場合）覚えても使わなければ忘れてしまいます。 そんな時に思い出せるようにブログに書き留めたいと思います。自分のモチベーションアップと備忘録用のブログです。 2012年08月07日 かてごり：jQuery, つくってみたもの jQueryを使うと、隠しておきたい部分を非表示にして、クリックすると表示するようなアコーディオンと呼ばれるものが簡単に作れるということで作ってみました。開いた時と閉じた時の画像を変えています。デモはページの一番下にあります。 ソースコード <dl> <dt class="tasu">クリックします</dt> <dd> テキスト１<br>
レスポンシブなjQueryスライドショープラグイン2012年保存版
RefineSlide / Cycle2 / iosscripts.com &ndas...他...全18件
jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法｜BLACKFLAG
先日ここでレスポンシブ対応のスライドショーの試作品として 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題して jQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを 紹介しましたが、操作面に関してフリック操作には対応していなかったので、 メイン部分にフリック動作を追加してみたパターンを試しに作ってみたので紹介してみます。 レスポンシブ動作部分はブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法 サンプルでは6枚の画像を自動でスライド切り替えしています。 メインビジュアル部分をフリックすることで左右に移動させることができ 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り
Fancybox - Fancy lightbox alternative
This site is kept for historical purposes and represents original version of the Fancybox. Check out the latest - Fancybox v5 What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML elements, SWF movi
GoogleマップのMarkerClustererをフォトログに導入してみた – Simple Colors
フォトログで表示しているGoogleマップでは、表示している写真の撮影場所だけを表示して、他の写真のマーカーは載せてプロットしていませんでした。 これは、撮影場所が近いとマーカーが重なりゴチャゴチャになってしまうのがイヤだったからなのですが、先日コミュニティコムの @khoshino さんに、近い場所に複数のマーカーがある場合、まとめて表示してくれる MarkerClusterer の存在を教えていただいたので、早速導入してみることにしました。 まずは、get_postsを使って、緯度経度入力のある投稿を全件取得。 $photos = get_posts( 'posts_per_page=-1&meta_key=lat,lng' ); これを foreach でループさせて、複数のマーカーをプロットすると、当然ながら画像のように重なって表示されてしまいます。 マーカーがダブって見にくいし、
Google Maps APIとPicasaウェブアルバムのマッシュアップ
Google Maps APIブログの「Geotagged Picasa JSON/KML Output + Driving Directions = Instant Scenic Tours!」にあるPicasaウェブアルバムとのマッシュアップ（だけ）を早速試してみた。 →サンプル 公式のサンプルページでは、GDirectionや、toggle機能を備え付けているので一見すると、ちょっと複雑なコードなのだが、写真を貼り付けるだけならKMLファイルをオーバーレイするだけなので、実はものすごく単純な処理。 var albumKML = "http://picasaweb.google.com/data/feed/base/user/kadajp/ albumid/5078431287074407041?kind=photo&alt=kml"; geoxml = new GGeoXml(alb
Ajaxload - Ajax loading gif generator
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
[JavaScript] Google Maps API V3 で JSON/XML を読み込んで複数のマーカーを追加してみた | しゃけログ
JSONまたはXMLなどの外部データを読み込んで、複数のマーカーをGoogle Maps API V3 に追加してみました。 Google公式のリファレンスを参考にしました。 Google Maps JavaScript API V3 リファレンス バージョン3はIE6 サポート対象外なのでお気をつけ下さい。 JSONデータからMarkerを生成 JSONファイルを読み込んで、複数のMarkerをマップ上に追加してみました。 1. JSONファイルを読み込む Google Maps JavaScript API V3 から、XMLファイルの読み込み関数 と XMLパーサーのライブラリがなくなりました。 バージョン2でいうと、GDownloadUrl関数 や GXml.parse などです。 なので、jQueryでJSONファイルを読み込んでいきます。 map.json {"Marker":
すべての開発はJavaScriptに
企業システムのクライアントを開発するのに使う技術が変われば、IT部門に求められるスキルも変わる。最も大きな課題は、JavaScriptを使いこなすことだろう。これまで企業システムでは主役とはいえない開発言語だったが、今後は重要度が高まる。 JavaScriptを熟知することが必要 HTML5では、アプリケーションを制御するクライアント側のロジックは、JavaScriptで記述することになる。「本格的にHTML5ベースの情報システムを開発する企業には、HTML5とJavaScriptの両方を熟知した技術者が必要だ」と、NTTコミュニケーションズの小松氏はみる。 インターネットで入手できるHTML5用のオープンソースライブラリーもJavaScriptファイルが多い。例えばグラフを描画する「gRaphaël」や「Highcharts」などがある（図6）。これらは無料で利用でき、簡単なカスタマイズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript 今ドキな書き方 ES2020
http://blog.deontwikkelfabriek.nl/creating-a-population-pyramid-with-the-google-chart-tools/
WEBSITE.WS - Your Internet Address For Life™