グリッドレイアウトを簡単に行うJavaScript！Masonry.js

Mar 7, 20141 like4,168 views

グリッドレイアウトをMasonry.jsを使って実施してみました。高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。 BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。 Masonryのどのあたりが便利なのかに重点をおいて説明してみました。 Webページでのスライドは以下になります。 http://ticklecode.com/present/140309_jscafe_Masonry/

MASONRY.JSについて話すよ
(#^.^#)
～今日の目次～
自己紹介
こんな人向けのお話
グリッドレイアウト
Bootstrapでやってみる
Masonryでやってみる

自己紹介

元々、12年間ぐらい生産管理システム、
会計システムのSE
インターネットと隔離された環境から、
2011年10月Web制作へ！
昼は、京橋の某社で
Web制作(WordPress,js,PHP,Ruby)の担当

自己紹介

Twitter:@AsbyuKobayashi
ブログ:http://iao.wktktravel.com/
ブログ書いたり、自社サービス作ったり、
制作案件したりしてます。

自己紹介

2013年 WordCamp Tokyo 制作チームにスタッフ参加

2014年もスタッフ参加します(@^^)/~~~

今日は、こんな人向けのお話
デザインに「キレ」がほしい
エンジニアでもかっこよく
経験浅いけど、「おおおっ！」と思ってほしい

TWITTER BOOTSTRAP(CSS)でやってみる!
サンプル作った！できた！！
BTSP01.HTML
レスポンシブにも対応！！

Twitter Bootstrap(CSS)でやってみる!

次、これはどう！？
BTSP02.HTML
カラムやイメージのサイズが異なる。
これもでけた！・・・・？？？

Twitter Bootstrap(CSS)でやってみる!

なにかおかしい。
次のカラムが詰まらない。
前の要素の高さを超えれない。

CSS（FLOAT)レイアウトの限界

Twitter Bootstrap(CSS)でやってみる!

FLOATがダメならPOSITIONレイアウト
JAVASCRIPTで計算してやる
再度、みてみる。
BTSP02.HTML

Twitter Bootstrap(CSS)でやってみる!

いや、まてまてまて。
positionの計算がメンドイ。
レスポンシブでの再配置の考慮も必要

やはり、限界・・・・

Masonryでやってみる!

MASONRY.JS を使うとこうなる！
http://sakurashinmachi-potal.com/post-hear.php

Masonryでやってみる!

公式サイト
http://masonry.desandro.com/

ダウンロードして、READ!
<cittp=tx/aacit sc"i/aor/aor.i.s>/cit
srp ye"etjvsrp" r=lbmsnymsnymnj"<srp>

Masonryでやってみる!

レイアウト例とコード例

上手く配置されないときは、columWidthが原因のときが多い!

Masonryでやってみる!

IMAGESLOADED.JS が重要
完全にロードが終わってからレイアウトを再配置させる
イメージのheightを確保する。

