Chrome でビルドする Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。
document.execCommand('copy')ただしこの処理には前提条件があって、コピーされるのは「処理実行時に画面上で選択しているテキスト」に限られます。つまりこのメソッドだけでは、任意の文字列をコピーさせることはできないのです。 そこでこの機能を拡張して、引数で渡した文字列を擬似的に選択状態にしてコピーさせる関数を用意しました。 JavaScript で任意のテキストをクリップボードにコピーする関数この関数を実装する上でのポイントは、裏で文字列を選択するためのコピー用テキストエリアを一時的に作ることです。ここにコピー対象文字列を出力し、JavaScript で選択状態にすれば冒頭のコピーメソッドを実行することができます。 そしてコピーが完了したら、作成したテキストエリアを削除します。プログラム処理においては一瞬の出来事なので、画面上にテキストエリアが表示されるのを目視すること
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
What is Packery? Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries. Try it out! Instal
これは scouty Advent Calendar 2018 の11日目の記事です。 2018/12/18追記： 続きができました。 Font AwesomeとJavaScriptでシューティングゲーム（その２） はじめに Font Awesomeのサイトを眺めてたらゲームで使えそうなキャラクターがいっぱいあるなあと思ったので作ることにしました。 今回は、シューティングゲームを作ります。まずベタ書きで作ってみて、それをクラス化するところまでやります。 面倒だったので最初は慣れているjQueryを使っていますが、後ほどバニラなJavaScriptに書き換えます。 GitHubリポジトリ: https://github.com/naga3/font-awesome-shooting アジェンダ ベタ書きでとりあえず作る クラスを使って整理する jQueryの使用をやめる ベタ書きで作ってみる
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前置き（とばしてください〜） めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職（まだ2週間前の話） こんな感じです。 フリーランスのときは（今もまだ仕事はちょこちょこ受けてますが） 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成（UXライター的な）、プ
この記事は TIS Advent Calendar 2017 16 日目の記事です。 Clojure を仕事で使い始めてから三年が経ちました。未だに学びが多いですが、年数的には中堅 Clojurian と言える域に達してしまったので、自分なりの Clojure 観を整理したいと思い立ちました。自分にとって Clojure の最大の魅力は高速開発です。そしてそれは Clojure 自体の習熟難度と秤にかけても十分魅力的だという話を書きます。 どちらかと言えば Clojure 勉強し始めで、このまま進んでいいか迷っている人向けの内容です。 この記事は2017年時点での内容です。更新版・続編 → キメる Clojure チーム開発 そもそも Clojure とは 時は 2053 年、Skynet が人類を虐げる世界。エージェント Meier は Skynet のログにアクセスすることに成功し、S
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
「Laravel」でReactデビューしてみよう！ Laravel + Reactのセットアップ Laradock などで「 Laravel 」をセットアップしてください。 ブラウザで http://localhost にアクセスすると、Laravelの初期画面が出るようになっている状態から始めます。 この状態では、Bootstrap + Vue.js が利用できるようにセットアップされています。 これを React に変更します。 （ workspace コンテナ内） $ php artisan react React scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. 自前でセットアップしたい場合は、下記のコマンドでフ
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
Clojure Scriptとは 先日、Clojure Scriptという技術が発表されました。 Clojure Scriptとは「Clojureで書くことができるJavaScript」です。 Coffee Scriptと同じように、Clojureで記述したファイルをコンパイルしてjsファイルに書き出します。 Clojure自体よくわからない人もいらっしゃるかと思いますので、順番に説明していきます。 Clojureとは？ みなさんはClojure(クロージャー)という言語をご存知でしょうか？ Clojureとは、JVM上で動作するLISP系の言語です。 最近はHerokuでサポートされたりして、知名度があがりつつある言語です。 Clojure言語自体の説明については、Clojure公式サイト※1や、Clojure入門記事※2などを参照してみてください。 Google Closureとの関係
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
前編では、Elm言語の基礎とFRPのエッセンスについてコードを通じて学びます。 後編では、実際にElmを使ってアプリケーションを作る方法と、その際に重要になるアーキテクチャを学びます。 なお、執筆時点でのElmのバージョンは0.15.1です。 注意！ Elmはバージョン0.17で大きな変更がありました。現在は「関数型リアクティブプログラミング」のための言語ではありません。 参考：A Farewell to FRP（さらば FRP） また、言語自体のシンタックスやライブラリのAPIも以前とは大きく変わっています。これからElmを始める方は、必ず公式ドキュメントを参照してください。 公式ガイド FRPとは何か リアクティブプログラミングの直感的な説明としてよく挙げられるのが、Excelのような表計算ソフトです。 例えば、セルの間にC1 = A1 + B1という関係があるとします。 このように宣
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback 一般的に言うと、関数とは外部 (再帰の場合は内部) から 呼び出す ことのできる「サブプログラム」です。プログラムそのもののように、関数は関数本体 (function body) と呼ばれる連続した文で構成されます。値を関数に渡すことができ、関数は値を返すことができます。 JavaScript に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く