WordBench大阪_初心者のためのWordPressに参加してきた

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

WordPressに触ってみよう
難易度1:WordPress.comでブログを作ってみよう
難易度2:サーバにインストールしてみよう
難易度3:ローカル環境を作ってみよう

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
今日のセミナーは確認の意味からとても良かったです。また、二度三度と参加してみると色んな方の愛用しているプラグインとかが聞けて良いと思いました。

WordBench大阪「WordPressのためのGulpハンズオン」に行ってきました。

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

    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を使います。
SCSS入れ子のタグ
SCSSネスト(入れ子のタグ)
変数を使ったSCSSのタグ
変数を使ったSCSSのタグ
  1. Gulpについて
    Node.jsのStreamAPIを利用したビルドシステム
    Sassなどを自動でコンパイル
    コードを書き換えたらブラウザを自動で更新。ファイルを圧縮 等々
    手作業ではとても大変な事を自動でやってくれます。

Gulpを使ってみよう!

    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ファイルを作成。これで準備完了

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-12-18-03-13

タスクを書こう!

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

cpgzの拡張子のファイルを渡された

エクセルのデータで作られたファイルであるが、メールでMacに送られた時にcpgzの拡張子になっており、解凍できないという現象が起こったらしい。色々調べると、案外多い。どうしたものかと考え、ターミナルを使う方法を試してみたが上手くいかず、行きずまった。
何気なく、cpgzをzipに変えてみたら、解凍した。(何だ難しく考えすぎたのか、たまたまなのか)
エクセルファイルをPDFに変換した、編集をして欲しいと言われたが、、、

GRAND FRONTEND OSAKA 2016

8月27日、28日、ブランフロント大阪 Osaka Innovation HUbで行われた「GRAND FRONTEND OSAKA 2016」に参加してきました。
フロントエンドエンジニアのためのハッカソン企画のなですが、「まだ空いてますよぉ」の声があったので、興味津々で参加表明しました。
1日目は自分の学びたいブースに行き、メンターの方たちの指導の元、自分の作りたい物を形にしていきます。

  • P5.jsで作るウェブアニメーション・・・Team-P(Processing)
  • Angular2でSPAを作ろう・・・ng-kyoto
  • フロントエンド技術でデータビジュアライゼーション・・・ 可視化情報学会 VDM研究会
  • Node.js+WP-APIでつくるウェブアプリケーション・・・WordPressコミュニティ
  • Vue.js 2.0 で体験仮想DOMの魅力・・・v-osaka
  • Kintone・・・sponsored
  • Monaca / Onsen UI でモバイルアプリアプリを作ってみよう・・・sponsored

ウェブアニメーションに行くつもりで来ていたのですが、WordBenchで知り合った方がAngular2を学びたいとのことで優柔不断の私はふらふらとAngular2が何者かも知らないのに付いて行きました。
メンターはng-kyotoの83 @armorik83 さん。
Angularとは携帯電話やデスクトップのWebアプリケーションを作成するための開発プラットホームらしい。
何が作りたいかと聞かれ、社長の社内の入退出を管理するアプリの作成を考えた。
Googleのfirebaseを使ってみる。
まず。Googleアカウントでfirebaseのコンテンツを開く。

firebaseのコンテンツ
firebaseのコンテンツ

メニューからコンソールへ移動。
新規プロジェクトを作成で今回はウェブアプリにfirebaseを追加にすすむ。

新規ドキュメント画面
新規ドキュメント画面

すると、「ウェブアプリに Firebase を追加
HTML の一番下、または他のスクリプトタグの前に、以下のスニペットをコピーして貼り付けてください。」の画面が表示されこのコードをindex.htmlに貼り付けます。

挿入タグ
挿入タグ