$Masonryでやってみる! スマホ時の注意点画面幅が狭いと、上手くレイアウトされない。ある程度、幅が狭くなったときは、Masonry.jsを無効にする vrmnwdh=60 / iaの縦の横幅 a i_it 0; / Pd $"cnanr)iaeLae(ucin) (#otie".mgsoddfnto({ / 横幅 / i ((idw.neWdh)< mnwdh{ f $wno)inrit( = i_it) $ ( / msny / aorでのレイアウトを停止 "cnanr)msny'eto'; #otie".aor(dsry) } }; ) スマホのときは個別にCSSレイアウトで調整する。$

まとめ
グリッドレイアウトは、アイテムのHIGHTが
キモ
hightが同じ場合は、CSS（float）だけでＯＫ！
hightが異なる場合は、Masonry.jsなどで、positionを計算！
imagesloaded.jsでイメージのロードが終わってから配置させる！
Twitter Bootstrap + Masonry.js の組み合わせは最速！最強！

MASONRY.JSの使い方は、以下のサイトの
ソースを見てもらうとわかると思います。
http://sakurashinmachi-potal.com/post-hear.php

第44回 Creators MeetUpの登壇資料です！ http://cmu.connpass.com/event/39585/ フリーランスミートアップというイベントを主催したので、その中の気付きや学び。そして、イベント主催をもっと気軽に色んな人にやってもらいたい！っていう話です。武井絵利菜@skyguild http://skyguild.jp

サイボウズのリモートワーク・リモートチームRyo Mitoma

もくもくと過ごした2016年振り返りErina Takei

Genesis Lightning Talks vol. 50(ほぼ忘年会) のLT資料です！ https://connpass.com/event/45256/ 渋谷もくもく会やフリーランスミートアップなど勉強会を開催したり、色んな勉強会に参加したよ―って話。来年はもっと積極的にアウトプットしていきます。武井絵利菜@skyguild http://skyguild.jp

WEB制作現場のボトムアップGoro Ichikawa

オープンソースプロジェクトのはじめかた@Creators MeetUp #25Erina Takei

10/12 WordBench神戸 WordPressの学習方法Yoshiko Sarakai

Kwc uxjam160831Takami Yusuke

Web制作者は変化についていけるか？変化についていくべきか？masaaki komori

作品は誰かに見てもらった方が良い！Makiko M

企業向けクラウドサービスの開発・運用　悩みどころのパターンと対策Ryo Mitoma

いざ、脱藩！Aya Komuro

SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。Daisuke Koshimizu

高校生向け「Webの仕事と働き方」keigo Fushimi

GUIツールで送る快適な Gitライフ@Creators MeetUp #29Erina Takei

第29回 Creators MeetUpの登壇資料です！ http://cmu.connpass.com/event/15401/ 昨今、非エンジニアの間でもGitが浸透してきましたが、コマンド操作に慣れない方も多いのではないでしょうか？ GUIツールでコマンドいらずなGitライフをオススメします。コマンドだと複雑な操作もラクラクなので、エンジニアの方でもこの機にぜひ。武井絵利菜@skyguild http://skyguild.jp

熊本地震支援サイトを30分で立ち上げ即日運用開始した話Cherry Pie Web

熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいことCherry Pie Web

実践大都会式プロトタイピング＆フロントエンド 2014Masayuki Maekawa

PHPとかよくわかんない系WEBデザイナーでもShifterでいろいろできたよ！というお話。Mariko Imamura

近頃のJava script界隈エセフロントエンジニアからみた世界 2017-FebKaseya Hiroshi

[daddly] Stripe勉強会運用編 2016/11/30Naoshi ONO

知っておきたい「Web制作イマドキの注目ポイント」Mori Kazue

【知っておきたい「Web制作イマドキの注目ポイント」】セミナーを担当しました。当日使ったスライドを受講していただいた方のフォローアップ目的で公開いたします。 http://r360studio.com/seminar/imedio20140411/index.html http://r360studio.com/seminar/narass20141007/index.html

Adobe Illustratorによる WordPressテーマ作成ワークフローCherry Pie Web

WEBサービス開発もくもく会尚平岡

WebPayからStripeに移行した話Takuro Niitsuma

Proposalk_watanabe

まだやれる Css preprocesserShinya Sugo

WordCamp2015 WordPressで自分の名前でドメイン取ってブログ作るとこまで面倒みるワークショップSho Shirasaka

A11v10s2Priscyla Jane

1) O documento discute o desenvolvimento tecnológico de vacinas no Brasil, identificando-o como um elo deficiente na inovação tecnológica de vacinas no país. 2) Apesar de o Brasil ter uma sólida base científica, carece de uma política específica para apoiar a inovação tecnológica, que envolve processos e requisitos diferentes da pesquisa científica. 3) O documento descreve o cenário mundial e nacional de produção e fornecimento de vacinas, destac

出版社應用(2)EVERY8D 許

More Related Content

What's hot (20)

Web制作者は変化についていけるか？変化についていくべきか？masaaki komori

作品は誰かに見てもらった方が良い！Makiko M

企業向けクラウドサービスの開発・運用　悩みどころのパターンと対策Ryo Mitoma

いざ、脱藩！Aya Komuro

SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。Daisuke Koshimizu

高校生向け「Webの仕事と働き方」keigo Fushimi

GUIツールで送る快適な Gitライフ@Creators MeetUp #29Erina Takei

熊本地震支援サイトを30分で立ち上げ即日運用開始した話Cherry Pie Web

熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいことCherry Pie Web

実践大都会式プロトタイピング＆フロントエンド 2014Masayuki Maekawa

PHPとかよくわかんない系WEBデザイナーでもShifterでいろいろできたよ！というお話。Mariko Imamura

近頃のJava script界隈エセフロントエンジニアからみた世界 2017-FebKaseya Hiroshi

[daddly] Stripe勉強会運用編 2016/11/30Naoshi ONO

知っておきたい「Web制作イマドキの注目ポイント」Mori Kazue

Adobe Illustratorによる WordPressテーマ作成ワークフローCherry Pie Web

WEBサービス開発もくもく会尚平岡

WebPayからStripeに移行した話Takuro Niitsuma

Proposalk_watanabe

まだやれる Css preprocesserShinya Sugo

WordCamp2015 WordPressで自分の名前でドメイン取ってブログ作るとこまで面倒みるワークショップSho Shirasaka

Web制作者は変化についていけるか？変化についていくべきか？masaaki komori

作品は誰かに見てもらった方が良い！Makiko M

企業向けクラウドサービスの開発・運用　悩みどころのパターンと対策Ryo Mitoma

いざ、脱藩！Aya Komuro

SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。Daisuke Koshimizu

高校生向け「Webの仕事と働き方」keigo Fushimi

GUIツールで送る快適な Gitライフ@Creators MeetUp #29Erina Takei

熊本地震支援サイトを30分で立ち上げ即日運用開始した話Cherry Pie Web

熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいことCherry Pie Web

実践大都会式プロトタイピング＆フロントエンド 2014Masayuki Maekawa

PHPとかよくわかんない系WEBデザイナーでもShifterでいろいろできたよ！というお話。Mariko Imamura

近頃のJava script界隈エセフロントエンジニアからみた世界 2017-FebKaseya Hiroshi

[daddly] Stripe勉強会運用編 2016/11/30Naoshi ONO

知っておきたい「Web制作イマドキの注目ポイント」Mori Kazue

Adobe Illustratorによる WordPressテーマ作成ワークフローCherry Pie Web

WEBサービス開発もくもく会尚平岡

WebPayからStripeに移行した話Takuro Niitsuma

Proposalk_watanabe

まだやれる Css preprocesserShinya Sugo

WordCamp2015 WordPressで自分の名前でドメイン取ってブログ作るとこまで面倒みるワークショップSho Shirasaka

Viewers also liked (20)

A11v10s2Priscyla Jane

出版社應用(2)EVERY8D 許

ロリポップと簡単インストールについて｜ゼロから始めるWordPress勉強会Yoshinori Kobayashi

2014年4月22日。コワーキングスペース茅場町で行われた、「ゼロから始めるWordPress勉強会」での説明資料です。ロリポップの説明と簡単インストールの説明を行いました。ロリポップは、ムームードメインでのドメイン取得後の設定と、加入プランが重要です。それ以外は簡単にWordPressが設定できるレンタルサーバーです。格安なので、とりあえず動かすにはよいサーバーだと思います。

jQuery UI Tabs で効率よくタブ機能を実現しよう！ 14.05.23 HTML5 jQueryビギナーズYoshinori Kobayashi

Proposal Jaringan Tanpa CPUAnto Vipro

Identifying Antibiotics posing potential Health Risk: Microbial Resistance Sc...Atai Rabby

The present study was undertaken to investigate the trends of antimicrobial resistance and identify antibiotics that are posing public health risk due to resistant microbes in Bangladesh. Antimicrobial resistance data of Bangladesh for last 10 years were searched out and compared with corresponding antibiotic consumption rates. In this study, a factor is introduced to identify the therapeutic sub-class of antibiotics that are mostly threatened by growing antimicrobial resistance. Highly resistance trend against several antibiotics such as cloxacillin, ampicillin, metronidazole, oxacillin, amoxicillin, tetracycline, cotrimoxazole, penicillin etc. were also indentified. Heat map analysis of this study revealed that nine antimicrobial agents: metronidazole, amoxicillin, tetracycline, cotrimoxazole, cephadine, penicillin, ciprofloxacin, doxycycline and nalidixic acid are associated with public health risk due to growing bacterial resistance. This study would significantly contribute in minimizing development and spread of antibiotic resistance by revealing the microbial resistance scenario and aid the effective antibiotic treatment options in Bangladesh.

Jesa 22-3gregross3

This document discusses barriers to the widespread dissemination of solar water heaters (SWHs) in South Africa. It finds that while SWHs have significant potential to reduce electricity demand and greenhouse gas emissions, high upfront capital costs present a major barrier to adoption. Additionally, the current subsidy programs from the South African government may not be sufficient to facilitate widespread diffusion. Alternative financing mechanisms are needed to overcome barriers related to affordability and make SWHs a viable investment for more end users.

Экологический проект "КРАЙ, ГДЕ МЫ С ТОБОЙ ЖИВЕМ, ДЛЯ ПОТОМКОВ Марина Д

El fenomeno de los noshows y como combatirloTuristenístico

1) Los no-shows, el hecho de reservar una cita o mesa y no presentarse ni avisar, tienen consecuencias económicas para industrias como la restauración. 2) Un estudio encontró que las principales consecuencias de los no-shows para los restaurantes son la pérdida de ingresos, alimentos y la oportunidad de vender esa mesa a otro cliente. 3) Aunque los no-shows afectan a todos los restaurantes, los que tienen mayores costos de alimentos son los más afectados porque no pueden aprovechar esos al

ФизкультураМарина Д

Logo moselectro concepts, 2-d versionsandro2001

One’s own self prJinwoo Jeong

Presentation1papagiat

A sneakzine called costumizationMichelleAakerberg

Small Biz CEDC OrientationMary Phillips

Small Biz Community and Economic Development Corp is a nonprofit organization established in 2008 to unite small businesses in Pompano Beach, Florida and advocate for their economic interests. The organization provides resources like low-cost computer classes and business workshops. It also partners with other organizations to put on events that help small businesses grow and support the community, such as business expos, health fairs, and networking events. The nonprofit aims to promote economic development, employment opportunities, and financial education for local youth.

KrafShahrudin Rahman

D4476, a cell-permeant inhibitor of CK1, potentiates the action of Bromodeoxy...Atai Rabby

To elucidate the mechanism of bromodeoxyuridine (BrdU) induced cellular senescence, we treated HeLa cells with D4476, a potent and specific inhibitor of casein kinase 1(CK1). We found that D4476 (10µM) treatment could arrest cell growth at G1 stage and induced cellular senescence when treated together with BrdU (10µM). However neither D4476 nor BrdU can induce cellular senescence alone, at a concentration of 10µM. These results suggest that the targets of CK1 may be involved in maintaining normal cellular process and their inactivation potentiates BrdU to induce senescence like phenomena.

Small biz christmas givingMary Phillips

Preparing 5min pitchDer Konijnen

This document provides an outline for pitching an idea or business in 10 slides. The slides should cover: describing the problem being solved, the proposed solution, the business model, what makes the solution special or valuable, any competition, how the idea will be marketed and sold, the proposed team, financial projections, and the current status and timeline. The pitch should have a clear title and meaning by increasing quality of life, righting a wrong, or preventing the loss of something good. While some may love the idea and others may hate it, the worst case is that nobody cares about it. Rehearsal of the pitch is also recommended.

