Exif.js Exif に設定されている回転情報に対応したinput要素(画像)のプレビュー | バシャログ。
どうも藤原です。今年のGWは神がかってますね。弊社は5月1日が創立記念日ですので、 4月最終週は (^-^)です。 本日は 画像の Exif 情報を取得する Exif.js をご紹介いたします。 背景 input 要素に画像を添付した時に FileReader を使ってプレビュー表示していたんですが、 スマホで行うと撮影した画像とプレビューしてる画像の回転があってないことありますよね。 原因はExif (wiki)の回転情報です。 PHPで回転を戻して保存したりすることはあったのですが、JSでプレビューしているときも(POST前)正しく表示したいということです。 抜き出すには結構手間な作業必要なのですが、そんな時見つけたのがExif.jsです。 これで簡単に回転を取得できるようになります。 サンプル htmlは以下で、プレビュー自体の実装方法は input の label に対して bac
Headless Chrome を操るPuppeteer のご紹介 (Node ライブラリ) | バシャログ。
どうもfujiharaです。 寒さが気持ち和らいで春の訪れが楽しみです。最近まるちゃんのワンタンシリーズに ハマっていて、1週間で7個以上食べる異常ぶりです。痛風と健康診断が怖い。。 本日は前回ご紹介したHeadless Chromeを 簡単に操作できるNodeライブラリ Puppeteer をご紹介します。 GitHub のリポジトリで27000以上のstarを獲得(2018/02/02)している大人気のライブラリです。 説明はさておき使い方説明していきます。GitHub 準備 Nodeライブラリなので node が必要です。 バージョンはv6.4.0 以上と書いていますが サンプルではasync, await を使うので v7.6.0 をインストールしましょう。 サンプル ## sample.js const puppeteer = require('puppeteer'); (asy
Leaflet でカスタム画像を使用する (Javascript) | バシャログ。
どうもfujiharaです。 いよいよ今年も残すところ１ヶ月になりましたね。 毎年この時期になるともらえないお年玉に期待を寄せ始めます。 本日は地図で使用されるLeafletにカスタム画像を使用する方法をご紹介いたします。 Leaflet自体は 地図をカスタマイズして使えるようにする、軽量でマルチブラウザ対応の優れたJSライブラリです。 また、対応するプラグインも多くあり、皆さんも使ったことがあるかもしれません。 特定のポイントにピンを立てたり、オブジェクトをおいたりするのに緯度経度を使用するんですが、 調べているとカスタムの画像でその空間に対して各種Leafletの操作を行えるのことがわかったので 今回はご紹介します。 non geographical map サンプル コード //head (Leaflet の css, js の読み込み) <link rel="stylesheet"
手っ取り早く Angularするなら Angular CLI (Angular Material も添えて) | バシャログ。
どうもfujiharaです。 この時期の気候は個人的には一番すきです。 前回に引続き手っ取り早くシリーズ第2段は Angular です。 (第一回目は手っ取り早くReactするなら Create React App) 前置きは置いといてサクッといきます。 Angularでの開発にあたり、コンパイルに必要なモジュールのインストール等初期ファイルを追加して コンパイルするまでが凄く大変です。これも Create React App と同様そこら辺すっとばせます。 Angular インストール〜起動（開発） #インストール npm install -g @angular/cli #開発ディレクトリ作成 ng new first-angular (↑ 必要なモジュールインストールするので時間がすこしかかります。） #開発ディレクトリに移動 cd first-angular #起動（開発） ng s
手っ取り早くReactするなら Create React App | バシャログ。
どうも、夏らしいこと特にしてない fujihara です。 本日は簡単にReact を初められる Create React App をご紹介します。 はじめに Reactでの開発をするにあたり、初めは必要なモジュールのインストールであったり、コンパイル等の仕方だったり苦労しました。 しかしこのCreate React Appがあるとそこらへん全てすっ飛ばしてReactをはじめられるのでオススメです。 インストール〜起動（開発） #インストール npm install -g create-react-app #開発ディレクトリ作成 create-react-app first-react (↑ 必要なモジュールインストールするので時間がすこしかかります。） #開発ディレクトリに移動 cd first-react #起動（開発） npm start これでブラウザで localhost:300
Google Maps JavaScript APIで地図が表示されないとき、原因だったこと | バシャログ。
お初にお目にかかります。新人のsagaraです。高校２年の夏、 物理部の部室でパソコンを前に「猫でもわかるC言語」を読んでいましたが、 剣道部で一番人気の美人の先輩の恋人役をするアルバイトに誘われるようなことはありませんでした。 今回はGoogle Maps APIについてのお話をさせていただきます。 Googleマップ(以下マップ)を用いたページを作成していた時、 「あれ？地図が出なくなった！」ということが何度かあったので、 ぶつかった場面と原因を振り返っていきたいと思います。 【前提】 マップの利用にはAPIキーを取得する必要がある Googleマップを利用する場合は、Google Maps APIを利用する必要があります。 ユースケースによって、いくつかのAPIが用意されていますが、 今回対象となるのは、自由度の高いGoogle Maps JavaScript APIです(*1)。
react-slick のご紹介 (Slick, React, JavaScript) | バシャログ。
どうもfujiharaです。本日はSlickスライダーをReactコンポーネント化したreact-slickの紹介をします。 インストール まずは react-slick をインストールします。 $ npm i -D react-slick ** その他のパッケージについては今回割愛させていただきます。 各種ファイル HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>React Slick</title> </head> <body> <div id="slick-target"></div> <script src="/js/index.bundle.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn
スクロールバーの幅を考慮したモーダル処理 [JavaScript] | バシャログ。
どうもこんにちは fujihara です。 新年度が幕を明けましたね。春独特の夜の飲み会のザワツキを感じると 春だなぁ～って思います。(お酒はほとんど口にしませんが空気は嫌いじゃないです) 本日はモーダルを開いたときにスクロールを止めるために body に overflow:hidden をあてると スクロールバーが非表示になり『ガタッ』ってなるのを防ぐ処理をご紹介します。 個人的にはモーダル最終章だと位置づけています。 概要 処理内容は以下のとおりです。 モーダルを開くボタンを押す bodyのoverflow:hiddenをあてる前のclientWidthを取得 bodyにoverflow:hiddenをあてる。(スクロールを不可に) bodyのclientWidthを再度取得 overflow:hidden前後でのclientWidthの値が0より大きい場合スクロールバーを考慮したpa
【バシャログ。10周年企画】fujihara が選ぶ人気のあるJavascript 記事5選 | バシャログ。
先月でバシャログ。が10周年を迎えました。 昨日の yanagimachi の記事yanagimachiが選ぶ人気のあるWordPress記事5選"に続きまして、 本日はfujihara(Analytics)が選ぶ Javascriptの人気記事5選を紹介させていただきます。果たしてfujiharaの記事はアルのか？(というフリ) ではセカンドバッターfujiharaが行きます ※注意 Analyticsでの記録が残念ながら2012年中頃以降となっていますので、漏れてしまった記事がある場合や、 AnalyticsのフィルタにJavascriptとして引っかからない記事もございますので、「俺の記事のが人気ある！」と思われるバシャログ執筆者がいましたら ご連絡の方お願いします。 また案件の相談等ございましたらいつでもお問い合わせ下さい。 1位 【あれ、いつも書いてるな～というJavaScrip
便利なモーダルプラグイン MODAAL | バシャログ。
どうもfujiharaです。今年度も残す所あと1ヶ月になりましたね。 今回は今年知った便利なモーダルプラグインであるMODAALを紹介します。 何が便利？？ このプラグインを紹介したいと思った一番の理由はモーダルを表示したときに 背景がスクロールしないところです。 モーダルを導入するときに背景を固める処理を毎回入れなくてすみます。これがそれが大きい！ 基本的な使い方 使い方は一般的なモーダルプラグインと似ています。 モーダルを開くリンクタグを作成してモーダルの設定を入れて呼ぶだけです。 header <link rel="stylesheet" href="//cdn.jsdelivr.net/modaal/0.3.1/css/modaal.min.css"> <script src="//cdn.jsdelivr.net/modaal/0.3.1/dist/js/modaal.min.j
CircleCIでESLintを使い、JavaScriptコーディングスタイルをチェックする | バシャログ。
JavaScriptのスタイルチェッカーは導入してこなかったのですが、いろいろタスクを自動化する流れのなかでESLintを導入し始めています。 ESLintはエディタと連携するだけでも効果のあるツールですが、それだけだとエラーになってもスルーしてしまうことがあります。チームの共通認識を育てていくなら、出来ればCIでチェックしたいですね。 そこでCircleCIで自動チェックする方法を調査したのでまとめてみました。 前提 ローカル環境にnodejsとパッケージマネージャyarnがインストール済みです。 $ npm -v 3.10.8 $ node -v v6.9.1 $ yarn --version 0.16.1 手順 まず、ESLintをプロジェクト内にインストールするには package.json が必要です。1コマンドで作成します。( yarn init --yes でもOKです。)
LinkedInでのシェア数をカウントする (javascript) | バシャログ。
皆さんこんにちはfujiharaです。 神奈川の高校野球結果が気になるfujiharaです。 本日はLinkedInで指定したURLのシェア数をカウントする方法をご紹介いたします。 背景 今年は弊社kourakuと SNS担当(詳細はリンク先になります)に なりました。 というわけでLinkedIn内でのシェア数をカウントする方法になりました。 コード 問い合わせるURLは以下になります。 http://www.linkedin.com/countserv/count/share?url= url に引数でカウントしたいURLを指定します。 以下コードになります。 var url = encodeURIComponent("https://bashalog.c-brains.jp/16/07/29-150000.php"); $.ajax({ url: 'http://www.linked
社内webpack勉強会(JavaScriptビルド編)を行いました | バシャログ。
家で効率良くPodcastを消化するためにBose のBluetoothヘッドホン QuietComfort 35を買いました！ tanakaです。コードレスなので、家事しながらPodcastが楽に聞けてすごく便利です！ 社内勉強会で webpack(JavaScriptビルド編) を紹介したので、資料を公開します。 資料 Webpack勉強会 JavaScriptビルド編 // Speaker Deck まとめ webpack は JavaScript, CSS, 画像などのWebページアセットのビルドを行うツールです。今回はJavaScriptビルドについて紹介しました。 45分のうち半分しゃべって、残り半分は議論したので、スライドの内容はあまり多くなく細かいノウハウの紹介も有りません。 ツールの概要をつかむ参考になればと思います。 今年の案件でReact+Redux で Webアプリ
読み込んだFacebook ページプラグインの幅を動的に切り替える | バシャログ。
皆さんこんにちはfujiharaです。 ナツいですね。庭の手入れのためにチェーンソーを買って作業をしたところ、 早くも夏バテをくらいました。 本日は読み込んだFacebookページプラグインの横幅を動的に切り替える方法を 紹介します。 Facebookページプラグイン Facebookページプラグインをページに読み込む場合には ページプラグイン ページに行き表示したい FacebookページのURLを入力しコードを取得するボタンを押すと取得できます。 仕様 コードを取得するボタンを押すとJavascript SDKとIFrame版のコードが取得できます。 2016年6月現在の仕様ですと表示できる横幅は最小で180、最大で500となっています。(デフォルト340) この横幅については初期表示時に値が決まるとその後は変更されることはありません。 なので、動的に切り替えたい場合は再度読み込むとい
第14回 HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！に参加したよ！ | バシャログ。
なぜか今月のバシャログ担当が2回のyanagimachiです。 5/24に開催されたHTML5ビギナーズに参加してきました。 簡単ですが、それぞれのセッション内容＆スライドのURLをご紹介します。 Foresee 見極めること：菊池 崇さん 多角的な視野で見ること、視点を変えること 変わらないことは自らの価値（価格）を下げること 社長の視点で考える。マーケットを分析しよう。自分のエゴは捨てよう もともと突っ走りやすいので、こういう視点は大切にしていましたが、社長視点も取り入れるよう頑張りたいですね。 ※このとき私の隣には弊社社長がいました。 スライド：Foresee 見極めること // Speaker Deck 慣れる！JS 素早く原因究明？デバッグ入門：国分 佑樹さん 原因究明の時間が多すぎ！ 多段式エラープルーフを使おう 時間のかかり方や守備範囲が違う複数のデバック方法を使う 上のレイ
Instagram：特定ユーザの最新写真を取得する | バシャログ。
どうもご無沙汰しております。 痩せにくくなった体のために夜は軽食で済ませ、騙しだまし体型を維持している fujiharaです。 本日はInstagram API を利用して特定ユーザの最新写真を 表示す方法をご紹介します。 概要 Instagram API を使用して特定ユーザのInstagram 最新10件を表示させる。 流れ ① 特定ユーザのInstagram Id 取得 ② APIを使用するためのInstagram アプリ登録 ③ 特定ユーザのデータを取得 以上になります。 ユーザのInstagram Idの取得 特定のユーザのデータを取得するためにはまず、そのユーザのInstagram Id を取得する必要があります。 ここではfujiharaの大好きなクリスティアーノ・ロナウド選手のInstagram を例に説明します。 まず以下のサイトに行き、取得したいInstagram ユー
Web Storage と jQuery UI でサジェスト機能を実装する | バシャログ。
どうもfujiharaです。ナツイですね～？ 神奈川の宇多田世代ならこの言葉知っていると思うんですが、いかがでしょうか？ 今回はWeb Storageと jQuery UIでサジェスト機能を実装していきます。 機能概要 機能の概要を説明します。ユーザが過去に入力した文字をフォームに入力した際に同じものをサジェストとして提供するようにします。 実装方法 まずサジェスト機能はjquery UIのサジェスト機能を使用します。 Autocomplete こちらはサジェストするワードを配列で渡すだけでサジェスト機能を提供してくれる優れものです。 そして渡すワード配列を保存しておくのがWeb Storage になります。 処理内容は以下が考えられると思います。 ①ページ読込時に保存されてる検索ワード配列を読み込む。 ②読み込んだ検索ワード配列をAutocompleteに渡す。 ③ユーザが文字を入力し、
JavaScriptでSNSのカウンターを取得する | バシャログ。
どうもfujiharaです。 連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。 本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3 めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、 カウント数のみをJSONで取得する仕様に変更 についての実装方法を説明します。 流れ たいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。 はてブ数の取得 はてブ数の取得方法です。 // 問い合わせURL は "http://api.b.st-hatena.com/entry.count" // クエリーは url となります。 <script> $.ajax({ url:'http://api.b.st-hatena.com/entry.count' + '?url='
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack プラグイン : write-file-webpack-plugin の紹介 (webpack-dev-server で静的書き出し) | バシャログ。
控えめなお知らせ機能を実装する(JavaScript, Notification API , Page Visibility API) | バシャログ。