# WordCamp US レポート ## 大切な注意 - 私は英語力がほぼないに等しいので、全く別の理解をしている可能性があります。このメモはその程度ということで御覧ください。 ## ソーシャル関連 - Twitter ハッシュタグ : #wcus - [https://twitter.com/search?q=%23wcus&src=typd](https://twitter.com/search?q=%23wcus&src=typd) - slack channel : wcus # [The Modern WordPress Developer’s Toolbox](https://2015.us.wordcamp.org/session/the-modern-wordpress-developers-toolbox/) WordPressでサイト作りするときの環境。日本もおなじだなという印象。 - Tracy Rotton - rp3 - @talipecat - Git - functions.php - define ( 'DISALLOW_FILE_EDIT' ,true); - vagrant - phpのバージョンもチームで合わせられる - vvv - PACKAGE MANAGERS - COMPOSER - php - npm - node - bower - sass - fontawesome - TASK RUNNER - grunt - gulp - WP-CLI - scripting! - _s - Starter theme - include Sass - WORDPRESS PLUGIN BOILERPLATE - plugins - show template - Debag bar - fire bug - theme check - RENEGERATE THUMBNAILES - WP MIGRATE DB (pro) - CustomField ACF - Custom post type - CONCLUSION # [The Future Stack: Running WordPress with Tomorrow’s Technologies](https://2015.us.wordcamp.org/session/the-future-stack-running-wordpress-with-tomorrows-technologies/) これからの未来に使っていくであろうテクノロジーの紹介、2015年はターニングポイントだったとのこと。確かに色々出ましたね。 - php7 - http2 - css new propaty - nth-xxx - color() - read-only - read-wright - https - everywhere - IETF - Browsers - encrypt - ACME(アクミー) - wp cert new - ECMAScript 6 - return - new promis - Arrow Finctions - default and rest - function foo(..a) - resolve - Babel(js コンパイラー) - 2015 is Awesome # [React + WordPress](https://2015.us.wordcamp.org/session/react-wordpress/) 話題のcalypsoを含むjsの内容 - 最初の質問です - 今後のWordPressの管理画面はどうなるでしょうか? - テクノロジーの進化 - 10年前のWordPress管理画面とはだいぶ違います - いろいろ進化したけど、複雑になりすぎています - そこでreact - 沢山のサイトが利用している - .comも - calypso - githubで開発しているオープンソースなのですぐにみつかるよ - spa - jsで書かれている - .com製のrest apiで動かしてる - reactをやるために - small api to learn - not need for separate template - Dom操作だけに限定 - compasition of component - functions > template language - jsx syntax extension - 次の質問 - Why do components matter? - JSC + Sass - Live components gallery - components begein to desine app level semantic. - WP React Blolerplate - github.co,/goorne/wp-react-boilolerplate - install calypso # [Streamlining the Web Design Process Using Style Tiles](https://2015.us.wordcamp.org/session/streamlining-the-web-design-process-using-style-tiles/) 割と前からあった、スタイルタイルのお話。制作面だけでなく、お客さんとのディレクション面において、最初の合意と、それ以降の指針にするというところはとても納得感ありました。 - スタイルタイルをつくることで - お客さんへの説得材料を増やす - マークアップ時の指針を作る # [Build a Theme with the REST API](https://2015.us.wordcamp.org/session/build-a-theme-with-the-rest-api/) あたらしいrest apiを利用したテーマの作り方の紹介 - WP4.4 - WP rest api 2.0 - jQuary - Underscore.js - Director ## setup - functions.php - index.php - `<head>` - `<body>` は箱だけ - JSとCSSを読み込む - js/main.js - define the routes - define variables - click handler for logo - style.css ## RECAP ## DSIPLAY POSTS FROM RESPONSE - WP REST API - Director - Demo theme file - slides ## rest api 関連のtheme - https://github.com/Automattic/Picard - https://github.com/jacklenox/REST-API-Theme # [REST in Action: The Live Coverage Platform at the New York Times](https://2015.us.wordcamp.org/session/rest-in-action-the-live-coverage-platform-at-the-new-york-times/) New York TimesのBlog部署の人が、実際に2008年頃からつくってきたサイトをリニューアルした話。こういう過去のデータのリファクタリングを含めたリニューアルは大変面倒だと思うのですが、やっちゃうところが流石です。 - BLOG TEAM - NYT5 SYSTEM - 影響範囲を限定するためにNAMESPACEを利用する - MIDTERM ELECTIONS LIVE BLOGGING TOOLS - 管理画面の改造にBACKBORN.JSを利用する - 2008年のコードをすべて書き換えた - WordPressはウェブサービスになる - Fire and Forget - SEO大丈夫? - いろいろやってる - たとえばダイナミックにgoogleサイトマップを書き換えたり # [From Blog to Book: Re-purposing Your WordPress Blog into an eBook]( https://2015.us.wordcamp.org/session/from-blog-to-book-re-purposing-your-wordpress-blog-into-an-ebook/) 高橋文樹さんの話とにているかなとおもったら、割りと周辺の話なのでした。横書き文化だと、より簡単にpublishできるということかな 1. Content Audit 1. Organaize Your eBook - 章立て 1. Write 1. Enhance - 表紙のデザイン - あるなら動画もリンクやQRコードも 1.Publish - PDFでいいよ! - kindleもiBookもあるからドキュメント見てね 1.マーケティング - 最初は無料にしましょう - ブログでも宣伝しましょう - [Easy Digital Downloads plugin](https://wordpress.org/plugins/easy-digital-downloads/)がとても簡単でいいよ 1.Beyond Your book - 買ってくれた人にメールチンプをつかって連絡しましょう 最後にとりあえずテキストがブログにあるなら無料でできるし、いいよー。 # [7 Typography Rules I wish I Knew Before Designing a Theme](https://2015.us.wordcamp.org/session/7-typography-rules-i-wish-i-knew-before-designing-a-theme/) 読みやすく素敵なdesignにするための文字扱い周りの7つの方法 1. 読みやすいのは85文字で改行する幅 1. つねに左寄せに。 - ジャスティファイは、CSSではいまいち 1. 行間 - `line-hight:1.5;` ぐらいが良いんじゃないかな - 見出しなら `line-hight:1.2;` ぐらいかな 1. 縦方向のリズム - 見出しと段落の上下の余白がグループとして見られるように調整 1. 黄金率 - 16,26,42,68,110,177, - [type-scale.com](http://type-scale.com/) 1. typefaces - 読みやすさ 1. Break the rules # セッション以外 ## 入場からオープニングについて - 上着を書けるハンガー - みんな使える親切設計 - もちろん盗まれるかどうかは自己責任だろうけど。便利です。 - ABC順の入場 - 約2000人のエントリーということで、8つぐらいの受付があって、ファーストネームの頭文字がA-Cの人はこちらと言った感じ、目立った混雑や混乱はなく、受付は成功しているように見えました。 - 実際の受付は、口頭で名前をいう形。受付側はプリントアウトした紙からそれを探して、ペンで消す。アナログがこういうのは早いし安全ですね。 - オリジナルステッカー - 自由にとってねという感じで、どかっと置いてあるだけ。自由を感じます。 - オリジナルネームカード - クオリティーが高く、ちょっとうれしくなるぐらいです。デザインもかっこいい - チラシの配布など全く無し - 全くもらいません。スポンサーさんはブースでアピール! ## オープニング・セレモニー - 会場の案内 - スポンサー紹介 - 3階の一番大きな会場で行われた - その後、1階の3会場でセッション開始 ## セッション全体について - 2時間毎ぐらいに区切りがあり、そのなかで3人がしゃべるセッションもあれば、1人が担当するセッションもある - リアルタイムの動画配信 - リアルタイムのスピーチキータイピング - リモートでやってるもよう。会場にタイピングの人はいないっぽい。 - みんなとても早口なのに、追いつく勢いでタイピングが進むことから、プロを雇ってるのかな?と感じるぐらい。 - どっちみち、英語力無く活かしきれませんが。。 - スピーカーのスライドの設定がプロジェクタにうまく表示されないケース - 比率があわなかったり、出なかったり。 - PDFが自動再生になったり。 - ここは世界共通でありがちですね。 - 質問マイクシステム - だれかが質問のマイクをもって走るのではなく、質問者が質問用のマイクのところまで行って質問する - 終わりの時間がきて、司会の人が「後一人で終わりです。」というとすごすごと質問者が帰っていく。 ## wifi問題 - 私だけかもだけどレンタルしたwifiも会場全体のwifiも全く入らない - どうやらみんな入らない模様 - それでもわりとみんなニッコリやっていてアメリカの人も悪い人ばかりじゃない - 会場のつくり上、一般のwifiがダメっぽい - 参加者の年齢層 - 若いとは言えない - おそらく30代の人が多そう - もっと年上のひとも結構いる - 海外の人は日本人より老けて見えるというから、もしかしたら若いのかも。 - グッチのカバン等をもったお金持ちそうな人々も結構いる。 ---------- # 2日目 ---------- # [Decoupled Development with WordPress JSON APIs](https://2015.us.wordcamp.org/session/decoupled-development-with-wordpress-json-apis/) MattCheney, MarkLlobrera 最後の方しかみられなかったけど、restを利用して、googlemap上になにかしらいろいろ表示するデモをされてました。 # [Make WP_CLI Work For You: Extending WP_CLI With Custom Commands](https://2015.us.wordcamp.org/session/wordpress-the-next-generation-a-look-into-wordpress-sites-5-20-and-50-years-into-the-future/) wp_cliの概要とcustom commandの作り方。とても簡単にできそうですね。 `wp megane` で自分好みの制作環境が一発で立ち上がる日も近い Chris Wiegman ## 概要紹介 - wp-cliについての概要説明 - 動いているWordPress内でうごかす - 大抵のことが出来る - シンプルなAPIがあって、拡張できる - なんで拡張するの? - 基本コアにしか対応してないので - pulguinやthemeを動かすには拡張がひつようですよ - こんなことができる - ログを書いたり - 表示非表示を設定したり - cacheをコントロールしたり - Handle security functions - 例 - エサルティックsearchやElasticPress - create munin and monit pulugins - clear iThemes Security logs and lockouts - Compare a screenshot og a traging site to production - funtom jsを利用したり - handicap a user via Fail2ban - Offload heavy tasks ## 新しいコマンドを作るために - WP_CLI::add_command('hellow','hellow_world_command') ```php <?php class hellow_world_command{ xxxxx } ?> ``` できたら ```shell $ wp hellow ``` これでOK。オプションも割と簡単にできます。 結果としていろんなことが簡単にできるし、速くなりますよ。 ## カスタムコマンドを作るために - don't automatically register commands - success and failure are not treated equal - Errorだった時の文言表示準備しとこうね - user the fourmatter - 利用リスト - json - table - csv - IDs - count - たとえば管理者をjson形式で表示などできる - it can do a progress bar too - use the force utils - locate_wp_comfig() - write_csv($fd,$rows,$headers = array()) - lounch_editor_for_input($input,$title='WP-CLI') - parse_url($url) - is_windows() - we don't need no stinkin plugin # [Accessibility: Proven, easy integration into design and development workflows](https://2015.us.wordcamp.org/session/accessibility-proven-easy-integration-into-design-and-development-workflows/) アクセシビリティーの話。ここはのちほど詳しく書きたい。おそらく来年は個人的にアクセシビリティー元年となりそう。5人に1人程度いるdisabilityの人にも使いやすいサイトへ。 - 5人に1人は何らかdisabilityがある。 - 175 billion 年間 - なんか大きなマーケットで儲かりそうでしょ? - disability はいつでもだれでも参加できる - すこしまえ脳に腫瘍があった - 入院して大変だった - からだに影響が出て、マウスが触れなかったり、キーボードももちろん叩けなかった。 - そういうことって誰にも訪れるよね。 ## どうしたらはじめられる? - これは終わりのないプロジェクトであると認識すること、 - has role in making a website accessbillity - ガイドラインを利用する(WCAG2.0) - consider usabillity testing with people with disabbillies. - そしてtestして実行する - みんなでやる ## 必須 - W3C WEB CONTENT ACCESSIBILITY GUIDELINE 2.0(WCAG) - ちなみに34Pとめちゃ長いです! - 4principles - 12 guideline - 61 の達成テスト - レベルA - レベルAA - レベルAAA - さくっとやるなら - とりあえずwcagは忘れないこと - あともろもろ。。 ## 具体的に - altは必須だ - videoにはキャプションを - grade level of around 8 - readability.com にURLを入れればテストできるよ - design consistents interfaces - check color contrast - いくつかコントラストを確認するのに助けてくれるサイトを紹介 - chromeでライトブラーをかけて、見られればOK - beware of line length issues - keep related items close - desgin focus states for link, buttons,etc - design for error states ## 作るときにどうするか? - web standards に従う - ページごとにlanguageを - semantics markup - alt - .screen-reader-text - movile-first,responsive-design - keybordtest - キーボードだけの操作で思ったようにサイトを使えるかどうか - フォームの入力ができるか - テスト - アクセシビリティーのユニットテスト - plugins - access monitor - WP accessibilyty - Genesis accessibilyty - contact form 7 accessibillty plugin - とにかくkeyboardだけでつかえるかどうか - アクセシビリティーレディーのテーマを利用してみる # [WordPress in the White House: Development of the Open Innovation Toolkit](https://2015.us.wordcamp.org/session/wordpress-in-the-white-house-development-of-the-open-innovation-toolkit/) ホワイトハウスでの活用例、活用はもちろん、その成果物もオープンソースへ。ぐるぐるまわすことで、みんな便利に、みんな最適に sara cope - tool kit のwebsite - [federal crowdsourcing and citizen science toolkit](https://crowdsourcing-toolkit.sites.usa.gov/) - Open Gov Action Plan を元にしています - crowdsourcing - citizen archivist dashboard - citizen science - monarch larva monitoring project - Design - Open opportunities - エージェントがpinbordにかいてそれをみんなで解決していく - six months zero budget brand new , mixed remote team. - 結果WPのテーマがダウンロードできるよ - plugins - SITES - jetpack - custom css - DIGITALGOV serch program - Team tools - slack - chrome dev tool - challenges - challenge.gov ## resource - data.gov - cio.gov - digitalgov.gov - sites.gov # [WordPress In Higher Education](https://2015.us.wordcamp.org/session/wordpress-in-higher-education/) 大学のなかで様々な利用のされ方をするWordPressの事例紹介 ### 大学での利用状況 - the UMW website - multi-network instance - 53 net warks - 344 total site - 115 plugins - top-level multisite - 24 multisite - 61 active plugin ### 利用事例の紹介 - Blogiing - news & magazines - department sites - .comみたいにいろんなサイトを管理するサイト - top-level & more - department sitesを管理するもの - the whole site - as a front-end for wikis - 良い見栄えにするためにも - to run / /manage courses - 授業自体やその一部をWordPressを利用してオンラインでやる場合も - もちろんその他のソーシャルサービスも使いながら - living documents and open textbook - 授業で利用するテキストをWordPressをつかって制作し、公開する試み - コストの削減に繋がる - building communities - buddypressが大学で使われているケースもあります - digital signage & presentatons - 大学のデジタル掲示板管理や、プレゼンテーションにもWordPressが使われています。 - domain of one's own - just about anything - microsites - web app - learning management system - event/resource - eportfolios - conference sites - campus maps & tours - policy / syliabus - WordPressで何でもかんでもできそう ## そのためにどうしているか? - server config - selfhost - その他色々 - common setups - single sign-on - multisite and multi-network - aggregation - version control - Feature themes/plugins - common challenges - acoount control - quality-control - performance - security - resources ## なんでWordPressをつくるのか? - オープンソースであるということ。それがなにより # [Meeting the New York Times Challenge: delivering the news over HTTPS](https://2015.us.wordcamp.org/session/meeting-the-new-york-times-challenge-delivering-the-news-over-https/) Paul Schreiber 2015年11月にnewyorktimesのサイトはすべてhttpsに移行したそうで、その関連からhttpsのお話 - http is ded. time is comming - モダンブラウザ(chrome,firefox)がhttpはセキュアじゃないといってる - us gov はすべてhttpsというガイドラインで動いている ## 具体的なhttpとhttpsの違いの説明 - httpはそのままTextででる - httpsは暗号化されている - httpsは有償 - 証明書を購入するから - httpsは遅い? - 暗号化するから - しかし、http2がきた - httpsがhttp2には利用される ## ドメインの例 - megane.com - megane.info - megane.biz - bata.megane.biz - test.bata.megane.biz ## SGC - organization validation - extended validation ## let's encrypt - 無料! ``` $ sslmate mkconfig ``` ``` $ wp cert new ``` ## httpsへ - https enabled - https default - hsts - hsts preload ## SNI SHA1 vs SHA2 ## みんなhttpsに - ソーシャル関連 - メディア関連 - DoubleClick - outbrain - CDNs - webfonts ## コストは? - free ## 速度は? - 2008 httpsは遅い - 2015 httpsは速い! ← 会場笑い - WordPressは1.88倍に ## 注意 - httpとhttpsのミックスはNG - コマンドでも調べられる - content-security-policy [Navigating Today’s Website Threats!! – A Stroll Through WordPress Security](https://2015.us.wordcamp.org/session/navigating-todays-website-threats-a-stroll-through-wordpress-security/) セキュリティーの会社として有名のSUKURIのCEOさんのセキュリティー関連の話。プレゼンテーションのしかたが非常に上手でした。 Tony Perez - SUCURI CEO - Sensory Overload - WordPress - Environment ## 脅威について - update everything - 脅威:1 - Website Owners - どうやってよくするか - WordPressはサーバにおいてアプリケーションレイヤー - アプリケーション - サーバアプリ - サーバ - 攻撃の種類 - Access - ブルートフォースアタック - Environment - xxs攻撃 - software - awareness - education - Denial of Service(DoS) - 攻撃の段階 - サイトを見つけてから、バージョンをしらべ、攻撃し、行けたら、もういろいろする - Why? - Search Engine Poisoning(SEP) - drive by Downliads - Website Blacklisting - Website Defacement > セキュリティーはリスクマネジメントであり、リスクは0にはならない - Defense in Depth - people - process - technology - Access Control - Software Vulner - Website backups # State of the WORD 場所を3階の一番大きな会場にうつして、WordCamp USを締めくくるmattさんの公演 ## 先にPhiladelphiaの偉い人の話 - 12月5日をPhiladelphiaではWordPressの日とする! - というわけで、その表彰 - https://twitter.com/ChrisEdwardsCE/status/673263498693070848 # matt ## しばし黙祷 - alex king - kim parsell ## 10年目 - 世界で一番おおきなWordCamp - 最初は2006年 - その時WordPress2.1 - そこから今日までの軌跡を紹介 - Milestones:The Story of WordPressという本が出るよー ## WordCamp Statsu - 89 camps - 601 organizer - 1.6k speaker - テクノロジーが人の輪を広げる ### Slackの利用 - 2million comment ### 新しいランゲージパックの開始 - All themes & plugins now start Language pack! ### 25%のサイトがWordPressになった ここからはこれをみて - [マットのセッションのライブまとめ](https://2015.us.wordcamp.org/2015/12/05/state-of-the-word-live-blog/) - コアコントリビューターとバージョンごとのリードコントリビュータに拍手 - 何かしら一つ良いことがある毎に、みんなで拍手 ## 後で調べる - An ERP solition - nomadobase - storycorps https://storycorps.org/ ## WordPressの3つのステージ - Blog - CMS - APP Platform - calypso - Version 1.0 - 100% JavaScript - もちろんレスポンシブ - social 的なpush通知 - マルチサイトの管理 - プラグインなどの一括管理 > phpエンジニアはJavaScriptを学んだ - phpは遠くには行かない - JSとAPI駆動によるインターフェイス開発は未来の一つ - APIはopen webの鍵になる - APIとしていろいろと提供していく - Going SSL with LetsEncrypt - comming soon - php7 - だいたい2倍ぐらい速くなる - Customization - APIとその周りに > とにもかくにもjavascriptを深く学ぼう ## 次回のWordCamp US - 12月2日-4日 - おなじくPhiladelphiaで! ## 質問 - woo Commerceはどう? - これからさらにshareを広げるための大切なkeypartsの一つ - APIにもちろん取り込んで行く予定で、もっといろいろ自由にできる - どのJSフレームワークがいい? - calypsoはreact - でもJSはJS - calypsoは管理画面に取り込まれるの? - 別々に進むと思う - 理由には様々なプラグインがいろんな機能を管理画面に取り入れており、そういったものに対応してないから -------- # 雑感 - 余裕のある人員配置 - 2日目の受付なので、ほとんど無いかもだけど、わりと多くの人数が参加している - 結果として余裕のある運営に見えます。 ## なんせ英語 - とにもかくにも、聞けないし話せないので - 友達作るのも難しい - せめて世間話ぐらいでばなというところ。。 - それでも十分あたたかく迎えてもらってます。 - 英語が難しいっていうと - 大丈夫日本語はもっと難しいから!と言われます。 ## 昼食 - 両日ともフリーで食べ放題 - フィリー名物のチーズステーキサンド - グラタン - 肉の煮込み - サラダ - カップケーキ - ガトーショコラ - 等 お腹いっぱいです。 ## スポンサーブース - とにもかくにもTシャツもらい放題 - ちょっとウロウロしただけでも4着ぐらいいただきました。ありがとうございます。 - 飲み物が置いてあることが影響しているのか、お国柄なのか、どのブースも大変盛り上がっていました。