【ブックマークレット30選】SNSシェアや翻訳が1タップ！スマホが快適になる便利機能まとめ
スマホを使っている方で、現状のブラウジングに不満はありませんか？例えば、気に入ったWebページをSNSにシェアしたい時に限ってシェアボタンが無くて困ることや、海外のWebページを読むときに翻訳サイトに遷移しながら読まなければならないなど…。 そんな時、ブラウジングを快適にしたい時に役立つのが「ブックマークレット」です。今回は、かゆい所に手が届くような便利機能を持つ「ブックマークレット」を30種類ご紹介します。 ブックマークレットってなに？既に活用している人もいるかもしれませんが、ブックマークレットの説明を簡単にします。ブックマークレットとは、ブラウザのブックマークボタンから「Twitterにシェア」や「WebページのタイトルとURLを表示」などの機能を呼び出せるものです。 ブックマークのURL登録画面にJavaScriptのコードを挿入することで機能するようになります。Webサービスと連携
第2回 Reactの何がエンジニアを夢中にさせるのか | gihyo.jp
【話し手】 うひょ（本名：鈴木 僚太 SUZUKI Ryota） TypeScriptとReactを愛するフロントエンドエンジニア。Web標準も好き。技術記事を書くのが趣味。 GitHub：uhyo Twitter：@uhyo_ URL：https://uhy.ooo/ 技術分野は成熟が進み、新しい領域が急激に増えています。本コーナーでは技術へのタッチポイントを増やすことを目標に、各分野で活躍されている方をお迎えします。 今回はWebを超えてモバイル分野などでも受け入れられつつある宣言的UI（User Interface）をテーマに選び、フロントエンド分野で活躍されている「うひょ」さんに普及のきっかけとなったReactの魅力を余すところなく伝えてもらいます。 Reactの特徴って？ 日高：知らない人にReactを説明するとしたら、どんな特徴がありますか？ うひょ：理解のためのキーワードが2
【初心者向け】Angular とは？メリット・基本をわかりやすく解説 - カゴヤのサーバー研究室
SPAをはじめとするWebアプリケーションの開発において、昨今ではJavaScriptのフレームワークやライブラリが注目されています。Google社が開発に携わったAngularは、その中でも特によく使われているJavaScriptフレームワークです。 この記事では、Angularの特徴や利用時の注意点についてわかりやすく解説しています。その上でAngularのインストール方法や学習方法も解説しているため、これからAngularを学ぶ方は是非参考にして下さい。 Angularを含め、注目されているJavaScriptフレームワーク（ライブラリ）の種類とそれぞれの特徴については以下記事で紹介しています。 【入門】Node.jsフレームワークの選び方とおすすめ10選 Node.jsを利用する開発者は増え続けており、Node.jsフレームワークも膨大な数が公開されています。そのなかで、どれが最適
お手軽URL偽装 - Qiita
表面上は正規のURLを見せておいて実際にリンクを踏むと別のところに飛ばすのってどうやってやるのかなと思って実装してみたら案外あっさりできた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>URL偽装</title> </head> <body> <a href="https://www.google.co.jp/" data-real-url="http://www.yahoo.co.jp/">https://www.google.co.jp/</a> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script> <script type="text/javascript"> $
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
期限内の場合はクッキーを上書きしないようにする方法 - OKWAVE
a-site.comとb-site.comとc-site.comの全ページに下のようなJavascriptを埋め込んでクッキーを残そうとしています。 <script type="text/javascript"> <!-- var name = "iriguchi"; // クッキーの名前 var value = "a-site"; // クッキーの値 （サイトごとに変える） var period = 30; // 有効期限(分) // 有効期限の作成 var nowtime = new Date().getTime(); var clear_time = new Date(nowtime + (60 * 1000 * period)); var expires = clear_time.toGMTString(); // クッキーの発行（書き込み） document.cookie = n
AngularJS ― Superheroic JavaScript MVC Framework
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement. Visit angular.io for the actively supported Angular. Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resu
JavaScriptのdocument.cookieを使用してクッキーを書き換えた場合、スクリプトの実行前と後にdocument.coo... - Yahoo!知恵袋
JavaScript の document.cookie を使用してクッキーを書き換えた場合、スクリプトの実行前と後に document.cookie で得られる値は、常に異なるのでしょうか？ JavaScript の document.cookie を使用してクッキーを書き換えた場合、スクリプトの実行前と後に document.cookie で得られる値は、常に異なるのでしょうか？ 下記のようなスクリプトを作成し、動作を確認してみました。 ※ブラウザ: IE8、FF3.6、Opera10、Safari5 ※OS: Windows XP 上記の環境で確認したところ、スクリプトの実行前と後に得られる document.cookie の値（実行前: cookieA、実行後: cookieB）は、全てのブラウザで一致しませんでした。 しかし、他のブラウザ/バージョンやOSでは document.
未来のJavaScript『ECMAScript6』で便利そうなやつまとめてみた - Qiita
そろそろECMAScript6を触っておきたいと思っていたところ、runstantとか言ういい感じのWebエディタが出たのでメモ。よく使いそうなやつをまとめてます。 (ECMAScript6は、ES6, ES.next, Harmonyなんて言われることも多いです) (現在スマホでサンプルのコードが見れないようなので、PCやタブレットで見てください) 便利そう順にサンプル 今までなぜなかった let const -> 環境依存だけどあるにはある デフォルト引数 クラス 継承 2進数とか直接書く すぐに覚えて使いたい アロー記法 アロー記法注意点 keyで演算を使用 メソッドの記述を簡略化 オブジェクトリテラル簡略化 文字列内で変数を展開 覚えたら便利そう for...of 分割代入(デストラクチャリング) 可変長引数 配列を展開して引数に渡す 可変長な変数の展開 -> 若干かぶる イテレー
IEでjavascriptを使ってhrefの値を取得する際の注意点 - 生涯一マークアップエンジニアだっ！！
http://q.hatena.ne.jp/1213063487 以前にもハマったんですが、ブックマークしてなくてまたハマった。 腹立ったので（自業自得だけど）二度と忘れないようにアウトプットしておく。 下記のようなHTMLで <div> <p><a id="iyayo" href="sukinouti.html">いやよいやよも好きのうち</a></p> </div> hrefの値を取得しようと思うと、以下のようなjavascriptで取得できる。 var iyayo = document.getElementById('iyayo'); var iyayo_href = iyayo.getAttribute('href'); alert(iyayo_href); Firefoxとかだとこれで問題なく「sukinouti.html」がアラートされるんだけど、 なぜかIEだとhttp://
JavaScriptでできること・できないこと
さまざまなプログラミング言語がありますが、プログラミングそのものに触れてみたいと思うならJavaScriptをお勧めします。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できるのです（編集部） プログラミングを学びたいと思ったら 皆さんは、JavaScriptというと何を思い浮かべるでしょうか。 Webで動的なユーザーインターフェイスを実現するための技術でしょうか。それとも、オブジェクト指向のスクリプティング言語でしょうか。JavaScriptというキーワードを聞いたことがある程度という方もいるでしょう。 JavaScriptは現在多くのWebブラウザに搭載され、さまざまな場面でWebの中核技術を支えているスクリプティング言語です。 本連載は、プログラミングを初めて学ぶ人を対象にしたJavaScriptの入門記事です。特に次のような方のために分かりやすく解説を行っていきます。
Levenshteinenator
Enter two strings in the fields below, then click “Levenshteinenate me!” The Levenshteinenator will then compute the Levenshtein distance between the two strings. To see my JavaScript implementation of the algorithm, take a look here. String A [ Bambi, gumbo, hahaha ] String B [ Godzilla, gamble, ahahah ] Distance Elapsed Time (ms)
Google+、Facebook、Twitter などのソーシャルボタンセットいろいろ
現在、ブログや投稿を Google +1 や Facebook「いいね」、Retweet してもらうためのボタンがいろいろと公開されています。Blogger 関連のつぶやき（ネタ帳とも）の中にも、この手のガジェットの話題が増えてきたように思うので、ここで一挙公開しようと思います。 ローソンガジェット ローソンガジェット｜エンタメ・キャンペーン｜ローソン で、公開されているローソンの PR 用ガジェット。Twitter、Facebook、はてなブックマークのボタンがブログの左側に並びます。選択できる色のテーマは 6 つ。いろんな配色のブログに対応できるんじゃないでしょうか。 導入方法については、かずうさんがまとめてくれていますので、リンク先からご確認ください。 かずうの気まま日記: 【ブログパーツ】『ローソンガジェット』設置で３つのお得を体験する！（LAWSON GADGET） Awesom
マウス座標を取得する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 マウスポインタのページ内座標を取得するJavascript。 Opera 9、Safari 1.2、IE 5-7、Firefox 2で確認済み。 onmouseX: onmouseY: Script function setPosition(){ target = document.getElementById('sampleform'); window.document.onmousemove = function(e){ target.onmouseX.value = getMousePosition(e).x; target.onmouseY.value = g
JavaScript プログラマの職種は4種類くらいに分けるべき
jser.md はじめに JavaScript を使っていると「JavaScript出来るの？ jQuery / AngularJS / Node.js etc... で困ってるんだけどさー」みたいな話を振られることがあります。 そういった時に、自分は一般的なライブラリの使い方やフレームワークに対して大した知見も興味もないので、わざわざ説明するのも面倒なのでこうして文章にしておきます。(本当に届いて欲しい人に限って、こういう文章が届かないのはわかっていますが、文章を書くこと自体が気晴らしだと思って諦めます。) 「フロントエンドエンジニア」という言葉の汎用性 先ほどのような話は自分に限ったことではなく、たぶん経験のある人も多いでしょう。 振られた話が自分の分かる範囲、あるいは興味のあるものならばまだ良いのですが、そうでないことがあまりに多すぎます。 話を振られるだけならともかく「JavaSc
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
はてなブログが遅いのはだいたいJavaScriptのせい - もふぬこ動画☆画像
はてなブログって重いですよね～・・・ ブラウザ変えたら早くなるかなと思ってIE11、Firefox、Google Chromeで計測してみたけど、どれもそんなに差は出なくてどれも遅い（苦笑） いったい何が原因なのかなと調べていったら、JavaScriptのせいでした。 「もふぬこ戦記」のトップページを計測しました。 使用したのはGoogle Chromeのデベロッパーツール。 条件はJavaScriptオン、キャッシュオフです。 12.84秒でした。 次にキャッシュをオンにしてみます。 8.38秒です。 次にJavaScriptをオフ、キャッシュをオフにしてみます。 3.48秒！ キャッシュオンの場合・・・ 746ミリ秒 JavaScriptをオフにするだけでサクサク快適動作します！ 星つけたりできなくなるんですけど・・・（´～｀；） ・・・あれ？JavaScriptエラー出てる気がするけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/alphardex/pen/dyPorwJ
GitHub - idiot/Fool.js: An assorted collection of JavaScript-based shenanigans.
JavaScriptプログラミング講座【マウスの操作について】