webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク webpackとBabelの基本を理解する(1) ―webpack編―（本記事） webpackとBabelの基本を理解する(2) ―Babel編― webpackとBabelの基本を理解する(3) ―webpackとBabel編― webpackとBabelの基本を理解する(4) ―React編― webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境・バージョン Windows1
AWS LambdaでPuppeteerを動かす - Qiita
はじめに AWS LambdaでPuppeteerを動かすためのメモです。 npm の @serverless-chrome/lambda と chrome-remote-interface を使用した例はいくつかありますが、開発停止の影響のためか、一部のPuppeteer APIが動作しなかったので、chrome-aws-lambda パッケージを使用します。 環境 AWS Lambda ランタイム：Node.js 8.10 ローカル macOS Mojave(10.14.3) npm 6.8.0 手順 Lambda Layerに登録するパッケージの作成 Lambda Layer登録 AWSのコンソールからLambdaを開く。 Layer設定画面を開く Layerの作成 Layerのアップロード 名前: 任意のLayer名 説明: 任意の説明文 コードエントリタイプ: .zipファイルを
画像処理100本ノックを「Google Colaboratory」で楽々学習 - Qiita
画像処理100本ノックとは 以下のような素晴らしい記事を発見しました。 https://qiita.com/yoyoyo_/items/2ef53f47f87dcf5d1e14 （リンク切れ） 画像処理を、OpenCV等の高度なライブラリを使わず行うことで、画像処理の理解を深める、非常に有用な練習問題集です。自分も画像処理の基礎を学びなおしたかったので、自己学習のため活用させていただくことにしました。 ただ、初学者にとってハードルになりそうなのが、環境構築のところです。GitHubのREADMEに丁寧に描かれているのですが、初学者にとっては難易度高く、時間もかかります。また、自宅以外の環境でちょっと学習したいときなどにも不便です。 そんな手間を解消するために、Googleが提供している環境構築不要・無料でPythonの開発が可能なWebサービス「Google Colaboratory」を使
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 来たる 2 月 4 日、ついに React 16.8 の正式版がリリースされます。この React 16.8 には、アルファ版が公開されて以来常に React ユーザーたちの関心をほしいままにしてきたReact Hooksが正式版となって追加されます。 ※追記：アメリカ時間で 2 月 5 日になっても React 16.8 がリリースされませんでした。事前情報で 2 月 4 日と言ってたのに……。いつになったらリリースされるのかはよく分かりません。2 月 6 日に React 16.8 がリリースされました！ 熱心な React ユーザ
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう - Qiita
はじめに 質問箱や、ボタンメーカー、診断メーカー等を始めとする 「OGP画像生成系」 を ２個以上作ってそれのベストプラクティスがわかってきたので、共有したいと思います。 宣伝 この技術を使ったサービスを実稼働２日ぐらいで作りました！ 使い方は簡単です！ メッセージカードを書いて、Twitterにシェアするだけ。 #嵐ありがとう OGP画像生成系サービスとは？ 質問箱 みんなのボタンメーカー （｡･ρ･）ｵｼﾃﾐﾃ キズナアイな気分のときに押すボタンを作りました！みんな押してね！#キズナアイな気分のときに押すボタン#みんなのボタンメーカー https://t.co/2mzJUE48zj — Kizuna AI@hello,2019‼︎ (@aichan_nel) 2019年1月29日 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】 すごくいいサービ
接続できるディレクトリを制限して複数のSFTPユーザを作る - Qiita
#《課題》 やりたいこと SFTPユーザ毎に接続できるディレクトリを制限 公開鍵認証 chrootで必要以上にディレクトリは見せない 共有するディレクトリのパーミッションは755、ファイルのパーミッションは644 sftpグループに所属するユーザ /var/www/vhosts/以下はすべてアクセス可能 sftp-limitグループに所属するユーザ 指定したディレクトリ以下のみアクセス可能 ※ただし/etc/ssh/sshd_configは初期の設定後は変更をしない 今回の設定 ディレクトリ構成とアクセス権 /var/www/vhosts/ : 755 root root ← sftpは以下にアクセス可 `-- example.com : 755 sftp_user sftp `-- html : 755 sftp_user sftp |-- index.html : 644 sftp_u
iOSエンジニアがフリーランス案件の面談で良く聞かれる質問集をまとめてみた - Qiita
概要 転職エージェントは、本当にスゴ腕なのか！？──偽エンジニアを見抜けるか試してみた がツイッターのタイムラインで上がってきたので興味が湧きました。 これは未経験者は必ず読んだ方がいい 営業ちょっと出来れば簡単に潜り込めちゃうってこと エージェントに限らず、現場の採用担当もこのレベルです 現場入ってから辻褄合わせれば文句も出ない 転職エージェントは、本当にスゴ腕なのか！？偽エンジニアを見抜けるか試してみた https://t.co/LIbRXEvtnl — かずきち (@kazukichi3110) 2018年12月10日 転職エージェントが豪腕エンジニアを見抜けるかはさておき、この記事では実際に転職の面談の流れが紹介されていた。 私は今でこそ4年くらいフリーランスとして活動しているが約1年ベースで現場を渡り歩いたので現場の数だけ面談を通ってきました。 そこで今回はフリーランスの案件に携
JavaScriptでQRコードをスキャンするライブラリまとめ - Qiita
LazarSoft/jsqrcode ZXing というJavaのライブラリをJavaScriptに移植したものです。 このライブラリ自体はCommonJS形式で書かれていないのですが，別の方がCommonJS形式への変換とnpmの登録をしてくれていて，edi9999/jsqrcode と vicapow/jsqrcode という2種類のプロジェクトがあります。 このライブラリはテストコードが不十分ということで，edi9999/jsqrcode の作者は，後述する cozmo/jsQR の利用を推奨しています。 このライブラリは画像ファイルのDataURLからQRコードを読み込むところまでを対象としているので，Webカメラから画像を取得する処理は navigator.getUserMedia などを使って自分で書く必要があります。参考事例を2つ挙げておきます。 ブラウザからQRコードデコー
TensorFlow LiteがGPUをサポートしたらしいのでiOSで試してみた - Qiita
TensorFlow LiteがAndroidやiOSデバイスのGPUをサポートしたようです1。 TensorFlow Lite Now Faster with Mobile GPUs (Developer Preview) バックエンドはAndroidではOpenGL ES 3.1、iOSではMetal。 This new backend leverages: OpenGL ES 3.1 Compute Shaders on Android devices Metal Compute Shaders on iOS devices iPhone 7では最大6倍の高速化が見られたようです。 By leveraging the new GPU backend in the future, inference can be sped up from ~4x on Pixel 3 and Sams
【Visual Studio Code】初音ミクさんを召喚できる拡張機能「live2d」 - Qiita
"live2d.width": 300, // 幅 "live2d.height": 400, // 高さ "live2d.bottom": 300, // 底辺位置 "live2d.right": 20, // 右側位置 "live2d.model": "miku", // キャラクター名を指定 "live2d.headPos": 0.5, // 重心 "live2d.scale": 2, // スケール "live2d.opacity": 0.7, // 透明度 "live2d.hoverOpacity": 1 // ホバー透明度 live2d の使い方 コマンドパレットから live2dinstall を検索して選択し、実行します。 2. メッセージに従ってVS Codeを再起動します。 3. メッセージが表示されますが、**×** で閉じるか、設定アイコンから **今後は表示しない
Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発
ExcelにPythonが搭載？その後 - xlwings を使おう - Qiita
マイクロソフトが Excel に Python を搭載することを検討しているというニュースが流れたのは１年前のことで、結構話題になりました。昨年の Python Advent Calendar 2017 では、ExcelにPythonが搭載されることを期待して「ExcelにPythonが搭載？」という記事を書きましたが、今回は、その続編を書きます。 そのニュースというのは、マイクロソフトが Excel に Python を搭載するかどうかを検討するためアンケートを実施したということなのですが、詳しく知りたい方は、Publickeyの「ExcelにPython搭載、マイクロソフトが検討。アンケートを実施中」という記事がわかりやすいので、そちらをみてください。 その後どうなったかというと、マイクロソフトが運営しているコミュニティサイト「Excel’s Suggestion Box」に投稿されて
React Hooksがよくわかる4つの例 - Qiita
Dave Ceddia氏による全5回におよぶReact Hooks入門記事の第2回を本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://daveceddia.com/usestate-hook-examples/ これまでは、ファンクションコンポーネントで書き始めて途中からstateが必要な局面になると、コンポーネントをクラスに書き換える必要がありました。 class Thing extends React.Component を書き、関数の本体を render() メソッド内に移植し、インデントを修正して、ようやくstateを追加することができます。 今日は、Hooksを使って同じ機能を手に入れることができます。 「フック」とは何でしょうか？良い質問です。Hooksについてはここで学んでください。 この記事では、特に useS
Yahoo毎日くじを全部引くスクリプトを書いた - Qiita
動作環境 OS：Windows8 GoogleChrome バージョン: 70.0.3538.110（Official Build） （64 ビット） Python：3.70 Selenium Webdriver：この記事を書いた時点で最新のもの chromedriver.exe：この記事を書いた時点で最新のもの ※スクリプトと同じフォルダに'chromedriver.exe'を置いてください。 # coding: UTF-8 from selenium import webdriver from time import sleep # 引きたいくじのURLリスト。期間限定が多いので、URLは随時更新して下さい # （但し、「くじを引くボタン」がid="btnLot"でなければなりません） kuji_urls = [ 'https://toku.yahoo.co.jp/travel2018
Python + Selenium で Chrome の自動操作を一通り（ログイン、ダウンロード、他）
はじめに Python + Selenium + Chrome で、要素の取得、クリックなどの UI系の操作、待機、ページ全体のスクリーンショットなど、一通り試してみます。 PhantomJS はもう更新されないということなので、ブラウザは Chrome にします。 この記事には、Selenium の API に関する情報と Chrome に特化した情報がありますが、前者の Selenium の使い方に関する情報は Firefox など別のブラウザでも使えます。 注意事項 ウェブの自動テストやスクレイピングで使われる技術です。特にスクレイピングでは、著作権の問題や、サーバー側の負荷、各種規約（会員としてログインする場合の会員規約等）やマナーなどを考慮する必要があります。 たとえば、Twitter など利用規約で明示的にスクレイピングが禁止されていることや、robot.txt などでクローリ
Google Colab上でKaggleのデータをロード、モデル訓練、提出の全てを行う
なんか最近Google Colaboratoryが流行ってるらしいですね。 Google Colabを導入 Jupyter notebookをクラウド上で走らせることができるGoogleのウェブサービスですが、注目すべきはGPUもTPUも無料ということでしょう。 「ま、まぁオレもね、本気を出せばKaggleで上位狙えるんだけどね、ちょ、ちょっと手持ちにフツーのラップトップしかなくて、スペック的にアニメ観るくらいしかできないんだよね」 という言い訳ももう通用しない時代に突入しました。 Kaggleは、というより機械学習全般は計算機の能力がものをいいます。課題のデータ量が増大している今、Kaggle内のKernelでは学習が捗らないことも多く、私も去年Kaggleの練習問題（Regression）を解いてKagglerになるという入門記事を書いてからKaggleを去りました(ぉぃ が、Goog
Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた！ - Qiita
React17の次期新機能のSuspenseが凄い！ と思ったので少し学習していました！ Suspense自体の説明は下の動画がわかりやすいかも。 13:15ぐらいからプログラムのDemo 29:30ぐらいからSuspenseとはなんぞや、という説明をしてくれています。 Githubにdemoもあったので、実際に動かしてみたい方はこちらも是非是非 つまりSuspenseって何？ Suspenseっていう機能があるわけじゃないんです、すみません 概念というかなんといいますか 自分の意訳・解釈なので間違っていたら土下座しに行きます 外部APIからデータを取得・表示するような処理で使えるんですね。 読み込みを開始したらLoadingを出して、APIが戻ってきたらデータを表示してローディングを消して……っていう、reduxやsagaを使って今まで頑張ってきているものがあると思うんですね。 API実
10年モノのインフラを3年がかりでカイゼンした - Qiita
CI いちおうJenkinsが立ってました。失敗して赤くなってるジョブが大半で、かといって誰が治すわけでもなく、よくわからないけど失敗したり成功したり、とにかく不安定でした。 CloudWatchのメトリクスで眺めて、EBSのIOPSクレジットの枯渇から激遅になって、Jenkinsジョブのタイムアウト設定で失敗になる、まで明らかにしました。その時の対処は、IOPSクレジット上限サイズの1TBのSSDのEBSを付けることと、同時並行で動けるJenkinsジョブ数に上限を設けることで、落ち着くようになりました。 とはいえ「Jenkinsおじさん」問題があるので、CIをどうにか民主化する必要があります。SaaSから検討して、TravisCIとCircleCIが最終候補になって、トラブルシュートをSSHでできるのを決め手に、CircleCIを導入しました。 8月末にCircleCI1.0が死んだと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHPのハマりポイントのリンク集 - Qiita
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita
