カテゴリー: web

2017年6月24日・25日とWordCamp Kyoto 2017に実行委員として参加してきました。
昨年、実行委員をすると良い事あるよ。の言葉につられ実行委員をする事に。
知りたい、学びたい気持ちで実行委員を経験し、勉強会に行ったり、懇親会に参加したり、楽しくあっという間に１年を過ごしました。
今年は思い切ってデザインチームに入りました。Kitoさんの元、沢山の良いものを見させていただきました。

WordPressはプログラムの勉強も兼ねてやりたいと思ったツールです。スタッフの皆さんが楽しそうに輝いて見えたのも参加した理由です。

当日は京都大学国際科学イノベーション棟ということもあり、かなり早く出たつもりですが、京阪電車「出町柳駅」を降りた途端、歩くと決断！京都大学構内に入ってからの迷い様たら、、、

朝のミーティングもスムーズに進み、ポツポツと人も入りだし、会場は昨年の様に階段で上り下りすることのない１フロアーで行われたので各セミナールームは人で溢れているのが見えました。メイン会場の講堂は割とゆったりしている様でした。
スポンサーブースは人で溢れており、案外気兼ねなくブースのスタッフと喋れたのではないでしょうか。スポンサーの方や業界の方には情報を取り易いイベントだったと思われます。
各セッションの動画のお手伝いをちょこっとさせて頂きました。動画が後でゆっくり観れるのもすごいことですよね。
https://wordpress.tv/event/wordcamp-kyoto-2017/

お昼はおにぎりとパンとペットボトルが無料で配布されます。これも大きな楽しみですね。コーヒーも無料で飲めます。因みに2日目は京都大学のレストランでテーマレビューチームでランチをしました。ビフテキカレーが有名！

2日目のコントリビューションタイムはゆっくりWordPressに浸れる時間でした。
オープンソースのCMSを利用するだけでなく、何らかの形で貢献してお返ししようという感じでしょうか。これはそれでWordPressをより身近に感じられ、親しみが湧いてきます。また、学習にもなります。
WordPressの開発をされている方や以前より貢献されている方にお会いすることで、モチベーションも上がり新しい発見もあります。若い人たちにはどんどんこんな場所に参加して欲しいと思います。私も継続は力なりということで。

今回は初心者のためのWordBenchでしたが、初心者の頃は何が何だかわからないまま参加して月日が経ってしまっているので、しっかり確認するために参加してきました。
レジメがあるのでレジメに沿って書いていきます。

WordPressに触ってみよう
難易度１：WordPress.comでブログを作ってみよう
難易度２：サーバにインストールしてみよう
難易度３：ローカル環境を作ってみよう

1.WordPress.comでブログを作ってみよう
WordPress.comってなに？
WordPress.comとWordPress.orgどこが違う？
だいたいここを見ればOK↓

2.WordPressをサーバにインストールしてみよう
どこからダウンロードできるの？
どんなサーバがいいの？
「簡単インストール」って安心？
セキュリティって何ですか？
テーマはどう選べばいいの？
プラグインって何？

3.ローカルにインストールしてみようまず、1）ですが、現在　WordPress.com でブログを書いています。実は org でブログサイトを作ろうとドメインも取ったのですが、手っ取り早く投稿をためておこうと使い出しました。今日のセミナーでエクスポートとインポートが　com と org の間で簡単にできると聞き安心しました。
com のアカウントはWordCamp Kansai 2015 の時に参加したハンズオンで取ったものです。ハンズオンは参加しておくべきですね。

2）WordPressをサーバーにインストールしてみよう_このインストールには泣かされました。そもそもWordPress ってしくみをよくわかっていませんでしたので、しかもweb関係の友達もいませんでした。もちろんサーバはどこを選んだらいいんだろうから始まりローカル環境にインストールしたらサーバーにインストールしたのはどうなるのデーターはどうして移行するんだろうetc
今日はファーストサーバーの小島さんが丁寧に業界の事や選ばれるサーバーのメリットなどを話してくださいました。
ファーストサーバーさんは企業が多く、さくらサーバーさんは自由度が高く色々したい方、エックスサーバーさんはブロガーの方の利用率が高いそうです。
セキュリティの話は何度か聞いているのですが、クックビズの杉田さんが詳しく話してくださいました。
WordPressが狙われやすいと言われているのですが、それだけにアタックに対するメンテナンスは早く、安心しました。
アタックも管理画面からadminでアタックをかけるらしく、最近はIDにadminを使わないように設定されているとの事です。パスワードは長く12文字ぐらいで作ります。パスワードは暗号化されますがさらにプラグインを入れておけば安心です。
Force Email Login・・・アタックはadminで行われるので、Emailでログインし暗号化されるプラグイン
LastPass・・・マスターパスワードを作るプラグイン
All in one wp security・・・マルチサイトに対応 adminでログインしようとするとすぐロックされる。
などがお勧めです。
プラグインやテーマに関しては頻繁にアップデートされていない物や2年以上更新されていない物はやめるべきです。
また、WordPress自体もアップデートしておかないと、気付かぬ内にウイルスメールの踏み台にされていたりする場合があります。

