SlideShare a Scribd company logo
1 of 96
Download to read offline
アメブロフロント刷新にみる
ひかりとつらみ
2016/12/5 Frontrend
Hara Kazunari @CyberAgent
アメブロ2016
🎉
@herablog
@kouhin
https://developers.cyberagent.co.jp/blog/archives/636/
😂YES
アメブロフロント刷新にみる
ひかりとつらみ
アメブロ2016
PV DOWN
TOO SLOW TO LOAD
2016年4月のデータ
バックエンドのAPI化
http://www.slideshare.net/nin2hanzo/spring-69237035
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
#表示速度は、Web UXにとって、
最も大事な項目のひとつです。
モダンなエコシステムを使うこ
とは、良いアプリを作るのに役
立ちます。
!
時代にあった、ユーザー体験を
作ることで使いやすいアプリに
なります。
"
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
コンセプト決め
by Steve Souders
🙏
by Steve Souders
by Steve Souders
サーバーサイドははやい
HTMLのサイズが大きめ
ブロッキングリソース多め
リソース多いサイズも大きい
💡
サーバーサイドははやいまま
HTMLのサイズ減らす
リソースの非同期読み込み
ATF以外のリソースの遅延表示
💡
ブログというプロダクト
テキスト中心の読み物
SEO大事
一度に複数ページ
見られている
SSR SPA
Before
After
SPASSR
SSR SSR SSR
SPA
SSR
First Paint
SEO
Runtime Paint
UX
Before After
LAZY LOAD
Before
Main
Sub
Not displayed
Above The Fold
After
Main
Sub
Not displayed
HTML Size -20%
16.1 → 13.5 KB
$
#Under 100msHTML Response Time
renderToString()
8,000 rps at Ameba
300ms - 500ms, High CPU usage
Caching HTML/API Data
Dynamic CSS Classes
node
API
Cache
Client
HTTP
Blog Data
Blog Data
zlib
HTML
Add client info
to <body>
as class name
HTML Responses
Entry List Pages
Entry Pages
2016年9月のデータ
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
まるでexampleアプリのように
React with Redux
コンポーネント志向
Pure functions
React with Redux
Page
Navi Article Paging
コンポーネント志向
React with Redux
Action
Page
Navi Article Paging
Reducer
props
State (Store)
propsobject
object
func
Pure functionsによる一定フロー
React with Redux
State State State
Stateの情報だけで表示内容が確定できる
CSS Modules
各コンポーネントごとのスタイル
SpNavigationBar.js SpNavigationBar.css
.Nav {
background: #fff;
border-bottom: 1px solid #e3e5e4;
display: flex;
height: 40px;
width: 100%;
}
.Logo {
text-align: center;
}
import React from 'react';
import style from './SpNavigationBar.css'
export class SpBlogInfo extends React.Component {
render() {
return (
<nav className={style.Nav}>
<div className={style.Logo}>
<img alt="Ameba" height="24"
src="logo.svg" width="71"
/>
</div>
<div ...>
</nav>
);
}
css-loader
CSS Modules
各コンポーネントごとのスタイル
.SpNavigationBar__Logo___${HASH}
(BEM CamelCase style:
MyBlock__SomeElem_modName_modVal)
https://en.bem.info/methodology/naming-convention/#camelcase-style
CSS Modules
各コンポーネントごとのスタイル
スコープがきれる
影響範囲が絞れる
モジュール・開発者多い
アメブロでは機能
Atomic Design
Presentational and Container Components
% &Containers Components
状態を持つコンポーネント 表示内容だけのコンポーネント
Atomic Design
% &Containers Components
状態を持つコンポーネント 表示内容だけのコンポーネント
状態が肥大化 😿
処理が肥大化 😿
どっちに書いていいかわからない 🙀
Atomic Design
最小単位
<Icon>
状態持つ
<Entry>
再利用
<List>
各ページ SPA用
organisms/SpEntry.js
organisms/SpBlogInfo.js
organisms/SpNavigationBar.js
atoms/Icon.js
molecules/BloggerThumbnail.js
organisms/SpEntry.js
organisms/SpBlogInfo.js
organisms/SpNavigationBar.js
atoms/Icon.js
molecules/BloggerThumbnail.js
Atomic Design
Organismのコンポーネントは状態を持てる
connectを使って状態を持てる
データ取得処理を記述できる
import { connect } from 'react-redux';
import { routerHooks } from 'react-router-hook';
import { fetchBloggerRequest } from '../../../actions/bloggerAction';
// データ取得処理 (react-router-hookを利用)
const defer = async ({ dispatch }) => {
await dispatch(fetchBloggerRequest());
};
// Redu storeのstateをpropsとして利用
const mapStateToProps = (state, owndProps) => {
const amebaId = owndProps.params.amebaId;
const blogger = state.bloggerMap.bloggerMap[amebaId].nickName;
return {
nickName,
};
};
@connect(mapStateToProps)
@routerHooks({ done })
export class SpProfileInfo extends React.Component {
static propTypes = {
nickName: React.PropTypes.string.isRequired,
};
SSR SPA
Isomorphic JavaScript
Isomorphic JavaScript
ほとんどJavaScript
Isomorphic JavaScript
Action
Page
Navi Article Paging
Reducer
State (Store)
% actions/
% components/
% reducers/
% services/
& server.js
& client.js ブラウザの入り口
サーバーの入り口
node API
Babel
決まっている未来は、
早めに試そう
Babel
http://node.green/
Babel
export function getPages(amebaId, page = 1) {
const url = `https://api.jp/pages/${amebaId}/${page}`;
return fetch(url);
}
publicBlogger.getPages(amebaId)
.then((res) => res.json())
.then(json => json.data);
fetch, Template Strings, default arguments, arrow functions, Promise
Babel
export default class SpThumbnail extends React.Component {
render() {
const { id, ...restProps } = this.props;
return (
<Thumbnail
{...restProps}
src=`https://img.com/${id}`
/>
);
}
}
Rest Parameters
Babel
const defer = async ({ dispatch, getState, params }) => {
const amebaId = params.amebaId;
const blogger = await dispatch(fetchBloggerRequest(amebaId));
if (blogger.isOfficial) {}
};
@routerHooks({ defer })
export class SpBlogHeaderInfo extends React.Component {
}
async/await, class, import/export, decorator
Babel
最悪、該当部分だけ書
き直すのは難しくない
…はず 😅
ESLint, Stylelint
比較的固めのルールを選択
ガイドラインを明確に
eslint-config-airbnb, stylelint-config-standard
ESLint, Stylelint
例えばこんなのもエラー
ESLint, Stylelint
const foo = {
a: ‘a’,
b: ‘b’ // comma-dangle
} // semi
.Block{ // block-opening-brace-space-before
border-top: 1px solid #CCC; // color-hex-case
border-bottom: 1px solid #ccc; // declaration-block-properties-order
color:#333; // declaration-colon-space-after
} // no-missing-end-of-source-newline
ESLint, Stylelint
個人的な好みはあるが…
ルールを統一して一貫性を保つ
レビュー時に毎回指摘は気まずい… 😇
CI
Pushされたものは
必ずCIテスト
を通して
安全性を担保する
CI
Docker
node.jsにポータビリティをもたらす
Docker
一度、イメージを作ってしまえば、
複数サーバーへのリリース
切り戻しも簡単
Docker
さらに、nodeのアップデートも
簡単
Docker
https://nodejs.org/en/download/releases/
Docker
FROM node:7.2
Dockerfileを変えるだけ
Docker
アメブロでは
極力node最新版を利用する
CI, Lint
Semantic Versioning
README.md
CONTRIBUTING.md
PULL_REQUEST_TEMPLATE.md
etc.
OSSっぽく開発
外でもそのまま使える技術を
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
No more ガタンッ 🎯
ATFのコンテンツの高さを固定
誤タップはモバイルで
最悪のUXのひとつ
No more ガタンッ 🎯
No more ガタンッ 🎯
コンテンツファースト
Before After
アクセシビリディ
伊原 力也さん
太田 良典さん
アクセシビリディ
https://speakerdeck.com/herablog/ameburowosukurinridadedu-mishang-getemita-2016nian-xia
! "#表示速度
改善
システム
モダン化
UX
ver. 2016
GOAL
#
Business & System✌
GOOD BOTH
'
Desktop version
Markup, a11y
Design x Development
Webpack2
https, HTTP/2
Service Worker, PWA, etc.
Roadmap
https://developers.cyberagent.co.jp/blog/
@ca_developers
@herablog
アメブロフロント刷新にみる
ひかりとつらみ
アメブロ2016
Reduxむずい 😂
新メンバーが理解するまで
最大2ヶ月かかる (当社比)
(実装しながらわかってくる)
Lintスパルタ 😂
最初はだいたいCIエラー
アメブロモジュール大杉 😂
文章ママ
周辺技術も大杉 😂
結論
みんなで、頑張ろ😂
🍣🍕🍺🍣🍕🍺🍣🍕
🍺🍣🍕🍺🍣🍕🍺🍣
🍕🍺🍣🍕🍺🍣🍕🍺
🍺🍕🍺🍣🍕🍺🍣🍕
🍕🍺🍕🍺🍣🍕🍺🍣
アメブロフロント刷新にみる
ひかりとつらみ
Hara Kazunari @herablog
アメブロ2016

More Related Content

What's hot

サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから真吾 吉田
 
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用Tokuhiro Matsuno
 
実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ太郎 test
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤Godai Nakamura
 
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworkerおれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworkerToshiaki Maki
 
ヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレスヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレス真吾 吉田
 
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化するAWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化するmizugokoro
 
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techConsumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techToshiaki Maki
 
AWS クックパッドの運用事例
AWS クックパッドの運用事例AWS クックパッドの運用事例
AWS クックパッドの運用事例Satoshi Takada
 
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知Service workerとwebプッシュ通知
Service workerとwebプッシュ通知zaru sakuraba
 
Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)Naoto Teruya
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordovamiso- soup3
 
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしようSpringを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう土岐 孝平
 
REST with Spring Boot #jqfk
REST with Spring Boot #jqfkREST with Spring Boot #jqfk
REST with Spring Boot #jqfkToshiaki Maki
 
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No ServersGoing Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No ServersKeisuke Nishitani
 

What's hot (19)

サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
 
Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用Lineにおけるspring frameworkの活用
Lineにおけるspring frameworkの活用
 
実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ実践サーバレスアーキテクチャ
実践サーバレスアーキテクチャ
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤AWSオンリーで実現するIoTクラウド基盤
AWSオンリーで実現するIoTクラウド基盤
 
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworkerおれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
 
ヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレスヘッドレスCMSとサーバーレス
ヘッドレスCMSとサーバーレス
 
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化するAWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
AWS Step FunctionとLambdaでディープラーニングの訓練を全自動化する
 
[jjug] Java と Benchmark
[jjug] Java と Benchmark[jjug] Java と Benchmark
[jjug] Java と Benchmark
 
20160927 reactmeetup
20160927 reactmeetup20160927 reactmeetup
20160927 reactmeetup
 
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techConsumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
 
AWS クックパッドの運用事例
AWS クックパッドの運用事例AWS クックパッドの運用事例
AWS クックパッドの運用事例
 
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
 
Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)Serverless Framework 使ってる話(node.js)
Serverless Framework 使ってる話(node.js)
 
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
 