今回、ターミナルを使い $ npm start でローカル環境を作り、index.htmlを読み込みます。
少し時間が経っているので、うまくブラウザに表示できないのですが、また機会があればやってみたいです。最後は@armorik83 さんである奥野さんに完成してもらい、無事ハッカソンを終えました。
2日目は現在活躍中のデザイナーやプログラマーさん達の登壇でした。

  • 今のwebに本当に必要な技術とは・・・花谷拓麿さん
  • 普遍的な設計思想とモダンなコーディング・・・コソバマイさん
  • 変態的 css トリック・・・カイトさん
  • WP REST API で変わるWordPress のフロントエンド・・・岡本秀高さん
  • 60 fps を実現できるレンダリングパフォーマンス・・・ケノドン・ブノアさん
  • Web サイトや web サービスの解析をしてみよう・・・牧 昴拡
  • Mithril – 軽量・高速な MVC フレームワーク・・・@sairoutineさん
  • Node.js をさりげなく取り入れた最近のフロントエンド事情について・・・かみやんさん
  • IndexedDB, Worker, Server-side Rendereing そしてフロントエンドの未来・・・奥野賢太郎さん
  • プログラミング言語 Rust・・・おのうえさん @_likr

登壇は皆さん素晴らしくわかりやすかったのですが、2日目の午後の事もあり疲れが出始め後半は睡魔に襲われました。
その後、事前登録なしのゲリライベント、胸震える熱い LT が発表され会場は笑いで盛り上がり、私にとっての初めてのGRAND FRONTEND OSAKA 2016 が終わりました。

スタッフとして見るWordCamp Kansai 2016

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

初日は8時30分集合

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

会場入口
会場は大阪大学豊中キャンパス 大学会館です。重厚な門が出迎えてくれます。

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

イベント開場前にアセンブリーホールで円になり、イベント委員長のYATさんから、当日マニュアルの説明とスタッフとしての心がけについて話がありました。昨年は来場者としてこのイベントにきましたが、とんちんかんな事をしている私を心優しく誘導してくださった事を思い出し、スタッフとしての心がけ「はじめて本イベントに参加される方も多数いらっしゃると想定しています。ぜひそのような方にこそ、楽しんでいただきたいと実行委員は考えています。戸惑っている方、質問がありそうな方には、積極的に声をかけてください」が浸透されていたんだなぁ。と実感しました。
2016-07-09 16.02.31
私の担当は会場チームの中の託児所とランチ係りです。あいにく、初めての事もあり託児所を利用された方は3名程でしたが、子育てをされながらスキルをつけたい方などがこれからどんどん利用していただき、続けられると良いなぁと思いました。
2016-07-09 16.00.10

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

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

パンとおにぎり
ずらりと並べられたパンとおにぎり

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

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

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

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

タイムスケジュール
タイムスケジュール

1日目を終えて

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

アトムとブラックジャック
リボンの騎士と手塚治虫氏

WordCamp Kansai 2016記念品

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

wapuuのコーヒーカップ
wapuuのコーヒーカップ

最後に

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

3Dwapuuのトロフィー
3Dでカッシーさんが作ったwapuuのトロフィー。もちろんwapuu作者のカネウチカズコさんに進呈された。
カッシーさんとカネウチカズコさん
カッシーさんとカネウチカズコさん
wapuuうまか棒
wapuuうまか棒
お土産にいただいた当日スタッフTシャツ

Acrobat DC〜カラーDATAをグレースケールに変える

担当している広報誌をDATAを残す事とホームページで閲覧する事の2つの目的で印刷はモノクロですが、
折角なのでカラーのPDFファイルを作っています。
クライアントの代表者が役員交代で変わった時に校正紙をPDFファイルで送る事になり、カラーのPDFファイルを送ってしまいました。印刷もカラーになったのかと問い合わせがあり、焦ってしまった。
そこで、
グレースケールで校正紙を作ろうとしたら、結構大変だったので書いておきます。

1、InDesignで出来上がったDATAをファイルメニューからPDF書き出しプリセット→最小ファイルサイズを選んで、保存。
2、最小ファイルで出来上がったPDFファイルを開き、ツール→印刷工程→色を置換→変換のプロファイルを「Dot Gain 10%」か「Gray Gamma 1.8」と変換のオプションで「黒を維持」にチェック。
変換のプロファイルはGet Gain10% or 15% or 20% or 25% or 30%、Gray Gamma 1.8 or 2.2 は適当に試してみると良いだろう。
「黒を維持」はスミ100%がグレーにならない。