3）ローカル環境にインストールしよう。
Wockerがやっと使えるようになってきたのですが、今日はVCCWを使ってみました。
詳しくは下記サイトからインストールしてローカル環境を構築してください。
http://vccw.cc
VCCWがインストールされたら、ターミナルからcd vccw-x.xx.x で vccw のフォルダに移動し vagrant up をすればWordPressがローカル環境でつかえます。vccw-x.xx.x フォルダの中のprovisionフォルダの中のDefault.ymlをコピーして一階層上にsite.ymlという名前で保存し、そのファイルをエディターで開けて設定を英語から ja の日本語に変えたり、ID や pasword 、タイトルなどを変えます。 そしてブラウザで確認してみます。
アドレスは
http://vccw.dev
今日のセミナーは確認の意味からとても良かったです。また、二度三度と参加してみると色んな方の愛用しているプラグインとかが聞けて良いと思いました。

9月22日、秋分の日、ファーストサーバーさんで開かれたWordBench大阪に行ってきました。
scssがすごいという話を聞いていたので、gulpを使ってタスクを記述するといった、 イマドキのWeb開発のフローに挑戦！
忘れないうちにブログに書いておきます。
先ず、事前にNode.jsのインストール。前回、インストールするのにシックハックしたのでこれはインストール済みと解釈。ブログをググってGulpを調べると、ローカル環境でもインストールの記述があり、？？？？なんだろう。行けばわかるかとスルー。
登壇者はYasui Risaさん。
当日のスライド
https://docs.google.com/presentation/d/136ELj-ll34WecyyfyhDfacKhcg1GJbom05y-VAnwY5s/edit?usp=sharing

1. 1. ローカル環境にWordPress を準備。
      覚えたWockerの出番です。
      Wockerでローカル環境を作り、
      $ wocker run –name=” [コンテンツ名] “ であっという間にWordPressをインストール。
   2. GulpのメリットSassを自動でコンパイル（変換）。
      Sassだけでもcssが簡単に書けるので楽になるのに、その上、Gulpで自動でコンパイルするらしい。そんな素晴らしい！
   3. Sass（SCSS）について
      Sassは変数や入れ子が使えてcssに一括でコンパイルするようなものです。だから、cssの記述が簡単に行えるような仕組みらしい。
      Sassには2種類あり、SCSSがもう一方。皆さんの話を聞くと、Sassの方が簡単らしい。
      SCSS（Sassy CSS）.scssの拡張子を持ち、CSS3の構文を拡張したもの。これからはSCSS。
      Sassとは.sassの拡張子を持ち、CSSを書くのに、より簡潔な方法を提供。SCSSよりも、読みやすく、また、速く書けると言われる。
   4. Sass（SCSS）はブラウザは読めません。そこでcssにするためにGulpを使います。

1. Gulpについて
   Node.jsのStreamAPIを利用したビルドシステム
   Sassなどを自動でコンパイル
   コードを書き換えたらブラウザを自動で更新。ファイルを圧縮　等々
   手作業ではとても大変な事を自動でやってくれます。

Gulpを使ってみよう！

1. 1. ローカル環境にインストールしたWordPressのファイルの中のwp-content→themes→twentysixteen→gulp-testフォルダを作ります。
   2. $ cd 作ったgulp-testフォルダにフォルダパス又はフォルダをドラッグドロップで移動する
   3. $ npm init インストール、enterで進む
   4. $ sudo npm install gulp -g でGulpをインストール、又は$ npm install gulp –save-devでローカルGulpをインストール
   5. $ touch gulpfile.jsでgulpfile.jsファイルを作成。これで準備完了

タスクを書こう！

1. gulpfile.jsに「var gulp = require(‘gulp’);」Gulpを使いますと宣言。
2. gulp.task(“タスク名”,function(){
   タスクの内容
   });
   今回は
   var gulp = require(‘gulp’);
   var sass = require(‘gulp-sass’);
   var browserSync = require(‘browser-sync’).create();
   と書いて行きます。
   たぶん、Gulpでsass を書いて変換してブラウザで表示するようにします。のような意味。