Facultad de Filosofía Doris Fernanda IzaDorisFernandaIza

The document appears to be a template or example for writing about one's daily routine and activities. It includes headings for common daily tasks like getting up, having breakfast, going jogging, going to school, having lunch, doing homework, having a cup of tea, working on a computer, having dinner, watching TV, and going to bed. Under each heading is an example sentence describing who performs that activity and when or with whom. The overall document provides a format and examples for someone to fill in their own daily schedule and activities.

A11v10s2Priscyla Jane

出版社應用(2)EVERY8D 許

ロリポップと簡単インストールについて｜ゼロから始めるWordPress勉強会Yoshinori Kobayashi

jQuery UI Tabs で効率よくタブ機能を実現しよう！ 14.05.23 HTML5 jQueryビギナーズYoshinori Kobayashi

Proposal Jaringan Tanpa CPUAnto Vipro

Identifying Antibiotics posing potential Health Risk: Microbial Resistance Sc...Atai Rabby

Jesa 22-3gregross3

Экологический проект "КРАЙ, ГДЕ МЫ С ТОБОЙ ЖИВЕМ, ДЛЯ ПОТОМКОВ Марина Д

El fenomeno de los noshows y como combatirloTuristenístico

ФизкультураМарина Д

Logo moselectro concepts, 2-d versionsandro2001

One’s own self prJinwoo Jeong

Presentation1papagiat

A sneakzine called costumizationMichelleAakerberg

Small Biz CEDC OrientationMary Phillips

KrafShahrudin Rahman

D4476, a cell-permeant inhibitor of CK1, potentiates the action of Bromodeoxy...Atai Rabby

Small biz christmas givingMary Phillips

Preparing 5min pitchDer Konijnen

Facultad de Filosofía Doris Fernanda IzaDorisFernandaIza

Similar to グリッドレイアウトを簡単に行うJavaScript！Masonry.js (20)

Bootstrapにちょい足しアニメーション@春のJavascript祭りMasayuki Abe

だから、Webディレクターはやめられない ZYasufumi Nishiyama

2014年9月27日に札幌市民ホール会議室で開催されたSaCSS Vol.58でお話させていただいた際のスライド資料です。これは2013年9月に開催されたDirector's Nightでお話した内容の改訂版となります。（→ http://www.slideshare.net/yasufuminishiyama/directors-night-20130921 ）ここに記載されていることが全てではないですし、今現在、西山が全て出来ているかと問われるとおそらくNOですが、ご参考ください。

Rooterahide

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶNaoki Kanazawa

20160430co-edoChieko Aihara

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo

事業会社で働くエンジニアのマインドセット - DevLOVE関西Tomoyuki Sugita

Webディレクターとして word pressを提案するときに考えること + 運用Junzo Matunoo

ASP.NET MVC で BootstrapYoshitaka Seo

フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法！東洋美術学校×クラウドワークスYuki Suzuki

BizVektorに見る汎用テンプレートの設計思想Hidekazu Ishikawa

鹿駆動勉強会青江発表資料Takashi Aoe

ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka

最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点Horiguchi Seito

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo

フリーランサーの2014年振り返りKiharu Sasaki

メンテナブルなJsってなんだろうDaiki Matsumoto

「おれおれサービス」に挑戦しようHidekazu Ishikawa

_s + bootstrapで始めるWordPressテーマ開発入門Hidetaka Okamoto

Bootstrapにちょい足しアニメーション@春のJavascript祭りMasayuki Abe

だから、Webディレクターはやめられない ZYasufumi Nishiyama

Rooterahide

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶNaoki Kanazawa

20160430co-edoChieko Aihara

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo

事業会社で働くエンジニアのマインドセット - DevLOVE関西Tomoyuki Sugita

Webディレクターとして word pressを提案するときに考えること + 運用Junzo Matunoo

ASP.NET MVC で BootstrapYoshitaka Seo

BizVektorに見る汎用テンプレートの設計思想Hidekazu Ishikawa

鹿駆動勉強会青江発表資料Takashi Aoe

ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka

最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点Horiguchi Seito

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo

フリーランサーの2014年振り返りKiharu Sasaki

メンテナブルなJsってなんだろうDaiki Matsumoto

「おれおれサービス」に挑戦しようHidekazu Ishikawa

_s + bootstrapで始めるWordPressテーマ開発入門Hidetaka Okamoto

More from Yoshinori Kobayashi (20)

勉強会、コミュニティの初まりと成長 Developers Summit 2017Yoshinori Kobayashi

めざせ！書籍出版！「これからはじめるiPhoneアプリ開発入門」執筆陣に聞いてみよう！ at 貸会議室6FYoshinori Kobayashi

１月２８日に開催される「めざせ！書籍出版！「これからはじめるiPhoneアプリ開発入門」執筆陣に聞いてみよう！」のスライドになります。当日は、こちらのスライドをもとにパネルディスカッションを行います。書籍「これからつくる iPhoneアプリ開発入門～Swiftではじめるプログラミングの第一歩～」の執筆活動やそれに至るまでの活動の話をして、これから出版を始めたい方に情報共有できればと思います。詳細はこちら： http://bit.ly/2jIrxFP

これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！Yoshinori Kobayashi

2017年1月19日（木）三省堂書店池袋本店書籍館4Fイベントスペース「READING TOGETHER」にて、【「これからつくるiPhoneアプリ開発入門」の執筆陣が話す、iPhoneアプリ開発の学び方と楽しみ方】というワインコインセミナーを開催します。セミナーで使用するスライドを公開いたします。本セミナーでは、これからiPhoneアプリを作っていきたい人にとってはとても有益な情報が得られることと思います。また、独学でプログラミング学習を進めているけど、行き詰まっている方のヒントにもなる内容です。執筆陣はたくさんの書籍を読んで調査していますので、その経験を活かして、コメント入りのおすすめ書籍のリストをお渡しいたします。また、都内でのiPhoneアプリのおすすめ勉強会やイベントの資料も配布されます。こちらは参加者の特典として配布されます。また、イベントの最後には質疑応答や書籍へのサイン会も行われます。 🙋 次のような方におすすめのイベントです。・これからアプリ開発をはじめたい方。・プログラミングの経験がない方。・学生、OL、年配の方。 🎁 参加者の方には、次の資料をプレゼントします。・ブックレビュー・iOS開発を学習するのにお薦めの書籍・レベルに応じたお薦めの書籍・都内で開催されている勉強会情報・オンラインで学習できるコンテンツ

iPhoneアプリ開発講座：Swiftビギナーズハンズオンセミナー｜iOSアプリを作ってみたい、すべての初心者が、体験しながら学べるハンズオンセミナーです！Yoshinori Kobayashi

TickleCodeで運営している、Swiftハンズオンセミナーです。詳細はこちら； https://swiftbg.github.io/swiftbook/seminar/ ハンズオンセミナーでは、初心者の方を対象としてiOSアプリ開発が学べます！サンプルアプリを作ることにより、動く体験と基本の知識が身に付くようになります。このセミナーが終える頃には他の入門書も読めるようになり、自分で調べてiPhoneアプリを作っていけるようになると思います。このセミナーでは、とにかく体験すること、そして後から理解することに重点を置いています。プログラミングが初めての人でもiPhoneアプリが作れるという体験ができます。ハンズオンは手順にしがたって、説明を聞き制作を行います。ぜひ、がんばって手を動かしてみてください(*^^*) ◆こんな方にオススメの講座です！・学生（中学ー大学）、社会人、シルバー世代の方・プログラミング未経験の方・iPhoneアプリはよく使うので、アプリ開発してみたい方 ◆このセミナーには初心者の方が安心して学習できるように工夫が施されています。ハンズオンセミナーの詳細はこちら： https://swiftbg.github.io/swiftbook/seminar/ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ★開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://ticklecode.doorkeeper.jp/ ## Twitter Twitterにもイベント、勉強会の情報を流しています。 https://twitter.com/ticklecode

第１次 CoEdo増床計画（小林目線）｜コワーキングスペースCo-Edo 3周年記念パーティYoshinori Kobayashi

２０１６年１月８日。コワーキングスペースCoEdo にて「【持込】Co-Edo3周年記念パーティ「なんでもお祝いするぞスペシャルDay 2016-01-07」【よろしく】」が開催されました。 LT（ライトニングトーク）でCoEdoが増床計画されたときの出来事や、その後に開催した勉強会を発表しました！改めて、３周年おめでとうございます！

愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp Tokyo 2015Yoshinori Kobayashi

WordCampTokyo 2015 でのセッションスライド愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～今回お話した内容・WordPressの可能性とスケール感を知る・焼き鳥サイトのデモとサイト構成・WordPress公式テーマの活用・WordPress公式プラグインの活用・WordPressのリデザイン（子テーマ）自分が好きな焼き鳥をテーマとして、おすすめのプラグインやカスタムフィールドを活用しても店舗出力などを説明しています。子テーマで効率的に修正するために、add_filter や add_action についてもふれました。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆制作業務 TickleCodeという屋号でJavaScript、WordPressでのWebサイト制作やSwiftでのアプリ開発、Ruby on RailsでのWebサービス開発などを行なう。業務請負や受託制作を行いながら、自社ポータルサイト・Webサービスサイトの制作運営を行なう。地域のポータルサイトや、旅行系サイト、不動産系サイトの制作運営は本人も興味が強いので、めっぽう強い。［運営サイト］ TickleCode：技術的な情報を整理して掲載している http://ticklecode.com/ I Love Yakitori!：焼き鳥が好きなので焼き鳥店の取材をしてWebサイトへ掲載している http://yakitori-ya.net/ ◆勉強会、コミュニティオープンソースであるWordPressのコミュニティ・イベントの運営にも携わりながら、自らも勉強会やイベントを企画運営する。 WordPressもくもく倶楽部、Swiftビギナーズ倶楽部など、多数の勉強会・セミナーの開催を行い、自身もスピーカーや講師を行っている。［定期開催している勉強会］ Swiftビギナーズ倶楽部： 2014年11月より開催。SwiftでiOSアプリ開発を勉強するための会。 https://swift-beginners.doorkeeper.jp/ WordPressもくもく倶楽部： 2014年11月より開催。WordPressでの制作・運営を勉強するための会。 https://wp-moku.doorkeeper.jp/ WordPressコントリビュート倶楽部： 2015年12月より開催。WordPressコントリビュート（翻訳、プラグインなどの貢献活動）を勉強するための会。 https://wpmake.doorkeeper.jp/ Ruby / Ruby on Rails ビギナーズ勉強会： 2015年1月より開催。Ruby on Railsでの制作・運営を勉強するための会。 https://coedo-rails.doorkeeper.jp/