ツールから印刷工程
印刷工程→色を置換
変換のプロファイルをDot Gain か Gray Gamma を選ぶ。黒を保持
モノクロに変換

明日はいよいよWordCamp Kansai 2016

 2014年はホームページを見ながら、とうとう参加登録できなかった事を思い出します。参加費用が確か¥1,000だったかな。
2015年の昨年は日曜日に初めて参加し、参加費用が無料なのにも驚きましたが、おにぎりとパンをいただけるのにもびっくりで、遠慮しておにぎりを買って参加しました。またハンズオンが事前登録だと当日に知り、当日参加のキャンセル待ちをして入れていただきました。
そのハンズオンでWordPress.comに登録してこのブログを作りました。躊躇している方、まだ参加登録できますよ。私は今年、実行委員にも参加しています。

WordCamp Kansai 2016

7月6日で1ヶ月

毎日暑い日が続いています。今年は本当に暑い。きゅうりは暑い方が順調に病気なく育つのがわかりました。梅雨前の高温で湿度が低い時にはうどん粉病にかかりやすいので、昨年は早く苗を植えすぎて、うどん粉病になってしまったんだと実感。

うどんこ病とは、植物にウドンコカビ科の子嚢菌(しのうきん)が住みついて葉っぱが白くなる病気のことです。英語では「Powdery mildew」と呼ばれ、「カビ」や「べと病」のことを意味します。

発生しやすい時期や環境
● 5~6月、9~10月頃
● 気温が18~25度
● 空気が乾燥している
● 窒素分の多い肥料を与えている
● 株間や葉が密集している、風通しの悪い場所

治療方法
● 自然治癒
早期発見と早期対応ができれば、被害を少なく抑えられます。花びらへの影響や葉っぱを切り取る必要はありません。葉っぱに白い斑点を見つけたときは、7~10日おきに酢(酸性)や重曹(アルカリ性)を薄めた液を散布します。初期段階では、酸性・アルカリ性に触れさせるだけで効果があります。
● 農薬や殺菌剤を散布する
うどんこ病の菌にはいくつか種類があり、同じ殺菌剤では効かないことがあります。
複数の植物に寄生する菌もいますが、薬剤の対象となる植物や果物、野菜の名前を確認し、適切な薬剤を使うことが大切です。

● 病気の葉っぱを切り取る
早めに病変を切り取って被害の拡大を食い止める。処置が早いほど植物は元気になってくれます。

青じそがそろそろ摘み取れそうです。お刺身やかつおのたたきに添えると一段と美味しさが増しますよね。
しその葉はロズマリン酸、葉と実にはルテオリン(フラボノイド・酵素)という成分を含み、アレルギー疾患に有用として健康食品としても利用されているそうです。日本の代表的なハーブです。

Photoshop CC(2015)新機能、「かすみの除去」Dehaze(ディヘイズ)の使い方

印刷工業組合のAdobeセミナーで新機能のDehazeの使い方を教えてもらったのですが、やはり忘れるものですね。
霞みがかった写真を補正するのに、思い出せず、ぐぐりました。なので、次回のために書いて残しておきます。
1、霞みがかった写真を開く
2、フィルターからCamera Rawフィルターを立ち上げ
3、別ウインドウで補正画面が出る
4、fxをクリック
5、霞除去バーをあげる

種を蒔いてから3週間

梅雨に入り、どんどん大きくなる苗ですが、まだ蔓は出ていません。少し成長の早いものが「夏すずみ」という品種だろうと思います。成長の遅い苗は昨年購入した種で、もう名前も覚えていません。「夏すずみ」は種からふっくらとして大きく薄いピンク色をしていました。どんなきゅうりができるか今から楽しみです。

3週間目の「夏すずみ」もうすぐ蔓が出る様子。大葉もパセリも順調に成長しています。種が小さかったので、たくさんの芽が出たのでどこに植え替えるか悩み中です。