Springを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしようSpringを使ったwebアプリにリファクタリングしよう
Springを使ったwebアプリにリファクタリングしよう
 
Yapc fukuoka crust
Yapc fukuoka crustYapc fukuoka crust
Yapc fukuoka crust
 
REST with Spring Boot #jqfk
REST with Spring Boot #jqfkREST with Spring Boot #jqfk
REST with Spring Boot #jqfk
 
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No ServersGoing Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
 

Similar to アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ

request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい! request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい! Masato Noguchi
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころAyumi Goto
 
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かすOpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かすKUNITO Atsunori
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おうHayashi Yuichi
 
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~MasashiOtsuka1
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application FrameworkLearningTech
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例Shigeru UCHIYAMA
 
Head toward Java 16 (Night Seminar Edition)
Head toward Java 16 (Night Seminar Edition)Head toward Java 16 (Night Seminar Edition)
Head toward Java 16 (Night Seminar Edition)Yuji Kubota
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonaca
 
About rails 3
About rails 3About rails 3
About rails 3issei126
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925Yu Ito
 
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web  ~ Progressive Web Apps の実装と応用 ~進化する Web  ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~Microsoft Azure Japan
 
楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa楽ちんユーザー認証付Spa
楽ちんユーザー認証付SpaTakahiro Tsuchiya
 