勉強会を開催したことで起こったこと｜#ブロフェス2015 Yoshinori Kobayashi

ブロガーズフェスティバル2015にてLT（ライトトーク）をさせて頂きました。会場には200名を超えるたくさんの方ががいて、とても緊張しました！色んな方と交わることができ、ブログに対する熱気も感じてとてもよい刺激になりました！！勉強会を開催して、参加者の方と交わりながら色んなサイトを作ってきました)^o^( もっと、記事を書いて、サイトを作って来年もLTしてみようと思います(・∀・)

Instagram Ruby Gem と Instagram API から学んだことまとめ｜【CoEdo.rb】Ruby / Ruby on Rails ...Yoshinori Kobayashi

2015年7月4日に開催された、「【CoEdo.rb】Ruby / Ruby on Rails ビギナーズ勉強会第６回」での発表資料です。ショートセッション（10分程度）で発表しました。 Instagram Ruby gem を使って調査してみました。詳しい説明は、Instagram Web API を見たほうがよいと思います。今回は、user_recent_mediaメソッドを使て、ユーザーの最近の写真投稿を取得して表示してみます。その中で、調べたことや学んだことをまとめています。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「Ruby / Ruby on Rails ビギナーズ勉強会」は初心者が集まって発表したり、自主学習する勉強会です。定期開催しています。 ★勉強会で発表されたスライド、動画をまとめています。 Ruby / Ruby on Rails ビギナーズ勉強会スライド・動画 #coedorb http://matome.naver.jp/odai/2143761931840509901 ★開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://coedo-rails.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/rorbeginners/ ## Twitterハッシュタグハッシュタグは、 #coedorb です。 Twitterにもイベント、勉強会の情報を流しています。 ★勉強会を動画収録しています。 ## Ustreamで勉強会を中継しています。 http://www.ustream.tv/channel/ruby-ruby-on-rails-%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%82%BA%E5%80%B6%E6%A5%BD%E9%83%A8 ## Youtubeでセッションを動画収録しています。 https://www.youtube.com/playlist?list=PL2ojdc4KhtHniIyIUx3AdO621ydzz5zpP

個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方｜WordBench山梨 Vol.1：WordBench山梨はじめの一歩Yoshinori Kobayashi

2015-06-27（土）に開催された、「WordBench山梨 Vol.1：WordBench山梨はじめの一歩」(https://wbyamanashi.doorkeeper.jp/events/25000) でのセッションスライドです。自分がWordPressにかかわり始めたころに学習したことと、コミュニティへの参加していった経緯をまとめることで、次の方の参考になるのではないかと思いました（＾０＾）今は、よりたくさんの書籍や動画学習サイトもありますので、初心者の方がよりWordPressに入りやすくなったと思います。僕の個人的な感想としては、WordPressの勉強会に参加して、WordBenchを運営したり、WordCampを運営したりしたことでかなり詳しくなって、WordPressのこともよくわかるようになりました。そして、もくもく勉強会も開催し始めたことでより学習して、WordPressで制作するようになりました（＾０＾） WordPressコミュニティ運営や勉強会を開催したいと思っている人のキッカケになればよいと思っています。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「WordPressもくもく勉強会 at コエド」を開催しています。 WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://wp-moku.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/194782003975961/ ## Twitterハッシュタグハッシュタグは、 #wpmoku です。 Twitterにもイベント、勉強会の情報を流しています。

WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント！｜WordPressもくもく勉強会 at コエド第6回Yoshinori Kobayashi

2015-04-12（日）14:00 「WordPressもくもく勉強会 at コエド第6回」 WordPressテンプレート階層を理解する。ーテーマカスタマイズに必要な5つのポイント！ーショートセッションでのスライドです。 WordPressテンプレート階層の読み方を説明して、テーマのカスタマイズに必要な箇所をピックアップして話ました。特に、フロントページ（トップページ、ホームページ）の設定方法を整理して話ました。フロントページは、ブログ一覧や固定ページを設定したいときもあれば、特別なデザインを適用したいときもあります。そんなときの設定方法をまとめています。 WordPressテンプレート階層をよく理解することで、テーマのカスタマイズを行う勘所みたいなものが身につくと思います。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://wp-moku.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/194782003975961/ ## Twitterハッシュタグハッシュタグは、 #wpmoku です。 Twitterにもイベント、勉強会の情報を流しています。

WordPressで作る世界遺産サイト｜Weather Underground Plugin を活用して、世界の天気予報を表示編｜WordPress...Yoshinori Kobayashi

2015-03-08（日）14:00 「WordPressもくもく勉強会 at コエド第5回」ショートセッションでのスライドです。位置情報から天気予報を表示してみました。世界中の天気予報を表示することができます。 Weather Underground Plugin を導入して、ショートコードを設定するだけでかなり簡単にできます。細かなデザインや、動きの場合はテンプレートにショートコード埋め込むことで対応もできます。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://wp-moku.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/194782003975961/ ## Twitterハッシュタグハッシュタグは、 #wpmoku です。 Twitterにもイベント、勉強会の情報を流しています。

WordPressで作る世界遺産サイト｜Youtube Data API を使って動画取得編Yoshinori Kobayashi

2015-02-08（日）14:00 「WordPressもくもく勉強会 at コエド第４回」ショートセッションでのスライドです。世界遺産サイトを制作しながら、キーワードからYouTube動画を取得して、プレイヤーを表示して、再生できるようにしました。キーワードで除外も設定できるので、より柔軟に動画が取得できます。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://wp-moku.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/194782003975961/ ## Twitterハッシュタグハッシュタグは、 #wpmoku です。 Twitterにもイベント、勉強会の情報を流しています。

WordPressで作る世界遺産サイト｜Instagram API を使って現地フォト取得 Yoshinori Kobayashi

WordPressでInstagramを活用することで、現地のリアルタイムなフォトがサイトに掲載できるようになります。 ★Instagram（インスタグラム）について 2014年の最終統計では、毎月3億人。なので、10倍になっている。写真の総数は300億枚を超える。 Instagramはカメラアプリで初めて豊富なフィルタを持っていたと記憶している。そして、最近はショートムービーも投稿できる。スマホの初期のころから、TwitterやFacebookへ写真が投稿できた。

WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース茅場町 Co-EdoYoshinori Kobayashi

東京のコワーキングスペースで毎月開催されている、WordPressもくもく勉強会です。「もくもく」の意味は、個人でコツコツと学習するという意味です。学習中にわからないことがあれば、みんなで考えましょう！という勉強スタイルです)^o^( WordPressもくもく勉強会の運営と主旨についてまとめています。このイベントの目的は３つです。・各自、書籍などで集中してもくもく勉強できる環境を作ること。・近くの人に気軽に聞けて問題解決の手助けになること。・交流して、仲間を増やすこと。この会にはアドバイザー（相談役）として、WordPressをよく知っている人も参加しています。普段からの疑問や解決したいことがあれば、運営者やアドバイザーに聞いて頂ければと思います。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループイベント申し込みを受け付けている、DoorKeeper でのグループです。 https://wp-moku.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/wpmoku/ ## Twitterハッシュタグハッシュタグは、 #wpmoku です。 Twitterにもイベント、勉強会の情報を流しています。

WordPressで作る世界遺産サイト｜カスタムフィールドとカスタム投稿編Yoshinori Kobayashi

2014年11月第16回ゼロから始めるWordPress勉強会「WordPressで作る世界遺産サイト｜カスタムフィールドとカスタム投稿編」でのプレゼン資料です。サンプルで世界遺産のサイトを作りました。 http://www.world-ht.net/worldheritage/mont-saint-michel/ カスタムフィールドとカスタム投稿に絞って説明をしています。カスタムフィールドは、WebAPIにパラメタを与えたり、キャッチ画像を設定したりできて、拡張性が高いです。商品の名称や価格を設定すれば、商品やサービスの一覧も作ることができます。なによりも、テンプレート化（雛形化）できるので入力作業が簡単になるのもよいと思います。カスタム投稿は、基本の投稿と完全に分類できてしまうことがよいです。スタッフブログを運営しながら、商品やサービスの投稿もするなど、１つのWordPressで完全に分離して管理できます。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ## WordPressの勉強会について次の勉強会を定期的に運営または講師をしています。 ◆ゼロから始めるWordPress勉強会 DoorKeeper：　http://coedo-wordpress.doorkeeper.jp/ 公式サイト：　http://zerokarawp.com/ Facebook：　https://www.facebook.com/groups/194782003975961/ ◆WordPressもくもく倶楽部 DoorKeeper：　http://wp-moku.doorkeeper.jp/

WordPressのテンプレートタグを理解するYoshinori Kobayashi

2014年10月第15回ゼロから始めるWordPress勉強会「WordPressのテンプレートタグを理解する」でのプレゼン資料です。 WordPressのテンプレートタグに絞って説明をしました。そもそも、テンプレートタグってなんなの？から、テンプレートタグbloginfoを解析することでどのような仕組みなのかに触れてみました。なんとなく、WordPressの全体的なとこから、テンプレートタグの位置づけが分かってもらえたらと思います。

Sassについてゼロから解説 -基本の理解だけでも効率アップ-｜第14回ゼロから始めるWordPress勉強会Yoshinori Kobayashi

2014年9月第14回ゼロから始めるWordPress勉強会「Sass+Bootstrap+_sでテーマを作ろう」＆質問大会！でのプレゼン資料です。 Sassを説明しました。 CSSを直接書くよりも、Sassを使って書いてほうが楽にかけて、効率的です。 Sassは最初は理解しにくいかもしれませんが、直ぐに慣れてくるので、だんだんと効率よくWebサイト制作ができるようになります。初級者の方がでもわかりやすいようにまとめました。初級者に薦めるなら、次の６つが便利な機能だと思います。１．構文の階層化２．変数３．親セレクタ参照　&（アンパサンド）４．関数５．四則演算　＋、－、×、÷ ６．インターポレーション（差し込む、補間）上記の６つの機能を使えるだけでも、かなり楽になります。通常のCMSやホームページなどであれば、上記の６つの機能だけでも十分だと思います。 ★Windowsの場合は日本語に注意！フォルダ名、ファイル名で日本語はNG　なので使わない。 [Decode error - output not utf-8]　のエラーがでた場合は、以下の記事が参考になります。 http://cappee.net/coding/sublime-scss-compass-emmet Invalid Windows-31J character “\xE3”　のエラーがでた場合は、以下の記事が参考になります。 http://frmmpgit.blog.fc2.com/blog-entry-34.html

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-Yoshinori Kobayashi

2014年9月秋のJavascript祭り　でのプレゼン資料です。 D3.jsを使って、データビジュアライゼーションの説明と使い方を説明しました。 D3.jsは学習コストが高いですが、非常に細かく、高度なビジュアル表現できます。人口統計データを活用して、東京23区の人口情報の動きを作ってみました。 http://www.slideshare.net/YoshinoriKoba/d3js-38787078 個人的には、次の３つポイントだと思います。１．メソッドチェーン　jQuery とよく似ていて、D3.jsでは多用される。２．スケール（縮尺）　実データの分布を、実際の描画位置にマッピングする。３．Dataメソッド　データを保存して、１つずつ取り出しができるようにする今回デモサイトを作成してみて、思い通りうごくまでなかなか時間がかかりました。 D3.ｊｓの独特のお作法があるので、これを理解しないとどのようにコードしたらわらかない。あと、jQueryと同様のことができるので、実際の制作では、セレクタやセットをjQueryで行うのか、D3.jsで混乱する場面があります。極力、D3.jsで行い、できないことをｊQueryで行うのがよいかなという印象です。

Bootstrapを使って効率よくWordPressオリジナルテーマを作るYoshinori Kobayashi

2014年8月 WordBench東京8月勉強会「制作現場を爆速にする妙技をシェアしあおう！！」「Bootstrap を使って効率よくオリジナルテーマを作る！」というテーマで話しました。自分でオリジナルテーマを作りたくても、制作に時間がかかりすぎることがあります。テーマ制作に、Bootstrapを使う理由とオリジナルテーマを作るときのポイントをシェアしようと思います。

プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...Yoshinori Kobayashi

プログラミングが初めての人。学習方法がわからない人。これから新しい言語を学ぶ人。今回は、プログラミングの学習方法についてのお話向けのお話です。プログラミングを高速で身につけるには、写経( しゃきょう）がよいです。サンプルプログラムやテキストのコードをとりあえず、どんどん打ち込むことで慣れや間隔が身に付きます！もっとも挫折しにくくて、初心者でもはじめやすい勉強になります。

勉強会、コミュニティの初まりと成長 Developers Summit 2017Yoshinori Kobayashi

めざせ！書籍出版！「これからはじめるiPhoneアプリ開発入門」執筆陣に聞いてみよう！ at 貸会議室6FYoshinori Kobayashi

これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！Yoshinori Kobayashi

第１次 CoEdo増床計画（小林目線）｜コワーキングスペースCo-Edo 3周年記念パーティYoshinori Kobayashi

愛があれば発信できる！WordPressで作る焼き鳥ポータルサイト～公式テーマ・プラグインと子テーマの活用～｜WordCamp Tokyo 2015Yoshinori Kobayashi

勉強会を開催したことで起こったこと｜#ブロフェス2015 Yoshinori Kobayashi

Instagram Ruby Gem と Instagram API から学んだことまとめ｜【CoEdo.rb】Ruby / Ruby on Rails ...Yoshinori Kobayashi

個人の成長に合わせた、WordPress学習方法とコミュニティへの関わり方｜WordBench山梨 Vol.1：WordBench山梨はじめの一歩Yoshinori Kobayashi

WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント！｜WordPressもくもく勉強会 at コエド第6回Yoshinori Kobayashi

WordPressで作る世界遺産サイト｜Weather Underground Plugin を活用して、世界の天気予報を表示編｜WordPress...Yoshinori Kobayashi

WordPressで作る世界遺産サイト｜Youtube Data API を使って動画取得編Yoshinori Kobayashi

WordPressで作る世界遺産サイト｜Instagram API を使って現地フォト取得 Yoshinori Kobayashi

WordPressもくもく勉強会について― WordPressもくもく倶楽部 at コワーキングスペース茅場町 Co-EdoYoshinori Kobayashi

WordPressで作る世界遺産サイト｜カスタムフィールドとカスタム投稿編Yoshinori Kobayashi

WordPressのテンプレートタグを理解するYoshinori Kobayashi

Sassについてゼロから解説 -基本の理解だけでも効率アップ-｜第14回ゼロから始めるWordPress勉強会Yoshinori Kobayashi

D3.jsでのデータビジュアライゼーション -人口統計データから使い方を学ぶ-Yoshinori Kobayashi

Bootstrapを使って効率よくWordPressオリジナルテーマを作るYoshinori Kobayashi

プログラミングの学習方法 | How To Learn The Programming 14.05.31 WP-D Fes #02 Interviews ...Yoshinori Kobayashi