3. 次に
   gulp.task(“sass”,function(){
   gulp.src(‘./sass/common.scss’)
   .pipe(sass())
   .pipe(gulp.dest(‘./css’));
   });gulp.task(“watch”,function(){
   gulp.watch([‘./sass/*.scss’],[‘sass’,’bs-reload’]);
   });
   と書く。たぶん、common.scssを見て、common.cssに変換して書きなさいという意味。
4. 最後に
   //startes.server
   gulp.task(‘browser-sync’,function() {
   browserSync.init({
   proxy: “http://10.0.23.16/”
   });
   });
   gulp.task(‘bs-reload’,function() {
   browserSync.reload();
   });gulp.task(‘default’,[‘watch’,’browser-sync’]);
   おまけで瞬時にブラウザに反映されるようタスクの書き方を伝授していただきました。
5. 終了はこのままフォルダをテキストエディタで閉じ、ターミナルを終了すればOKです。
   次回、作業を継続する場合、$ cd で gulp-test フォルダに移動し、Gulpをインストールします。すると、作業を継続出来るようになります。さらに使いこなしたい方は引き続きプログラミングを勉強しましょう。因みに私は
   $ sudo npm i -g gulp とターミナルで打ち込みました。間違っていたら、ご指摘お願いいたします。

今回の感想

WordBench大阪のモデレータの方も変わり、前年度は参加するだけで緊張の日々でした。顔見知りの方もでき、課題に集中できるようになって来ました。移り変わりの激しい業界ですので、機会を大切に学んで行きたいものです。今回もお世話になったモデレーターの方々、ありがとうございます。

楽しかったWordCamp Kansai 2016も終わりました。実行委員として関わって、メンバーのWordPressコミュニティへの関わり方が良いなぁと思いました。
初めての事でご心配をおかけする事もあったと思います。また、パソコンスクールでWebを一緒に勉強した人たちと偶然会ったりと、嬉しい事もありました。娘の卒業した高校やランチでパンを納品してくださったパンダンテさんやフェルディナンドさんにもポスターを貼っていただきました。またBenchに行って刺激を受け、勉強を続けて行ければ最高です。

初日は8時30分集合

駅からわらわらと実行委員、当日スタッフが集まってきます。
門の前まで来ると、開いているのか。閉まっているのか、30分前でしたが、すでに中では作業が始まっています。前日準備に集まって準備した方が今から始められそうなくらいの作業状況にしてくれていました。

朝のミーティングから始まる

イベント開場前にアセンブリーホールで円になり、イベント委員長のYATさんから、当日マニュアルの説明とスタッフとしての心がけについて話がありました。昨年は来場者としてこのイベントにきましたが、とんちんかんな事をしている私を心優しく誘導してくださった事を思い出し、スタッフとしての心がけ「はじめて本イベントに参加される方も多数いらっしゃると想定しています。ぜひそのような方にこそ、楽しんでいただきたいと実行委員は考えています。戸惑っている方、質問がありそうな方には、積極的に声をかけてください」が浸透されていたんだなぁ。と実感しました。

私の担当は会場チームの中の託児所とランチ係りです。あいにく、初めての事もあり託児所を利用された方は3名程でしたが、子育てをされながらスキルをつけたい方などがこれからどんどん利用していただき、続けられると良いなぁと思いました。

出来立てパンで幸せランチ

ランチは富田林で素材にこだわった焼きたてパンを売るお店「パンダンテ」さんと石橋でパン・ド・ミーが有名な素敵なお店の「フェルディナンド」さんが搬入してくださいました。今回は代表者YATさんの「美味しいコーヒーが飲みたぁぁい」の希望もあり、コーヒーサーバーが導入されました。

スポンサー企業のブース見学

アセンブリーホールには WorCamp Kansai の協賛企業であるサーバー会社さんなどがブースを出していました。まだまだweb業界のことは知らない事が多い私は興味津々です。ファーストサーバーの小島さんの案内でブースツアーがあり笑ってしまいました。
各会社さんの粗品にも楽しみがありました。

盛り沢山なタイムテーブル

セッション、ハンズオン、パネルディスカッション、アンカンファレンス、サポーターズスピーチ、コントリビューション、ライトニングトーク、聞きなれない言葉が並びますが、それぞれ特徴あるタイムテーブルとなっています。振り返りとしてWordPress.tv で動画がUPされますので、見逃した方は後でもwordpress.tvで見る事が出来ます。
https://wordpress.tv/2016/07/

1日目を終えて

スタッフとして参加しましたので、ハンズオンに参加も出来ずでしたが、やり遂げた感一杯で手塚治虫さんの漫画主人公達に夢の世界へ連れて行かれるような阪急電車に乗り家路に着きました。

WordCamp Kansai 2016記念品

イベントでは「コントリビュータを探せ」や「wapuuを探せ」などがあり、コントリビュータのサインを5名集めるかARのワプーを見つけるとワプーのカップか缶バッチやシールが賞品でいただけます。

最後に

イベントを沢山のスタッフで運営していくという事は大人になってから初めての経験で、久しぶりの高揚感で楽しい汗をかき、もっとwebの事を勉強したいと心から思いました。時間的な事もあり、少し諦めかけていたのですが、そんな気持ちは吹き飛んでしまった。
アセンブリーホールでアンカンファレンスやサポーターズスピーチがある中、ジャズコンサートも開かれ、それぞれにCampを楽しんだ事でしょう。誰も親しい人がいないのに飛び込んだWordBenchでしたが、みんなとの別れが寂しくらい溶け込んでしまった2日間。お土産はスタッフTシャツなどなど。まだまだ私にとっては伸びしろのあるWordPressの世界への入り口でした。