Azure 高速サイトソリューション
Azure 高速サイトソリューションAzure 高速サイトソリューション
Azure 高速サイトソリューションHiromasa Oka
 

Similar to アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ (20)

request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい! request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
request-specを利用していい感じにモックデータを作ってフロントエンド開発を楽にしたい!
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
 
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かすOpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かす
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
 
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
20220303_SAP AppGyverとSAP CAPで簡単なアプリを作ってみた~市民開発者とプロ開発者で作業を分担してみた~
 
Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328 Koa.js_エンジニア勉強会20140328
Koa.js_エンジニア勉強会20140328
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application Framework
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
名古屋Ruby会議01 A3.製造業向け3Dデータ変換ソリューションにおけるRuby活用事例
 
Head toward Java 16 (Night Seminar Edition)
Head toward Java 16 (Night Seminar Edition)Head toward Java 16 (Night Seminar Edition)
Head toward Java 16 (Night Seminar Edition)
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
 
About rails 3
About rails 3About rails 3
About rails 3
 
densan2014-late01
densan2014-late01densan2014-late01
densan2014-late01
 
Dev for Citizen Manual
Dev for Citizen ManualDev for Citizen Manual
Dev for Citizen Manual
 
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
 
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web  ~ Progressive Web Apps の実装と応用 ~進化する Web  ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
 
楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa楽ちんユーザー認証付Spa
楽ちんユーザー認証付Spa
 
Azure 高速サイトソリューション
Azure 高速サイトソリューションAzure 高速サイトソリューション
Azure 高速サイトソリューション
 

More from Kazunari Hara

俺の、プレゼン構築法
俺の、プレゼン構築法俺の、プレゼン構築法
俺の、プレゼン構築法Kazunari Hara
 
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2Kazunari Hara
 
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1Kazunari Hara
 
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-Kazunari Hara
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Kazunari Hara
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃないKazunari Hara
 
Hybrid appのすすめ
Hybrid appのすすめHybrid appのすすめ
Hybrid appのすすめKazunari Hara
 

More from Kazunari Hara (10)

俺はMETAだ!
俺はMETAだ!俺はMETAだ!
俺はMETAだ!
 
俺の、プレゼン構築法
俺の、プレゼン構築法俺の、プレゼン構築法
俺の、プレゼン構築法
 
Watch the Time
Watch the TimeWatch the Time
Watch the Time
 
CSS3 Design Recipe
CSS3 Design RecipeCSS3 Design Recipe
CSS3 Design Recipe
 
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
 
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
 
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
 
Hybrid appのすすめ
Hybrid appのすすめHybrid appのすすめ
Hybrid appのすすめ
 

Recently uploaded

2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計atsushi061452
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイントonozaty
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員Sadaomi Nishi
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。iPride Co., Ltd.
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521Satoshi Makita
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdkokinagano2
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルCRI Japan, Inc.
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )iwashiira2ctf
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 

Recently uploaded (12)

2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 

アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