【※重要！】地図ツール改良版作りました www.procrasist.com この記事をサラッと見た後に、↑のに行くとすんなり見られると思います。なかなか出来は良いと思いますので是非是非！ こんにちは、ほけきよです。 先日へそちゃさん(id:hesocha)がステキな固定ページの使い方を紹介してました。 www.hesocha.com おっ、これは良い。 と思い、導入を検討。 今回は、 (わかれば)自分でいろいろといじることが出来る オシャレ という理由から、javascriptで地図表示を試みて見ました。 しかし、雑魚なので色々と手詰まりなところもあったり... この辺の知見がある方は、教えてください👶 javascript, jQuery初心者ですので、もっといい方法があるよという人は優しく教えてください。 オシャレですが、動作は遅くなりそう。 オシャレなjQueryのMapライブラ
どうも、まさとらん（@0310lan）です！ 今回は、人工知能を活用した高度な画像解析を、簡単なJavaScriptコードで実現できるWebサービスをご紹介します！ 画像に写っている「顔」を認識させて、その人物の「感情」を読み取ったり、顔の座標データを取得するようなことが簡単にできるのでオススメです。 【 Kairos 】 ■「Kairos」の使い方！ それでは、実際に「Kairos」を使いながら、どのような画像解析ができるのかを見ていきましょう！ まず最初に、以下のリンクからユーザー登録を済ませておきます。 【 ユーザー登録ページ｜Kairos 】 メルアドやパスワードなどを登録するだけで、誰でも利用可能です。（登録したメルアドにリンクが送られてくるので、それをクリックしてログインします） ログインしたら、自分専用の「ダッシュボード」が表示されます。 画面下に、「App ID」と「Key
iPhone/AndroidのWebアプリで位置情報（GPS）が分かる JavaScriptとFirebaseでリアルタイムに位置情報を共有しよう（3） 「ポケモンGO」の大ヒットで、位置情報を利用したゲームが盛り上がりましたが、位置情報をゲームでしか使わないのは実にもったいないものです。最近では、大抵の人がスマートフォンを持っていますし、会社側で支給する場合でも、格安SIMを活用すれば維持コストも低いものです。そうであれば、これを営業活動や現場管理に活用できれば便利です。そこで、今回は、HTML5/JavaScriptから、スマートフォンのGPSを利用する方法を紹介します。 HTML5/JavaScriptでできること さて、スマートフォンのネイティブアプリの開発も手軽になっていますが、Webブラウザーから利用する「Webアプリ」は、開発が簡単なのが良い点です。Webサイトを公開するのと
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
どうも、まさとらん（@0310lan）です。 今回は、基本的なプログラミングに慣れてきて、「次に何しようかな…？」と考えている人に最適なWebサービスをご紹介しようと思います！ ブラウザから遊べる「ストラテジーゲーム（戦略ゲーム）」なのですが、自軍の兵士たちを自分でプログラミングすることで、自由自在に操作することができるという異色のサービスになっています！ 【 Empire of Code 】 プログラミング初心者向けではないのですが、PythonかJavaScriptの基本的な文法を把握している人であれば誰でも楽しめますよ！ ■「Empire of Code」の始め方！ それでは、実際に試しながら、どのようなサービスなのかを詳しく見ていきましょう！ まず最初に、サイトへアクセスして「START NEW GAME（ゲーム開始）」ボタンをクリックします。 すると、コミカルな漫画でストーリーが
毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。 デモページ Choreographer-js 「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。 デモページ Barba.js 通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加え
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
Googleが中心となって開発しているオープンソースのJavaScriptライブラリ「Angular」のイベント「ng-conf 2017」が、4月5日から3日間、米国ユタ州ソルトレイクシティで開催されました。 3日目の基調講演に登壇したGoogleのエンジニアディレクター Brad Green氏は、TypeScriptがGoogle社内の標準言語に採用されたことを明らかにしました。 この記事では公開されている動画から、基調講演のその部分を中心にダイジェストでまとめました。 2年掛かりでTypeScriptがGoogle社内の標準言語に Brad Green氏。Googleには社内の標準言語（Canonical Languages）としてC/C++、Java、JavaScript、Python、Goが設定されている。 なぜかというと、もし社内のプログラミング言語が15種類もあったら、プロジ
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
JavaScriptでは「継承による差分プログラミング」はモダンではない、という意見がありました。 なるほど、「継承による差分プログラミング」を使わないスタイルもあるんですね？（参考になります） JavaScriptのオブジェクト指向プログラミング OOPのアンチパターン SOLID原則 オブジェクト指向の基本機能 データ構造としてのオブジェクト デメリット メリット PACアーキテクチャー マイクロサービス指向アーキテクチャー JavaScriptのオブジェクト指向プログラミング jsstudy.hatenablog.com オブジェクト指向って便利なの？ - JavaScript勉強会 うへええええ継承による差分プログラミングとか現代に言わないでくれよ。しかも「JSはプロトタイプベースのOOP」を初めとして間違いが多いぞ 2017/03/27 09:42 b.hatena.ne.jp
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
この本の概要 JavaScriptやHTMLといったWeb系の技術でデスクトップアプリケーションを作成でき，Atomエディタ，Slack，Visual Studio Codeなど，近年話題となったアプリケーションに利用されているElectron。本書は，インストールからアプリの開発，テスト，パッケージング，セキュリティ対策まで，ひととおりの開発の流れをまとめました。「チャットアプリ」「Markdownエディタ」「キャプチャアプリ」の作り方をとおして，はじめてアプリを開発する人にもわかりやすく解説しています。 こんな方におすすめ Electronを使ってみたい人 Webの技術でデスクトップアプリを開発したい人 第1章 Electronとは何か 1-1 Electronの概要 Column クロスプラットフォーム開発について 1-2 ElectronとWebの技術の進化 1-3 Electro
アニメーションは、もはやホームページを作る上で必須の要素と言えます。 単調な動きをする静的なページは、ユーザーの興味がなくなった瞬間に離脱率が劇的に高まります。 一方、少しでもアニメーションを取り入れるだけで、親しみや好感を持つことができるので、ユーザーのホームページに対するエンゲージメントが高まりやすいと言われています。 今回は、眼球を捉えるようなユニークな動きをするアニメーションを簡単に実装することができるCSSやJavaScriptのライブラリをご紹介します。 10年前にはAdobe Flashを使わないと表現できなかったリッチな動きをするアニメーションも、短いコードで実装することが可能です。 ぜひ使いやすいライブラリを見つけてみてください。 ホームページにアニメーションを実装するライブラリ＆プラグイン12選 1. Animate.css https://daneden.github
このコースでは、JavaScriptの文法や概念を勉強し終えて実際に何か作ってみたい、という方向けに簡単なアプリケーションを作りながら実践的なJavaScriptの知識と書き方を学ぶことができます。 jQueryは使用せずにプレーンなJavaScriptでアプリケーションを作成するので、ライブラリに依存しない書き方を学ぶことができます。 文法やオブジェクトなどの概念が曖昧な方は、先に「JavaScript入門」コースを受講することをおすすめします。 ▼今回の授業を受けて作れるようになるもの（サンプル） http://yoshiko-pg.github.io/schoo/js/1-timer/
こんにちは、つばさ（@tsubasa123）です。 久しぶりにカスタマイズの記事を書いている気がします。今日はやろうやろうと思っていたものの、ついつい後回しにしてしまっていたカスタマイズをご紹介します。コピペでいけますので気になった方はお試しください。 サイドバーが気になった サクッと完成 JavaScriptの追記 CSSの追記 課題が2つほど さいごに 関連記事 サイドバーが気になった bulldra.hatenablog.com 今日のカスタマイズは上記サイトで紹介されているパンくずリストのカスタマイズを導入している人向けとなっています。当ブログでもお世話になっているカスタマイズです、ありがとうございます。 SEOとか詳しいことは存じませんが、このカスタマイズはやったほうがいい！とあちこちのブログで紹介されていましたので、私も結構早い段階で導入しました。 パンくずリストがいい感じに表
javascript。今やwebの表現になくてはならない存在で、デジマなフィールドで働く僕らにもかなり身近な存在ですが、今回は『JSでそこまでやれんの？！』『いやそれはおかしい！』と言わざるを得ない事例をあえてチョイスしてご紹介。 何が何でもjavascriptでやるんだ！やれるはずなんだ！うるせー黙ってろ！！とでも叫ばんばかりの熱いパトスをぜひ感じてください。 深層学習がブラウザオンリーで！まさかのJS駆動ディープラーニングエンジン『ConvNetJS』ConvNetJS：Source Ledgeでも以前各種のライブラリを紹介してきましたが、そのどれもがクラウドサーバ上で稼働しているもの。 なので、当然のように利用にあたっては通信が必要でした（ものすごく当たり前ですが） が、このConvNetJSはなんとjsベース。つまりクライアントPCの中で稼働してしまうとのこと。 もはや意味が分かり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く