React でページ内の目的の箇所まで自動スクロールさせる | DevelopersIO
「React で作ったページ内を自動スクロールさせたい」とたまに質問を受けるのでまとめました。 やりたいこと React で作成したページに一覧が表示されているときに、一覧の最後までスクロールさせたい。 または目的の箇所までスクロールさせたい。 環境 React 16.13.1 TypeScript コードと説明 CodePen 上の動くサンプルコード スクロールして表示したい箇所に React の Element をつくる (div など) React.createRef() で ref を作り、作った Element に ref をセット ref.current.scrollIntoView() で Element までスクロール // <List /> の中身は CodePen のサンプルコード参照 const ListPage: React.FC = () => { // 表示する
Docker始める人はまずこれ！書評「Docker/Kubernetes 実践コンテナ開発入門」 | DevelopersIO
「最近、Dockerむっちゃ流行ってんなぁ。やっぱりやってみるべきやんな。なにから始めてみよ…」 いまやすっかり定着した感があるDocker。プロダクション環境での事例も珍しくなくなり、その取り回しのやりやすさ、CI/CDパイプラインの構築のやりやすさ、DevOpsとの親和性など、従来のインフラ構築、アプリケーション開発の全てをひっくり返すような、どえらいテクノロジーであることは間違いありません。 Dockerは単なる軽量VMではありません。Dockerの導入は、インフラの構築からアプリケーションの開発〜運用の全てのライフサイクルに対して影響があるため、それらの背景を理解せずに無理やり導入すると「余計めんどくさくなったけど、これなんか意味あんの？」という結果になりがちです。 そんな考慮事項が半端なく多いDockerですが、その誕生の背景や周辺知識、使い所を理解するのに非常にオススメなのが、
AMP Roadshow Tokyoで、AMPやりたい気持ちが高まった 前編 | DevelopersIO
4/27に開催された AMP Roadshow Tokyo に行ってきました。なお、本日の資料は公開されないそうです。 AMPって、レスポンシブサイトとして、丸っと対応できるぐらいになってたんですね！！ はじめに 世の中の状況と、巷でいわれる数値 75%の人が、3Gで閲覧している ローディングが 1秒 遅れると、コンバージョンレートが 7% 落ちる ローディングに 3秒 以上かかると、53% 離脱する I choose AMP the user AMPを勧めたいという話ではなく、いかに早く、いかに心地よくサイトが使えるか、という話をします。 これからのAMP AMPは2016年に始まり、世界中で人気になってきている すでに40億以上のページがあり、1秒に1枚出てるぐらいのスピード感で成長している。 もともとは、モバイルxメディア専用だったけれど、ECなど、その役割は広がってきた たとえば、
[レポート] 『きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会』に参加してきました | DevelopersIO
はじめに こんにちは、クラスメソッド最年少らしい黒澤です。 先日、『きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会』 というものに参加してきましたので情報を共有します。 情報 日時 : 3月27日（火）20:00-21:30 場所 : 東京都渋谷区道玄坂1-9-5 渋谷スクエアA 11F 【勉強会】きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会 スライド @imaizume さんに講師をしていただきました。 この勉強会ではタイトル通り、きれいな commit, pull request というテーマについてお話をいただき、 そのためのテクニックなどもご紹介いただきました。 きれいな commit を積む目的 commit : 変更の塊 変更には必ず意図がある。commit に含まれる変更の意図は見えるべ
![[レポート] 『きれいなcommit, pull requestを知りたい/作りたい方のためのgit勉強会』に参加してきました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/449a6ff1c4f7545a1c9c8678f784a4711116a965/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fgit.png)
OSXのコマンドライン通知ツール「Alerter」のご紹介 | DevelopersIO
メールやチャットなど色々なところに通知が飛びます。 例えば会議が始まる前にチャットに通知したり、CircleCIがビルドを完了したらメールに通知したりしていますが、どちらも私が見に行かないといけません。 チャットを全然気にしていないタイミングで会議が始まったら通知を逃し、会議に行けない（遅れる）、といった結果が想定されます。 OSの機能で通知することで、私が気づく確率が上がるのではないかと思い調べていたところ見つけたのが今回紹介するAlerterです。 Alerter Alerter/Send User Alert Notification on Mac OS X 10.8 from the command-line. alerter is a command-line tool to send Mac OS X User Alerts (Notifications), which are
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ | Web | Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理
Webページにチャット機能を簡単に導入できるSmallchatを試してみた #Slack | DevelopersIO
どうも！西村祐二＠大阪です。 今回はWebページに簡単にチャット機能を追加できる「Smallchat」というサービスを紹介したいと思います。 このサービスのいいところはWebページ上のチャットとSlackが連携できるところです。 通常だとチャット機能の開発コストや運用コストがかかり大変ですが、 このサービスは出力されたJavascriptのタグをWebページに埋め込むだけで簡単にチャット機能の導入ができます。 さっそくSmallchatを使ってみましょう！ 事前準備 Slackを利用するためSlackのアカウント、Slackのチームの準備をおねがいします。 Slackのサイト SmallchatとSlackを連携 ▼こちらよりSmallchatのサイトにアクセスし「Add to Slack」をクリックします。 ▼「Authorize」のボタンをクリックして権限を付与します。 ▼Webサイト
開発環境で使うDocker入門 | DevelopersIO
モバイルアプリサービス部の五十嵐です。 Dockerは軽量でポータビリティに優れ、環境を汚さないので開発環境には無くてはならない存在ですよね！今回はまだDockerを使っていない人向けに、私が自分が辿ってきた経験を元に、『こういうシーンでDockerを使うと便利』というのをステップ・バイ・ステップで説明していきます。 対象読者 Dockerはなんとなく知っていて興味はあるけど、使い所や導入するメリットが分からないという人を対象にしています。 環境 Docker for Mac（Docker 1.12.3） Dockerについて Dockerは複数のコンポーネントからなるプラットフォームですが、本記事では主にDocker EngineのことをDockerと呼びます。 Dockerはコンテナと呼ばれる仮想化技術を用いています。従来の仮想化技術と異なる点は、ホストのカーネルをコンテナと共有し、ホ
Zsh + Prezto で快適コマンド環境を構築する | DevelopersIO
Prezto 今回はコマンドライン環境の話です。私は以前より oh-my-zsh を利用していましたが、テーマの調子が悪かったので Prezto に乗り換えてみました。結構快適だったので、いまは Prezto を使っています。 本稿では Zsh + Prezto で快適なコマンドライン環境を構築する方法について簡単ですがご紹介します。 Zsh + Prezto 環境を構築する 環境構築の手順については README に書いてありますので、手順通り進めれば問題なく環境づくりができると思います。なお、コマンド実行すると .zlogin .zlogout .zprofile .zshenv .zshrc のシンボリックリンクを貼るので、oh-my-zsh から乗り換える場合など、既存の Zsh 環境を引き継ぎたい場合は各設定ファイルを退避させておきましょう。 // Zsh起動 $ zsh //
iOS 7のブラー（磨りガラス風）について考えてみる | DevelopersIO
iOS 7のブラー効果をどう実現する？ コントロールセンターや音量調節の背景など、iOS 7でよく見かける磨りガラス風のあれです。ブラーをかけるとなんとなくiOS 7っぽくなるので、「コントロールセンターみたいにブラーかけてよ！」って言われることが増えそうですね。 「磨りガラス風の画像を上にかぶせりゃいいんじゃないの？」と誤解されている方も多いかもしれませんが、そういうわけにはいきません！それっぽく見せるにはプログラムでそこそこのコードを書いてあげなければなりません。 UIViewとかにブラーをかけるメソッドがあるといいのですが、今のところないです。したがって、自前で作成したビューにブラーをかけるには、その処理を自分で実装する必要があります。ようするに時間がかかります。 そこで、ブラーをかけるのにどういった実装方法があるのかを調べてみたところ、以下の２つの方法がみつかりました。 標準コント
Amazon EC2(Linux)システム管理で知らないとハマる5つの環境設定 | DevelopersIO
ども、大瀧です。みなさん、EC2をバリバリ使ってますか?使いたいときにすぐ使える仮想マシンとして、開発・検証から本番まで幅広く活用されていると思います。 日頃EC2を業務で運用する中で、EC2インスタンスをコピーすると意図しない環境設定に変わってしまうというトラブルが度々あり、cloud-initというツールに拠ることがわかってきました。 「EC2インスタンスのコピーなんて、一旦インスタンスを作成したあとはあまりやらないのでは?」と思われがちですが、EC2独特の制限などもあり、実際の運用では思ったよりも頻繁にインスタンスのコピーが必要になります。インスタンスのバックアップ&リストアなどはイメージしやすいと思いますが、それ以外にも意外なケースとして以下があります *1。インスタンスのコピーは、AMI(Amazon Machine Image:インスタンスのバックアップ)を取得し、新規インスタ
HTML5 × CSS3 × jQueryを真面目に勉強 – #19 JS の Math 関数を最適化出来ないか検証してみた | DevelopersIO
前回、前々回と画像処理について学びました。ピクセル単位での解析をするなど、何かにつけてループ処理を書くことが多くなりがちです。100 回程度のループならまだしも、画像処理となると 1000 回や 2000 回は当たり前、1万回以上ループすることも珍しくありません。そうなるとちょっとした処理の違いが大きなスピードの差を生むことになるわけです。塵も積もれば何とやらです。 で、今回本格的に画像処理をやってみて気づいたのが、Math 関数を結構な頻度で使うんだなぁ、ということでした。Flash(ActionScript) の世界では、ド派手なヴィジュアルでも軽快に動作させるためにループ処理の中では Math 関数の使用を避けるのがセオリーとなっています。では JavaScript の場合はどうなのかいくつかベンチマークをとってみました。 はじめに - Math 関数について Math を直訳すると
Homebrew で作るモダンなフロントエンド開発環境 (Git + zsh + apache + MySQL + Ruby) | DevelopersIO
一つ前のエントリーで新規 Mac にインストールしておきたいアプリのまとめを紹介しました。フロントエンド開発をしていくにあたり、アプリをインストールするだけでなく必要に応じて様々な動作環境を構築する必要がある訳ですが、これもまた何かと手間のかかる面倒な作業だったりします。都度ググっては参考になりそうな情報に倣って試みるも、その情報が古かったり構築するための前提条件が微妙に異なったりと、そっくりそのまま参考にすることが難しいことがほとんどだったりします。 現状、僕は Mac の開発環境の構築に Homebrew というパッケージ管理ツールを利用しています。海外と比較して日本での利用者が多いことから日本語の情報が多く出回っていることが主な理由です。 Homebrew（ホームブルー）は、Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである
身につけておきたいWebサイト高速化テクニック #6｜HTTPリクエスト数削減テクニック02：CSS Sprite編 | DevelopersIO
はじめに 前回はHTTPリクエスト数削減テクニック01「インラインイメージ編」でData URI Encodeを使ったインラインイメージについて紹介しました。この記事をより深く解説した記事をCodezineさまに寄稿したのでこちらも参考にしてください。 今回はHTTPリクエスト数削減テクニックの2つ目「CSS Sprite」について解説します。 すでに定番のテクニックとなっていますが何となく使っていることが多いと思うので復習と思って読んでみてはいかがでしょうか。これから覚える方にも向けて丁寧に解説したいと思います。 1，CSS Spriteとは CSS Spriteとは、アイコンやナビゲーションなどのいくつかの画像を1つにまとめた画像（以降Sprite画像とする）を用意し、CSSのbackgroundプロパティを使って一部分のイメージだけを見せるテクニックです。代表的なSprite画像の例
【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。 | DevelopersIO
以前、ブログでEmmetをご紹介いたしましたが、またまたEmmetが良さげなツールを開発中です。 現在はまだベータ版ですが公開されていたので一連の流れを試してみました。 アジェンダ Emmet LiveStyleとは？ 環境設定 動作確認 SCSS(Sass)・LESS等のメタ言語の対応は？ Emmet LiveStyleとは？ ブラウザとエディタ間のスタイルをリアルタイムで確認・編集ができるツールみたいです。現在公式サイトでデモ用の動画を確認できます。 環境設定 Emmet LiveStyle を確認するには、設定が必要なので動作確認ができるまでの設定をご紹介します。 今回の動作検証環境 Windows7 chrome Sublime Text 2 Sublime Text の設定 Sublime Text 側でパッケージのインストール Sublime Textを開き、[Ctrl] +
【レポート】HTML5✕Internet Explorer 〜IEを使ってどこまでモダンなWebへ突き進めるのか？〜 に参加してきた | DevelopersIO
そんな訳で、2013年8月1日、東京は品川にある日本マイクロソフト株式会社にてHTML5✕Internet Explorer 〜IEを使ってどこまでモダンなWebへ突き進めるのか？〜という勉強会が開催されたので、潜入してきました。 技術革新が遅れてやってくるエンタープライズシステム界隈も、ようやくHTML5時代に突入しようとしています、、が！開発者は未だにInternet Explorerで多くの悩みを抱えているのではないでしょうか？ (中略) 業務システムを良くするためには、IEのハックが必要なのです！ (中略) このイベントでは、IEの持つポテンシャルを極限まで使いきって、周りのエンジニアの度肝を抜かせるようなIEハッカーになれるよう、MicrosoftMVPやMicrosoftエバンジェリストといった専門家を集め、ロードマップ・機能性・互換性問題・移行といったテーマについて、技術観点
受託開発で開発開始時に確認すること | DevelopersIO
はじめに 巷では受託開発についてまぁ様々な事は言われて久しいですが、紛れもなく自分は今この世界で生きていますし、多くの人が関わっていると思います。自分はプロジェクトリーダーという役割で開発に携わっていますが、プロジェクトをやる度に何かしら忘れてしまう事があるので、開発開始時又は開発開始前に必要な主な確認事項をまとめました。 確認すること プロジェクトの基本部分 契約書／要件定義書に書かれているようなこと。設計時や問題発生時に考える時の基礎になる部分なので、プロジェクトに関わる人全てが知っていて意識するべきこと。 ☆は仕様追加などの状況によってパラメータ調整する項目 目的 何故このプロジェクトが始まって何を目標としているのか 世界のはじまり。考察の基準。 エンドユーザー お客様と本当の意味でのエンドユーザー。 誰が使って嬉しいといいのか ステークホルダー プロジェクトのボスは誰か 誰を納得さ
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 | DevelopersIO
ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p> <p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omn
始めました、大村です | DevelopersIO
ブログ、初めました どうも、初めましての人ははじめまして、お久しぶりの人はいつもお世話になっております、大村貴俊です。 この4月からクラスメソッドにお世話になることになり、こうしてブログを書く事になりました。 社内の人にもまだどんな人かわかってもらえていないところが大きいので、どんなやつかわかりやすいように今までの経歴を簡単に紹介しつつ、これからの方向性なんかを語っていけたらと思います。 元、組み込み屋です もともとは組み込み業界で働いておりました。 関わってきた会社でいうと、S社、T社、N社、P社、O社ですかね・・・。 そのためか、今まで使用してきたOSがかなり一般的に浸透していないものが多いです。 WindowsEmbedded、VxWorks、ITRON、T-Kernelといってなかなかピンと来る人は少ないでしょう。 そんな1分1秒をはるかに超える1msを争う世界から、心機一転アプリ
CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。 そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。 とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。 本題 それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。 個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。 ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。 最初
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
