Quantcast
Channel: レンタルサーバーのCPIスタッフブログ
Viewing all 131 articles
Browse latest View live

Drupal8 Hello Worldモジュール作成手順

$
0
0

この記事は「Drupal Advent Calendar 2016」の12月9日分の記事です。
今回ご紹介するのはDrupal8 でカスタムモジュールを作成する方法です。

なお当記事はDrupal.orgの下記記事を引用しています。
Hello World モジュールについて
https://www.drupal.org/docs/8/creating-custom-modules/a-hello-world-custom-page-module

Routingについて
https://www.drupal.org/docs/8/api/routing-system/routing-system-overview
 

Hello World モジュール作成手順

 

今回は「hello」モジュールを作成します。

  1. 「modules」ディレクトリに「/custom/hello」を作成します。
  2. 「hello」ディレクトリに下記ファイルを作成します。

    hello.info.yml
    hello.module
    hello.routing.yml
    src/HelloController.php
     

  3. hello.info.ymlを編集します。
      MODULE_NAME.info.ymlには、モジュールの情報を記載します。
    name: Hello
    type: module
    description: Hello demo module.
    core: 8.x
  4. hello.moduleを編集します。

    MODULE_NAME.moduleは、モジュールのコアファイルです。
    何かの処理を行うときに記載します。「hello」モジュールでは特に記述しなくても動作しますが、twigテンプレートに変数を渡すコードを1つ試しに追加します。

    <?php
    
    /**
     * @file
     * Hello module.
     */
    
    function hello_preprocess_page(&$variables) {
      $variables['my_variable'] = 'Hello drupal 8 themeing!';
    }

    「hello_preprocess_page()」は、「hook_preprocess_page()」通称hook関数で、 page.tpl.ymlを生成する前に実行され、変数等をtwigテンプレートに渡すことができます。Twigテンプレート内で、{{ my_variable }} と記述すると、module内で処理した変数を取得することができます。
     

  5. hello.routing.ymlを編集します。

    Drupalのルーティングシステムは、symfonyのHTTPカーネルを利用しています。MODULE_NAME.routing.ymlを記載することで、symfonyのHTTPカーネルを詳しく知ることなくルーティングすることができます。


     

    hello:
      path: '/say_hello'
      defaults:
        _title: 'Hello Title'
        _controller: '\Drupal\hello\HelloController::content'
      requirements:
        _permission: 'access content'

    「path: 」ここに記載したURLにアクセスがあった場合に、「defaults: _controller: 」で指定したメソッドがコールバックされます。
     

  6. src/HelloController.phpを編集します。
     
    <?php
    /**
     * @file
     * Contains \Drupal\hello\HelloController.
     */
    
    namespace Drupal\hello;
    
    use Drupal\Core\Controller\ControllerBase;
    
    class HelloController extends ControllerBase {
      public function content() {
        return array(
            '#markup' => '' . t('Hello there!') . '',
        );
      }
    }

    ネームスペース「Drupal\hello」を指定し、Drupal coreの「ControllerBase」を extendsし、content メッソッドを作成しています。
     

  7. ファイル作成後、管理画面の「拡張機能」にアクセスし、「hello」モジュールを有効にします。


     

  8. 「/say_hello」にアクセスすると、「hello」モジュールが実行されます。

 

Hello Worldモジュール作成手順は以上です。

 

関連記事

 

Drupal8の開発環境を整える

Drupal記事一覧

Drupal8 Twigテンプレートの基礎

 

関連タグ: 

Drupal8 Twigテンプレートの基礎

$
0
0

Drupal8 からテーマのテンプレートエンジンに「Twig」が採用されました。
今回の記事ではDrupal8 でのTwigの基礎をご紹介いたします。

 

変数の出力

Twigテンプレートに渡された変数は下記ように値を呼び出すことができます。

{{ variable }}

 

例えば下記の配列の場合、{{ hoge_array.key }} として値を取得することができます。

php

$hoge_array = array(
  'key' => 'value',
  'another_key' => array( 'foo' => 'bar', ),
);

Twig

{{ hoge_array.key }}  # return value
{{ hoge_array.another_key.foo }} # return bar

 

Twig filters

 

Twigのフィルター機能を使い、文字列の変換や、日付フォーマットなどに変換することができます。

{{ variable|length }} # 文字列の長さを返答
{{ variable|lower }} # 文字列を小文字に変換します。

その他のフィルターについては下記サイトを参照ください。
http://twig.sensiolabs.org/doc/filters/date.html

 

翻訳

 

D7の時は、t( ) 関数を使用しサイト内の翻訳を行いました。
D8の場合、下記の通りです。

{% trans %} {{ hoge_array.key }} {% endtrans %}

翻訳対象となったワードは管理画面の「環境設定 > ユーザーインタフェースの翻訳」より、翻訳することができます。

 

コメント

コメント業は 「#」で囲います。

{# コメント #}

 

条件分岐

変数の存在チェック

{% if site_slogan %}
 <div class="site-slogan">{{ site_slogan }}</div>
{% endif %}

 

if elseif else 条件分岐

 

{% if foo == 'hoge' %}
  <p>fooはhogeが入っています。</p>
{% elseif foo == 'fuga' %}
  <p>fooはfugaが入っています</p>
{% else %}
  <p>上記以外です</p>
{% endif %}

 

比較

 

{% if user.id > 18 and user.id < 27 %}
  <p>ユーザーIDは、19から26です。</p>
{% endif %}

 

ループ

 

説明は不要ですよね。

 

{% for i in range(0, 3) %}
  {{ i }}
{% endfor %}

{% for item in items %}
 {{ item.content }}
{% endfor %}

 

またループ中に特別な変数にアクセスすることも可能です。

{% for item in page.header %}
    {{ loop.index }}
  {#
  loop.index  ループ数 1 2 3 4
  loop.index0  ループ数 0からスタート 
  loop.revindex  ループ数(最後から)4 3 2 1
  loop.revindex0 ループ数(最後から)0まで
  loop.first 最初のアイテムがtrue
  loop.last  最後のアイテムがtrue
  loop.length アイテム数
  loop.parent 親要素のアイテム
  #}
{% endfor %}

 

関連記事

Drupal8 Hello World モジュール作成方法

Drupal8の開発環境を整える

 

引用元

こちらの記事は下記サイトより引用しています。
https://sqndr.github.io/d8-theming-guide/twig/twig-basics.html

https://www.drupal.org/docs/8/api/translation-api-code-text

 

 

関連タグ: 

Drupal8 Twigテンプレートで言語コードを取得する

$
0
0

Drupal8から、Twigが採用されたことにより、テンプレート内でPHPが使えなくなりました。
D6、D7では下記のように言語コードを取得できました。

D7

<?php
global $language;
echo $language->language;

 

D8では下記コードで現ページの言語が取得できます。

\Drupal::languageManager()->getCurrentLanguage()->getId();

 

取得した言語コードを、Twigに渡す方法です。
まずはカスタムモジュールを作成するか、「/themes/THEME_NAME/THEMENAME.theme」を作成します。
作成後下記コードを追加します。

THEMENAME.theme

// block.html.twigに渡す
function THEMENAME_preprocess_block(&$variables) {
    $thislanguage = \Drupal::languageManager()->getCurrentLanguage()->getId();
    $variables['thislanguage'] = $thislanguage;
}

// page.html.twigに渡す
function THEMENAME_preprocess_page(&$variables) {
    $thislanguage = \Drupal::languageManager()->getCurrentLanguage()->getId();
    $variables['thislanguage'] = $thislanguage;
}

hook_preprocess_page() を使うと、「page.html.twig」に、指定した変数を受け取ることができます。

 

page.html.twig

{{ thislanguage }}

{# 出力結果: ja #}

 

 

関連タグ: 

CMSのハッキング統計と、CMSのアップデート手順

$
0
0

昨今のWebサイトには、CMSが導入されていることがほとんどではないでしょうか。
私の経験上、CMSを導入したがCMSのアップデートをしていないユーザーが多く存在しているように感じます。

Webサイトは、作るのが目的ではなく、Webサイトを運用し何らかの情報を発信することが目的です。
長くWebサイトを運用するためには、必ずCMSのアップデートをしてください。

 

CMSをアップデートする理由

まずこちらの「Webサイトハッキングレポート 2016年 Q3」資料を参照ください。
Hacked Website Report – 2016/Q3 (引用)

こちらの資料は実際に攻撃を受けた8,000サイトを分析し、どのようなサイトがハッキングされているかを調査した資料です。

実際にアタックを受けたCMSはWordPressが74%、Joomla!が17%、Magentoが6%でした。


Hacked Website Report – 2016/Q3 (画像引用)

アタックを受けたCMSは古いバージョンのまま利用していた割合が多いと示されています。

またWordPressを掘り下げてみると、ハッキングに関与しているトップ3のプラグインは、Revslider、TimThumb、GravityFormsです。
これらのプラグインが導入されている場合は、すぐに最新版にアップデートした方が良いでしょう。

このレポートからも分かるとおり、CMSをアップデートせずに利用していると、ハッキングされるということを認識してください。

 

CMSをアップデートする

CMSのアップデートを運用に落とし込むと下記のような手順になります。

  1. 決められた期間(月に1度など)で、CMSのコア、プラグイン(モジュール)にセキュリティアップデートがないかチェックをします。
    (アップデートが無い場合、バックアップを取得後作業完了)
     
  2. ステージング環境のセキュリティアップデート
    2-1.ステージング環境のバックアップを取得後、CMSのアップデートを行います。
    2-2.決められた基本項目に加え、アップデートしたプラグイン(モジュール)に関するテストを実施
    2-3.問題がなければサイトオーナー(クライアント)に報告
    2-4.サイトオーナーチェック
     
  3. プロダクション環境(本番環境)のアップデート
    3-1. 本番環境のバックアップを取得し、CMSのアップデートを行います。
    3-2. 決められた基本項目に加え、アップデートしたプラグイン(モジュール)に関するテストを実施
    3-3. 問題がなければサイトオーナー(クライアント)に報告
    3-4. クライアントに今回アップデートしたプログラムのバージョン、チェック項目をレポートし、作業完了

アップデートの流れは上記の通りですが、自分の失敗も含めて、いくつか注意事項を紹介させていただきます。

[注意事項]

  1. サイトの表示確認チェックは、事前にチェックする項目を共有する。
  2. アップデートを行う日時を共有する。
  3. アップデートの作業内容を事前に共有する。
  4. バックアップの保存先を定め共有する。
  5. CMSのチェックは一般ユーザーが閲覧する環境と同じで、CMSにログインしていないブラウザでチェックする。
  6. Webサイトの表示確認をする場合はブラウザのキャッシュを一旦削除する。
  7. アップデートしたプラグイン(モジュール)に関連した、動作確認する。

 

自動テストについて

品質を担保するためにテスト検証を自動化することも時には重要です。
例えば私がよく利用しているDrupal CMSでは、PHPUnit testsの実行や、BDDでおなじみのBehatを使いテストを行うことができます。

PHPUnit testsはDrupalと分離されていますが、下記のように全てのUnit testsを実行することができます。

cd core
../vendor/bin/phpunit --testsuite=unit 

またBDDテスト用フレームワークのBehatを使うこともできます。
Unit testは疎結合されたメソッドの単体をテストしますが、Behatは実際のURLにアクセスし、期待のレスポンスが返ってくるかをテストします。
例えば記事が公開されていない状態で、一般ユーザーがアクセスしたら403エラーが返ってくるか、特定のAPIが正しくレスポンスを返すか、Webフォームが正しく動作するかなどのテストが自動化できます。

DrupalでBehatを動作させるのにとても素晴らしいドキュメントがありますので、興味ある方はこちらの記事を参考にしてみてください。
Drupal 8 に Drupal 向け Behat のスタンドアロンでの導入とシンプルなテストシナリオの作成 (引用)

Behatの簡単な使い方

Behat用のディレクトリを作成し、「composer.json」ファイルを作成します。

composer.json
{
  "require": {
    "drupal/drupal-extension": "~3.0",
    "guzzlehttp/guzzle" : "^6.0@dev"
},
  "config": {
    "bin-dir": "bin/"
  }
}

パッケージのインストール

$ composer install

 

「behat.yml」を作成しテスト環境を構築

default:
  suites:
    default:
      contexts:
        - FeatureContext
        - Drupal\DrupalExtension\Context\DrupalContext
        - Drupal\DrupalExtension\Context\MinkContext
        - Drupal\DrupalExtension\Context\MessageContext
        - Drupal\DrupalExtension\Context\DrushContext
  extensions:
    Behat\MinkExtension:
      goutte: ~
      selenium2: ~
      base_url: http://drupal-8.dd:8083/ #ウェブサーバのアドレス
    Drupal\DrupalExtension:
      blackbox: ~

参照:https://behat-drupal-extension.readthedocs.io/en/3.1/localinstall.html

behatの初期化

$ bin/behat --init

テストシナリオを作成します「features/test.feature」ファイルを作成します。

@d8
@api
# Feature 名
Feature: Test Feature
  # Scenario 名
  Scenario: 未ログインで管理画面にアクセス
    # シナリオの中身
    Given I am not logged in
    When I go to "http://drupal-8.dd:8083/admin"
    Then I should get a 403 HTTP response

  Scenario: Topページの表示を確認
    When I go to "http://drupal-8.dd:8083"
    Then I should get a 200 HTTP response

作成したシナリオを実行します。

$ bin/behat

これは簡単なテストですが、Drupalのドライバーを導入することで、ユーザーログインや、記事の作成、ユーザー作成などもテストすることができます。

 

さいごに

 

CMSを運用に落とし込んだときに、決められた期間(月に1度など)で、CMSのコア、プラグイン(モジュール)にセキュリティアップデートがないかチェックをしますが、理想を言うと、月に1度ではなく、常にチェックするのが理想です。しかし運用に落とし込むと工数(コスト)の問題から難しいのが現状です。

ですので、セキュリティを担保する上で、WAFを組み合わせることも重要です。レンタルサーバーを利用する場合は、WAFが標準搭載されている会社を選択するのが良いでしょう。

弊社が運用しているレンタルサーバーACE01もWAF標準搭載です。

また、CMSのアップデートや、追加開発にはステージング環境が必須です、レンタルサーバーACE01はステージング環境や、自動バックアップも標準で装備していますので、日々の運用を少しでも軽減したい方は、参考にしてみてください。

 

関連記事

 

知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法

 

 

関連タグ: 

WordPressセキュリティ強化の基本 WP4.7対応

$
0
0

 

Hacked Website Report – 2016/Q3」の調査によると、2016年Q3にハッキングされたCMS8,000サイトのうち、WordPressが74%、Joomla!が17%、Magentoが6%でした。

WordPressサイトをさらに調査すると、ハッキングに関与しているトップ3のプラグインは、Revslider、TimThumb、GravityFormsでした。これらのプラグインを導入しているユーザーは、早急にアップデートをした方が良いでしょう。

 


(調査結果及び、画像引用:Hacked Website Report – 2016/Q3

 

WordPressに限った話ではないですが、CMSのセキュリティ対策を行わず、WWWに公開するということは、いずれハッキングされると思ってください。

 

WordPressサイトのセキュリティを強化しよう

それでは、WordPressのセキュリティを強化するため具体的な施策をご紹介します。
 

参考記事(一部引用)

WordPress Codex(日本語): WordPress の安全性を高める
WordPress Codex(英語): Hardening WordPress
WordPress Codex(英語): Configuring Automatic Background Updates

 

  1. CMSのアップデート
  2. 管理者IDと、パスワード
  3. ファイル転送の通信手段
  4. ファイル・ディレクトリのパーミッション
  5. データベースセキュリティ
  6. WAF
  7. データバックアップ
  8. ログの取得
  9. 静的書き出しについて
  10. さいごに

 

CMSのアップデート

 

CMSの脆弱性はWordPressに限らず、どのCMSでも定期的に出ます。その脆弱性を放置したままサイトを運用することは、大変危険です。CMSのアップデートを定期的に実行し、WordPressのコア、プラグイン、テーマを常に最新に保ってください。
CMSのアップデート手順は大まかに下記の通りです。

[ステージング環境]

  1. バックアップ
  2. CMSアップデート
  3. 動作確認

[プロダクション環境(本番)]

ステージング環境で動作確認がOKの場合、プロダクション環境もアップデートする。

  1. バックアップ
  2. CMSアップデート
  3. 動作確認

 

WordPressのアップデートは管理画面にアクセスすると「更新」欄に通知されます。
アップデート通知がある場合、コア、プラグイン、テーマをアップデートしてください。

ポイント:

WordPressのアップデートは、バージョン3.7から、コアのマイナー更新および翻訳ファイルの更新に対してのみ自動で適用されます。
コアのマイナーも含めて一度ステージング環境で検証してから、プロダクション(本番)環境に適用したい場合は、「wp-config.php」ファイルに下記行を追加します。

/**
 * 自動アップデートを無効
 * true – 開発版、マイナー、メジャーアップグレードをすべて有効化
 * false – 開発版、マイナー、メジャーアップグレードをすべて無効化
 * minor – マイナーアップグレードのみを有効化
 */

define('AUTOMATIC_UPDATER_DISABLED','false');

WordPressは自動アップデートを推奨しています。十分な運用設計ができていない段階で、自動アップデートをオフにするのは危険ですのでおやめください。

また、プラグインやテーマは、できるだけ公式(https://ja.wordpress.org/plugins/)のを使うことと、プラグインに関しては最終更新が1年以上経過しているものは使わないようにしてください。もちろん公式以外にも優れたテーマや、プラグインは存在しますので、使う場合は十分に気をつけてください。

 

管理IDと、パスワード

 

みなさんは“狙われやすい” IDとパスワードが存在することはご存知でしょうか?
普段何気なく付けているIDとパスワードは、とても危険です。下記図は、弊社メールサーバーに対して総当たり攻撃を受けている一日分のログです。
(総当たり攻撃とは、一般的につけそうなIDやパスワードの組み合わせを片っ端から試す攻撃です。)

 

まずはアタックを受けている国別ランキングを見てみましょう。


(国別ランキング)

一番多くアタックが来ている国は中国でした。一日で約80万件のアタックを受けています。(怖いですね)

 

次に本題であります、一番多くアタックを受けているアカウント名を見てみましょう。

(ID別ランキング)

狙われやすいアカウント1位は「test」、2位が「info」でした。何気なくtest、info、admin、demoなどのアカウントに対して、password、p@ssw0rd、test123、demo123などの安易なパスワードを付けていませんか?

これらのIDとパスワードを設定して公開した時点で、遅かれ早かれメールアドレスやCMSなどのシステムが乗っ取られてしまう可能性が高くなってしまいます。

特に気をつけたいのが開発時に適当に設定した、ID:test、PW:test のようなアカウントが残ったまま公開してしまうこともあるかと思いますので、開発時の環境にも複雑なIDとパスワードを設定することをお勧めします。

ポイント:

  1. 推測されやすいアカウント名、パスワードを付けない。
  2. 複数サイトで同じアカウント名、パスワードを付けない。
  3. 開発中に使っていたアカウント「test」「demo」などが残っていないか確認する

 

ファイル転送の手段

 

Webサーバーにファイルを転送する場合に「FTP」を使うのではなく、「SFTP」を使用してください。
SFTPはFTPと違い、サーバー間のファイル転送(パスワード含む)が暗号化されるので、攻撃者に不正使用されることが無くなります。

お使いのファイル転送用アプリケーションをご確認ください。

 

ファイル・ディレクトリのパーミッション

 

セキュリティの観点から、ファイルパーミッション(読み・書き・実行の権限)を可能な限り制限することが重要です。
プログラムから書き込みが必要なファイルや、画像アップロード用の制限の緩い特別のフォルダなど用途に応じて用意する必要があります。

WordPressのデフォルトのパーミッションは以下の通りです。
(注意)レンタルサーバー会社によって、705や、604が推奨されているサーバーもあります

フォルダ - 755
ファイル - 644

 

フォルダが「755」、ファイルが「644」になっていない場合は下記コマンドによりパーミッションを変更するか、SFTPクライアントで接続し、変更することができます。

// フォルダ
find /path/to/your/wordpress/install/ -type d -exec chmod 755 {} \;

// ファイル
find /path/to/your/wordpress/install/ -type f -exec chmod 644 {} \;

 

wp-admin

「wp-admin」ディレクトリは管理者領域です。「wp-admin」にBasic認証を設定することで、ブログ管理領域、ログイン画面に2層の保護を追加することができます。しかしwp-admin ディレクトリを保護することで WordPress の一部機能が使えなくなってしまう場合がありますのでご注意ください(例えば wp-admin/admin-ajax.php に含まれる Ajax ハンドラなどです。)

Basic認証の設定方法は各社によって違いますので、各社オンラインヘルプ等を確認ください。

 

WP-Includes

「wp-includes」ディレクトリはWordPressのロジック部分で、スクリプトがユーザーによってアクセスされることを想定されていない部分です。「.htaccess」で下記コードを追加し、スクリプトをブロックしてください。

# Block the include-only files.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
</IfModule>

# BEGIN WordPress
# ここに記述しない

# END WordPress

マルチサイトを利用する場合は、7行目の「RewriteRule ^wp-includes/[^/]+\.php$ - [F,L] 」の記述は削除してください。

 

wp-content/uploads

「wp-content/uploads」ディレクトリは、WordPressが利用する画像ディレクトリで、PHPの実行は必要ありません。
「wp-content/uploads」ディレクトリに「.htaccess」を設置し、PHPの実行を防いでください。

# Kill PHP Execution
<Files *.php>
deny from all
</Files>

(注)お使いのテーマがuploadsディレクトリ内でPHPを実行する場合は、設置した「.htaccess」を削除してください。

 

WP-Config.php

WordPressをインストールした階層にある「wp-config.php」は、WordPressのコンフィグファイルです。WordPressの設定情報や、データベースのID、パスワード情報が記載されています。外部にもれないようにアクセス権限を厳しく設定してください。

「.htaccess」が利用できるサーバーであれば下記コードを追記するか、パミーションを「400」もしくは、「440」に設定してください。

<files wp-config.php>
order allow,deny
deny from all
</files>

 

ファイル編集の無効化

WordPressダッシュボードでファイル編集を無効にすることをお勧めします。無効にするにはwp-configファイルの最後に次のコードを追加してください。

define('DISALLOW_FILE_EDIT', true);

 

データベースセキュリティ

 

同一サーバー上で複数のブログを実行している場合は、別々のデータベースに格納し、異なるユーザーで管理をしてください。

 

WAF(Web Application Firewall)

 

今や一般的になった攻撃手法、XSS、CSRF、SQLインジェクションは、ソースコードレベルでの対策が必要です。
(XSS、CSRF、SQLインジェクションが分からない方は別記事の「知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法」を参照ください)

これらの攻撃に対してソースコードレベルの対応も必要ですが、WAFを導入し、これらの攻撃を2重で防ぐことも重要です。

CPI ACE01サーバーでは標準でSiteGuard(WAF)が導入されています。またSiteGuard WP Pluginを導入することで、さらにセキュリティを高めることができます。(一部の機能はSiteGuardが導入していないと利用できない)例えば、ある一定の回数以上ログイン失敗を繰り返すと、ログイン機能を一定時間ロックするなどの、セキュリティを強化するためには欠かせない機能が追加されます。

CPIサーバー以外でもWAFが標準装備のホスティングは多数あります。サーバー選定時には気にしたいところです。

 

バックアップ

 

万が一に備えてデータのバックアップを取得しましょう。
バックアップはデータベースのバックアップと、htmlディレクトリのバックアップが必要です。

バックアップ取得方法はいくつかありますが、SSHでコンソールにログインできるのあれば下記コマンドで取得可能です。

コンソール画面より

データベースダンプ:

// -h 127.0.0.1 はデータベースサーバーを指定
mysqldump -h 127.0.0.1 -u USERNAME -p DatabaseName > Db_Dump.sql

Webデータ圧縮:

tar zcvf FileName.tar.gz html

 

Backup Guard Plugin

バックアップ取得用のPluginもいくつか出ていますので、Pluginでバックアップを取得するのも良いでしょう。
Backup Guard」は、バックアップの取得、ダウンロード、インポートが簡単に行えます。

 

レンタルサーバーのバックアップ

プラグインや手動のバックアップに加え、レンタルサーバー各社が提供しているバックアップのサービスを組み合わせることで、データ保全生が増します。バックアップが付いているレンタルサーバー会社を選択することも重要です。

 

 

ログの取得

 

WP Security Audit Log」Pluginを導入すると、誰がどんな操作をしたのか、ログインアタックを受けているかなどのログを取得することができます。


(クリックして拡大)

ログはアタックを受けたときの調査や、日々の監視に役立てることができます。「WP Security Audit Log」Pluginは簡単に導入ができるので入れておきたいプラグインです。

 

静的書き出しについて

 

この項目は書こうかどうか迷った項目です。考え方のひとつとして解説します。

動的コンテンツを公開環境に置かないことが、CMSをもっともセキュアに保つことと言えるでしょう。一例をあげると、ステージング環境にWordPressを導入し、静的なHTMLファイルを書き出し、書き出したHTMLファイルを公開環境にアップする。

このように公開環境に静的ファイルしか存在しない場合、Webコンテンツ経由からのハッキングは、ほぼ無くなります。(DOMや、JavaScriptを使用する場合気にするポイントあり)不特定多数を狙った攻撃からは、まず外れます。

WordPressでは「StaticPress」を導入することで、静的な書き出しができるようです。
ただ静的書き出しをするのであれば、別のプロダクトを考えても良いかもしれません。例えばMovable Typeや、静的サイトジェネレータ(Static Site Generator)のJekyll などが有名です。

要件にあった静的書き出しのプロダクトを選択することで、セキュアにサイトを保つことができます。

 

 

さいごに

 

CMSなどの不正アクセスの原因はIPAの不正アクセス届出状況を参照すると、ID・パスワードの管理不備や、古いバージョンを使用していたことがほとんどと言うことが分かります。

ID・パスワードを予測できないものにする、CMSをアップデートする、ログインを2段階にするということで、ほとんどの不正アクセスは防ぐことができます。これらの基本に加えWAFや、ファイアウォールを組み合わせたり、万が一のためにバックアップを取得したりすることが昨今のCMSに求められています。

 

CPI ACE01サーバーでは、バックアップ標準装備、WAF標準装備、ステージング環境標準装備です。
WordPressのセキュリティを強化するために必要な機能を備えていますので、サーバー選定時に思い出していただけると幸いです。

 

Flexboxの全プロパティと使い方

$
0
0

CSS3の新しいレイアウトモジュールFlexible Box Layout Module(以下、Flexboxと呼ぶ)が、WebサイトのHTML/CSSレアイアウトコーディングの主流になりつつあります。

これまでのレイアウト構成に使っていた、floats と clearfix では表現できなかったことが、Flexboxでは簡単に表現できるようになりました。今回の記事ではCSS3の新しいレイアウトモジュール Flexboxの全12つのプロパティをデモ付きでご紹介いたします。

おまけ

神戸ITフェスティバル2016 登壇時に使用したスライドも合わせてどうぞ。
http://shared-blog.kddi-web.com/sandbox/flexbox-s/

 

 

Flexboxの使い方

 

Flexboxは、まず親要素をFlex containerにします。Flex containerは、displayプロパティにflexを(display:flex;)指定します。

HTML

<div class="flex-container">
 <div class=”item”>Flex item</div>
 <div class=”item”>Flex item</div>
 <div class=”item”>Flex item</div>
​</div>

CSS

.flex-container{
 display: flex;
}

「display:flex;」を指定した配下の要素が、Flex itemになります。

 

 

Flexboxのプロパティ

 

FlexboxのプロパティはFlex containerにかけれるプロパティと、Flex Itesにかけれるプロパティがあります。

Flex Container用のプロパティ

プロパティValue / Initial備考
flex-direction

[Value]
row、row-reverse、column、column-reverse

[Initial]
row

Flex container内のitemの並びを縦か横に設定

デモ

flex-wrap

[Value]
nowrap、wrap、wrap-reverse

[Initial]
nowrap

Flex container内のitemの折り返しの指定

デモ

flex-flow

[Value]
<flex-direction> || <flex-wrap>

[Initial]
row nowrap

flex-directionとflex-wrapをまとめて設定
justify-content

[Value]
flex-start、flex-end、center、space-between、space-around

[Initial]
flex-start

横並びの位置を指定(左揃え、右揃え、中央揃え、均等配置)

デモ

align-items

[Value]
flex-start、flex-end、center、baseline、stretch

[Initial]
stretch

縦並びの位置を指定(上揃え、下揃え、中央揃え、ベースライン、等幅)

デモ

align-content

[Value]
flex-start、flex-end、center、space-between、space-around、stretch

[Initial]
stretch

複数行にまたがった縦並びの位置を指定(上揃え、下揃え、中央揃え、均等配置)

デモ

 

Flex item用のプロパティ

プロパティValue / Initial備考
order

[Value]
<integer>

[Initial]
0

Flex itemの並び順を指定

デモ

flex-grow

[Value]
<number>

[Initial]
0

Flex itemが画面幅に満たない場合に伸びる倍率

* デモはFlexプロパティに集約

flex-shrink

[Value]
<number>

[Initial]
1

Flex itemの幅が画面サイズより小さい場合に縮む倍率

* デモはFlexプロパティに集約

flex-basis

[Value]
content、<'width'>

[Initial]
auto

Flex itemの基準幅を設定

* デモはFlexプロパティに集約

flex

[Value]
none、[ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

[Initial]
1 0 auto

flex-grow、flex-shrink、flex-basisをまとめて指定

デモ

align-self

[Value]
auto、flex-start、flex-end、center、baseline、stretch

[Initial]
auto

Flex itemの縦並び位置を指定

デモ

 

関連リンク

 

 

またこのコンテンツはMdN Design Interactive との共同コンテンツ「CPIエバンジェリストのお悩み相談室」でも紹介されています。
合わせましてよろしくお願いいたします。

 

関連タグ: 

CPIサーバーでSassなどのSource Mapが使えない対処方法

$
0
0

Source Mapを使うと、SassやLess、TypeScriptなどで、コンパイルされ難読化されたコードが、オリジナルファイルの何行目に書かれているかを確認することができます。

例では ID: mainに設定したスタイルがオリジナルファイルの「style.scss」の7行目に書かれていることが分かるかと思います。

 

しかしCPIサーバーではSource Mapが正しく動作しません。

 

設定の前に注意事項

 

1)

CPIサーバーで、Source Mapを使うためには .htaccessの設定変更が必要です。
.htaccessファイルは記述を間違えますとWebサイトが停止していまう恐れがあります。必ずテスト環境で試してから、本番に反映してください。

 

2)

この設定を反映するとイメージマップが使用できなくなります。Source Mapと、イメージマップを両方使いたい場合は、下記の行を「.htaccess」に追加し、イメージマップで使っているファイルの拡張子を変更してください。

例)

AddHandler imap-file imagemap

ファイル名例)
image.imagemap

 

設定方法

 

CPIサーバーでSource Mapを使う場合は、「.htaccess」に下記の行を追加する必要があります。
(.htaccessファイルが無い場合は、新規作成してください)

RemoveHandler map

 

設定は以上です。上記設定を反映しても、Source Mapが正しく表示されない場合は、ブラウザのキャッシュを一度削除してください。

 

 

関連タグ: 

CPI × KUSANAGI × WordPressの実力を検証してみた

$
0
0

レンタルサーバーのCPIは、プライムストラテジー社が開発しているWordPressを高速化するKUSANAGIを導入したサービスを2017年3月22日にローンチしました。

前回CPIの専用サーバーでベンチマークを測ったときは、「3000万PV / 月」と結果がでましたが、KUSANAGIプランは、どれくらいアクセスをさばけるのでしょうか。実験してみたいと思います。

前回の記事

CPIの専用サーバー(CHM01)の実力を試してみた

 

CPI x KUSANAGI検証方法

 

今回検証を行うのはKUSANAGIプランの中でも一番安いCHV-01を使います。
サーバーのチューニングはせずに、KUSANAGIコマンドでインストールしたままの構成を利用します。

メモリ:8GB
CPUコア数:2

ミドルウェアのバージョン

nginx:kusanagi-nginx-1.11.10-1
HHVM:kusanagi-hhvm-3.18.0-1
mariadb:MariaDB-Galera-server-10.0.29

詳細スペックはこちら

https://www.cpi.ad.jp/private/lp/kusanagi/

 

検証方法

WordPress環境を構築し、外部サーバーよりApache Benchにて計測を行う。
計測を行うパラメータは下記の通り。

$ ab -n 1000 -c 100 http://対象ドメイン/

100同時接続の1000リクエストを送る負荷テストを3回行い、その平均を取得

WordPressは、インストール直後の状態ではなく、より実データに近づけるためテーマユニットテスト(WordPress Codex 日本語版ページ)データをインポートし、ページが存在する状態とする。

ページ容量: 105.22KB

 

検証結果

 

(ページキャッシュ無し)

プラン1回目2回目3回目平均
CHV-0160.7661.1961.1661.03
CHV-02109.7494.14119.17107.68
CHV-03132.81166.67123.59141.02

 

(CHV-01 キャッシュ有り設定)

キャッシュ1回目2回目3回目平均
fcache on488.52425.18444.88452.86
bcache on434.23467.14380.97427.44
fcache on
bcache on
491.92410.65384.11428.89

※小数第3位以下切り捨て

検証結果は上記の通りで、CHV-01の場合、平均して1秒間に61回のリクエストに応答することができました。

これを月間のPV(ページビュー)に換算すると。

60(秒) ×  60(分) × 24(時間) × 30(月) = 2,592,000秒 (1ヶ月の秒数)

CHV-01 61リクエスト / 秒  × 2,592,000秒 = 158,112,000 PV / 月

単純計算で、平均してアクセスがあった場合、1億5千万PVをさばくことができます(ページキャッシュ無し)

fcacheをオンにした場合、約11億PVですので、ちょとやそっとのサイトでは問題なさそうですね。

※ 注意 !!

WordPressサイトの応答時間や、保有しているページ数などにより大きく変動します。
目安としてお考えください。

また1秒間に61リクエストの応答ができますが、1秒間で61リクエスト以上のアクセスがあった場合は応答することができません。
この数値は最大値ですので、お気をつけください。

 

所感

 

これまでWordPressを使っていて遅いと感じていた方は多いのではないでしょうか。
WordPressを高速化するためには、キャッシュなどの専門的知識や、CDNなどのプロダクトが必要でした。

CPIのKUSANAGIプランを利用することにより、専門知識がなくても高速なWordPressを利用することができます。

CPIのKUSANAGIプランはネットワーク1GBのベストエフォート型(データ転送量無制限)で、9,000円 〜 / 月 で利用することができます。
1GBの回線つきで、9,000円 〜 / 月 は安いのでは無いかなと思っています。

 

気になる方はお気軽にお問い合わせください。

 

セミナーのご案内

 

CPI x KUSANAGIプランのリリースを記念して、セミナーを開催します。

イベントテーマ:
KUSANAGIでWebサイトをもっと速く、もっとセキュアに運営しよう !!
2017年04月17日(月)19:00 - 21:30 @ 東京


https://cpi-server.doorkeeper.jp/events/58737

CPIからは、当ブログの筆者でもあります、阿部が参加し初公開のDrupal8 x KUSANAGIのベンチマークの結果等を発表したいと思います。
どうぞよろしくお願いいたします。

 

 


CPI LINE@のご案内

$
0
0

日頃よりレンタルサーバーCPIをご利用いただきありがとうございます。
レンタルサーバーCPIは、主にオンラインでサーバーを販売しているため、ユーザー皆様との接点が極端に少ないです。

私はご利用いただいているユーザーの皆様との接点は、大変重要だと感じており、イベントなどを通じてユーザー皆様との交流をしております。

Line@は、その接点となる1つで、普段顔の見えない皆様とLine@を通じて交流していけたらと考えています。

 

Line@で配信している内容

 

CPI Line@では、下記の情報を配信しています。

  • CPIに関する情報
  • Web制作に役立つ情報
  • セミナー招待チケットや、ノベルティのプレゼント

 

CPIに関する情報サンプル

プレゼントサンプル

 

 

CPI Line@ランチ会

 

さらに日頃の感謝の意を込めて、Line@のお友達登録していただいているユーザー限定で、東京、大阪、福岡でランチ会をしてきました。

CPIユーザーの方もそうでない方も多くの方に参加いただき、CPIに対して改善してほしいこと、こんなイベント開催してほしい、ブログでこんな記事を書いてほしいなど、貴重なご意見をいただきました。

CPIでは、このようなユーザーとの接点を大事にしております。
ぜひLine@にご登録いただき、CPIユーザー、CPIスタッフブログの読者などの皆様と交流できたらと思っています。

 

参加いただきました、株式会社ジーティーアイブログにもランチ会の様子を掲載いただきました。
CPIレンタルサーバー Line@ ありがとうキャンペーンランチ会 in 福岡に参加しました!

 

Line@登録

 

お得な情報が満載の、Line@登録は下記のリンクからできます。
皆様のご登録お待ちしております!

line://ti/p/@gkv8736o

 

 

関連タグ: 

CPIサーバーにWordPressをインストールする手順 4.x 編

$
0
0

レンタルサーバーCPIサーバーにWordPressをインストールする手順の紹介です。

使用するサーバーは、共用型レンタルサーバーACE01です。
記事の前半ではCMSインストーラーを使用した設置方法で、後半に手動で設置する方法を紹介しています。

新規にWordPressをインストールする場合は、CMSインストーラーを利用することをオススメします。

 

CMSインストーラーを利用した
WordPressインストール手順

 

  1. WordPressファイルの設置

    Web用コントールパネルから、「テストサイト用設定 > ソフトライブラリ > CMSインストーラー > WordPress」にアクセスします。
    インストール先のディレクトリを選択します。今回は「/wp」ディレクトリにインストール先を指定し、「インストールする」をクリックします。

    WordPressのディレクトリとファイルが指定のディレクトリに展開されます。
     

  2. WordPressのインストール

    WordPressのファイルを展開したサイトにアクセスします。(今回は「wp」ディレクトリに設置)

    テストサイトの場合: 
    http://XXXXX.smartrelease.jp/wp/

    公開サイトの場合:
    http://example.com/wp/

    アクセスするとWordPressをインストールする画面が表示されます。

    「さあ、始めましょう!」をクリックします。
    データベース情報画面では、データベースのパスワードを入力し、そのまま「送信」をクリックします。
    次の画面で「インストール実行」をクリックします。
     

  3. WordPressの必要情報を入力し、「WordPressをインストール」をクリックします。


     

  4. インストールが完了しました。

    インストール後は、WordPressのアップデートや、セキュリティを向上させるための設定を適宜実施ください。
    セキュリティ向上は下記の記事を参照ください。

    WordPressセキュリティ強化の基本 WP4.7対応

 

 

なお、様々なブログを見ていますと、CPIサーバーだと、Contact Form 7が文字化けするや、インストール時にエラーが起こるなど書かれていることがありますが、CMSインストーラーを使用することで一切起こりません。

こちらはContact Form 7をインストールし、検証した画面です。

 

手動でのWordPressインストール

 

またCMSインストーラを使用せずに、WordPressをインストールする場合は、WordPressで利用するデータベースの作成、WordPressファイルの設置、.htaccessの変更、データベースポートの確認が必要です。

これ以外はインストーラーを使ったインストール方法と変わりません。

データベースの新規作成

Webコントールパネルにログインし、「テストサイト用設定 > データベース > MySQL5.5データベースの追加・削除」を開き、「データベースの新規作成」をクリックします。

文字コード:UTF-8
新規データベース名:wptest (名前はなんでもかまいません)

.htaccessの修正

WordPressを設置したディレクトリに「.htaccess」を作成します。すでに.htaccessが存在する場合は編集してください。

AddHandler x-httpd-php70 .php
suPHP_ConfigPath /home/aa1886sk0e/html/wp/
<FilesMatch "^(\.htaccess|\.htpasswd|php\.ini|.*\.sql|.*\.log|.*\.cron|.*\.inc|.*\.phps|.*\.yml)$">
  Deny from all
</FilesMatch>
Options +SymLinksIfOwnerMatch

# BEGIN WordPress

# END WordPress

 

AddHandler x-httpd-php70 .php : PHPのバージョンを指定します。今回はPHP7.0.15を利用する記述です。
ご利用プランによって、記述方法が変わりますので詳しくはオンラインヘルプを参照ください。

 

suPHP_ConfigPath /home/XXXXX/html/wp/:WordPressを設置したディレクトリを指定します。
XXXXXを、ユーザーIDを指定ください。

 

データベースのポート番号

サービスのプランによってMySQLのポートが違います。
MySQLのポートは通常3306ですが、CPIではプランや、バージョンによってポートが違います。

プランごとのポートはオンラインヘルプをご確認ください。
 

3306番ポート以外の場合は、インストール時にポートを指定する必要があります。

データベースのホスト:127.0.0.1:ポート番号

 

インストーラーを使わない場合は、以上の設定変更で動作させることができます。

 

最後に

 

WordPressは世界で最も使われているCMSです。
最も使われているCMSだからこそ、狙われやすいCMSでもあります。WordPressを導入の場合は、日々のセキュリティアップデートなどを運用に組み込むようにしてください。

 

 

WordPressのセキュリティは下記の記事が参考になります。
WordPressセキュリティ強化の基本 WP4.7対応

 

 

 

関連タグ: 

JavaScriptのデバッグに役立つConsole APIメソッドについて

$
0
0

みなさんこんにちは、JavaScriptを使い動的なWebサイトを構築していますでしょうか。
本日はJavaScriptの開発時に役立つ、Console API メソッドを紹介します。

こちらの記事はMdNデザインと共同で進めている記事です。
MdNデザインのサイトも合わせまして、よろしくお願いいたします。

Console API デモページ

 

Console API とは

 

JavaScriptを開発したことがある方は、一度は「console.log( );」メソッドを見たことがあるのではないでしょうか。

<script>
console.log('コンソール画面に文字を表示');
</script>

結果:

console.log()は、コンソール画面にメッセージを表示するためのメソッドです。

 

コンソール画面の出し方

Chromeブラウザで、画面上を右クリックし「検証」をクリックします。

デベロッパーツール画面が表示されるので「Console」をクリックします。

コンソール画面には、Console APIから出力しているメッセージもあれば、JavaScriptからのエラーも表示されます。

 

このコンソール画面に表示させているメソッド「console.XXX()」がConsole API です。
JavaScrirptの開発時には欠かせないAPIで、よく使われているconsole.log() の他にも様々な種類のConsole APIが存在します。

 

Console API メソッド

 

Console APIは、「console.log()」の他にFirefoxのみで使えるものなど合わせて20種類あります。
今回はConsole Standardに掲載されている情報を参考に17種類を紹介します。

ロギング メソッド

グルーピングメソッド

タイムメソッド

 

コンソール画面へのロギング(オススメ)

 

<script>
console.error('エラー表示');
console.warn('警告表示');
console.log('ログ表示');
console.debug('デバッグ表示'); //非推奨。Chromeでは表示されない
console.info('Info表示');
</script>

Chrome結果:

Firefox結果:

Chrome、Firefoxで多少見え方が違います。console.debug()は、Chromeで表示されません。

 

Console Assert

 

変数には様々な値を代入することができ、その1つにブール値(Boolean)を入れることもできます。
Console Assertは、ブール値(Boolean)を確認し、falseの場合、コンソール画面に出力します。

<script>
var boolean = false;
var boolean1 = true;
console.assert(boolean, "falseなので出力");
console.assert(boolean1, "出力されません");
</script>

結果:

また、下記のように整数で判定することもできます。

<script>
var boolean = 0;
var boolean1 = 1;
console.assert(boolean, "falseなので出力");
console.assert(boolean1, "出力されません");
</script>

 

Console Clear

「console.clear();」は、コンソール画面をクリアします。

結果:

 

Console Count(オススメ)

 

ループや関数内で、指定されているラベルが何回呼び出されかカウントします。

<script>
// 配列を指定
Things = new Array('りんご','ごりら','らっぱ');

// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
  console.count('ラベル1');
}

console.count('ラベル2');
console.count(); //ラベルなし
</script>

結果:

 

Console Table

 

配列や、オブジェクトを表形式に出力。

var member = new Object();
member[0] = ({
    'Name':'Masayuki Abe',
    'age':39,
});
member[1] = ({
    'Name':'Nagano Eiji',
    'age':37,
});
member[2] = ({
    'Name':'Maekawa Masayuki',
    'age':43,
});
console.table(member);

結果:

 

Console Dir(オススメ)

 

オブジェクトのプロパティやメソッド、配列などを階層表示で確認できます。

<script>
// オブジェクトの定義
var fruits_color = new Object();
fruits_color = {
  red:"いちご",
  yellow:"バナナ",
  pink:"もも",
  extra:'',
  change_fruits:function(fruits_name){
    this.red = fruits_name;
  }
}

fruits_color.extra = {
            purple:"ぶどう"
}
console.dir(fruits_color);

// その他にもブラウザそのものである、
// windowオブジェクトを表示することもできる
console.dir(window);
</script>

結果:

 

Console dirxml

 

DOMエレメントをツリー構造で表示します。

<body>
<h1 id="test">
   <a href=""><span>JavaScriptのデバッグ</span></a>
</h1>
<script>
var title_content = document.getElementById('test');
console.dirxml(title_content);
</script>
</body>

結果:

 

Console Trace(オススメ)

 

console.trace() は、スタックトレースをコンソール画面に出力します。
スタックトレースとは、プログラムの実行過程を記録したものです。
説明だけだと分かり難いので例を見てみましょう。

下記コード例は、最初のif文で変数「hoge」がundefinedの場合、check_data関数でデータをチェック。その後、エラー判定されたら、error_log() 関数でエラーを記録するというプログラム例です。

var hoge;
if(!hoge){
  // hogeがundefinedの場合の処理
  check_data();
}

function check_data(){
  // チェックをして、エラーだった場合
  error_log('err-00001');
}

function error_log(err) {
  // エラー処理
  console.trace(err);
}

上記例で、何かしらの処理でエラーが発生した場合にコンソールにエラー内容が出ますが、どこの処理を通ってerror_log関数に到達したか知りたいときもあります。

そのような場合に「console.trace()」を設置すると、処理の流れをみることができます。

結果:

さらにコンソール画面の「ファイル名:行数」をクリックすると、該当の処理を確認することもできます。

 

ログのグループ化

 

大量のログを出力する際に、ログをグループ化し、ラベルを付与することができます。

console.group() : 以降の出力を別のレベルにインデントする。(開いた状態で出力)
console.groupCollapsed() : 以降の出力を別のレベルにインデントする。(閉じた状態で出力)
console.groupEnd() : グループの終了

<script>
// 配列を指定
Things = new Array('りんご','ごりら','らっぱ');

console.group('グループ1');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
  console.log(Things[i]);
}
console.groupEnd();

console.groupCollapsed('グループ2');
// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
  console.log(Things[i]);
}
console.groupEnd();
</script>

結果:

 

処理時間を計測

 

プログラムを書いていると、プログラムの実行時間が気になることがあります。
JavaScriptの処理時間は、console.time()を使うことで簡単に計測することができます。

console.time([timerName]) タイマースタート
console.timeEnd([timerName]) タイマーストップ

<script>
console.time('Test1');
console.time('Test2');
Things = new Array('りんご','ごりら','らっぱ');

// 配列の個数分ループ
for (var i = Things.length - 1; i >= 0; i--) {
  //
}
console.timeEnd('Test1');
console.timeEnd('Test2');
</script>

結果:

 

最後に

 

JavaScriptのデバッグに役立つConsole APIはいかがでしたでしょうか。
console.logの他にも多くのメソッドが用意されています。

開発時に筆者がよく使うメソッドは、log()、dir()、count()です。他にもtrace()なども便利そうですね。
開発時にConsole APIを使いロギングするのはバグなどを見つける有効な手段です。しかしconsole.log()は開いているブラウザ上でのロギングになるため、実運用に入った場合あまり意味を成しません。

そこでhttpリクエストを送る箇所や、複雑な処理を行う場合などtry cacheや、onerrorを使い、エラーがあった場合にファイル書き出しをしたり、Google Analyticsに記録したりすることで、エラー箇所を特定することもできます。

 

 

関連タグ: 

CPIの共用型レンタルサーバーACE01にCakePHP3をインストールする方法

$
0
0

お客様からの問い合わせで共用型サーバーのACE01にCakePHPをインストールすることはできますか?と、質問されることがあります。

答えはできますが、プログラムの設置などサポート対象外ですので、CPIスタッフブログで紹介させていただきます。
 

使用する環境

 

CakePHPの公式ドキュメントにて、システム要件の確認ができます。
https://book.cakephp.org/3.0/ja/installation.html

 

CakePHPのインストール

 

  1. 「.htaccess」の設置

    CakePHPをインストールするディレクトリに「.htaccess」を設置し、下記行を追記します。
    今回は「/cakephp」に設置を行いますので「/cakephp/.htaccess」とします。

    AddHandler x-httpd-php71 .php
    # Follow symbolic links in this directory.
    # ZZ、Zなどの古いプラン
    # Options +FollowSymLinks
    # ACE01 現行プラン
    Options +SymLinksIfOwnerMatch
    
    

    利用しているプランによりシンボリックリンク設定の記述方法が異なります。
    ご利用のプランにより設定を変更ください。
     

  2. ACE01にSSH接続
     
    ssh USER_ID@aaXXX.secure.ne.jp -p PORT_NUMBER -i SSH_KEY

    USER_ID: ユーザーID
    aaXXX.secure.ne.jp: サーバーアドレス
    PORT_NUMBER: ポート番号(コントロールで確認)
    SSH_KEY: ダウンロードした秘密鍵を指定

    SSH接続の詳細はオンラインヘルプを参照ください。


     

  3. パッケージマネージャーのComposerをインストール

    コンソール画面より下記コマンドを実行

    // CakePHPインストールディレクトリに移動
    cd html/cakephp
    
    // インストール
    curl -sS https://getcomposer.org/installer | php-7.1
    
    // 確認
    php-7.1 composer.phar
    
  4. CakePHPプジェクト作成

    コンソール画面より下記コマンドを実行します。
    「my_app_name」は、指定しないと「app」になります。

    php-7.1 composer.phar create-project --prefer-dist cakephp/app my_app_name

以上でインストールが完了しました。

データベースと連携する場合は、「/html/CakePHPインストールディレクトリ/my_app_name/config/app.php」を開き、220行目付近の下記コードを修正します。

'Datasources' => [
  'default' => [
    'className' => 'Cake\Database\Connection',
    'driver' => 'Cake\Database\Driver\Mysql',
    'persistent' => false,
    'host' => '127.0.0.1',
    // ACE01_2015、とCHM-ZでMySQL5.6の場合3307、それ以外は3306
    'port' => '3307',
    'username' => 'USER_ID',
    'password' => 'USER_PW',
    'database' => 'USER_ID_DB_NAME',

portは、ACE01_2015及びCHM-Zで、MySQL5.6使用の場合は3307、それ以外は3306です。
詳しくはオンラインヘルプを参照ください。

インストールが完了しました。「/cakephp/my_app_name」にアクセスするとデフォルト画面が表示されます。

 

最後に

 

共用型レンタルサーバーACE01では、2016年5月19日よりコンソール画面からPHPコマンドが使えるようになりました。
この追加によりComposerの利用や、CronからPHPの実行などできるようになり、出来ることの幅が広がりました。

共用型サーバーは運用は楽だけど、できることの幅が狭いと感じていた方は、ぜひ10日間のお試しなどしてみてください。
今後も、お客様からのお問い合わせ内容を記事にしていきたいと思っていますので、どうぞよろしくお願いいたします。

 

 

関連タグ: 

テレワークについてカルビー社など取材しました

$
0
0

2017年6月20日に「テレワーク砂漠」という、テレワークの良さを伝えるためのコンテンツを公開しました。

「テレワーク砂漠」は、2047年に架空の人物「翔太郎(しょうたろう)」が、2017年にテレワークを導入している企業に、テレワーク導入のきっかけと、効果をインタビューした内容を妻に話すという内容です。

書いたきっかけは、KDDIウェブコミュニケーションズにも導入されたテレワークの素晴らしさを皆さんに伝えたいという気持ちで、最初は書こうと考えました。

では、なぜ物語風にしたかと言いますと、それは単純に私が物語風の記事を一度は書いてみたかったという理由が全てです。
書き終えて思ったことは、普通に取材記事として出した方が、言いたいことが伝わるし良いのではないかと言うことでした。

ただ、このようなリアル取材の内容と、物語が一緒になっているような記事があまりないことと、せっかく書いたのだからリリースしてみたいという気持ちが勝ち、出すこととなりました。

 

取材させていただいた企業

 

取材させていただいた企業は「カルビー株式会社」「日本マイクロソフト株式会社」「日本ツクリダス株式会社」「KDDIウェブコミュニケーションズ」です。

弊社合わせまして4社に取材を行いました。それぞれの会社がどのような理由でテレワークを導入しているか、どのような効果があったかなどを掲載しています。

当記事を通じて、より多くの企業でテレワークが導入され、働きやすさの向上により、日本企業の生産性が向上する。このように当記事が少しでも社会のお役にたてることを願っております。

少し長い記事ですが、ぜひ読んでみてください。

 

テレワーク砂漠

 

 

 

JavaScriptのオブジェクトと、DOMを理解しよう

$
0
0

JavaScriptの基礎セミナーの講師を度々やらせていただくことがあります。
セミナーを何度かやっていると、みなさんつまずく理由は同じだなという印象です。

つまずく理由は、デバッグができていないことと、オブジェクト(DOM含む)を理解していないことです。
デバッグに関しては先日書いた記事「JavaScriptのデバッグに役立つConsole APIメソッドについて」を参照ください。

今回は、2つ目のつまずくポイント、オブジェクト(DOM含む)について紹介します。

 

 

オブジェクトとは

 

オブジェクトとは、変数と、関数の集合体です。
簡単にいうと、なんでも情報を沢山入れられる箱と考えてください。その箱を会社に例えると、財務情報が入っていたり、社員情報が入っていたり、社員の給料を計算する式が入っていたりします。

プログラム界の「四次○ポケット」的な役割です。

 

オブジェクトを理解しよう

 

分かりやすいかも?と思ったので、今回は物語仕立てで「変数、関数、オブジェクト」について紹介します。

登場人物

あだ名: パパ(37歳)

仕事: 不動産屋社長

性格: おっちょこちょい

趣味: ゴルフ、麻雀

 

あだ名: しぃちゃん(8歳)

職業: 小学2年生

性格:しっかり者

趣味: プログラミング

 

 

しぃちゃんお願い!!

スーパーに行って、大根と豆腐を買って、その後にパン屋さんで、食パンとジャムを買ってきてね。
よろしくね!!

 

分かったわ。タイタニックくらいの大船に乗った気持ちで待っててね。

 

財布に「1000円」入っているからね。

 

うん、分かった!

 

(しぃちゃんは1000円入った財布を受け取った)

var Saifu = 1000;
//  補足:
//  「var 変数名」で、変数を宣言しています。
//  上記例は var Saifu で、Saifuという「変数」を宣言しました。
//  「変数」とは、文字や、数値、関数、真偽値などを入れるための箱です。
//  var Saifu = 1000; は、「Saifu」を変数として宣言し、1000(円)を代入しています。

 

パパ1000円入れたって言ってたけど、おっちょこちょいだし不安だな......

 

(しぃちゃんは財布の中身を確認した)

console.log(Saifu);
//console APIを使い、コンソール画面にSaifuの中身を出力します。
//詳しくは「JavaScriptのデバッグに役立つConsole APIメソッドについて」を参照してください。 

(結果)

 

よし、財布(Saifu)に1000円入ってるわね。まずはスーパーで買い物よ!

大根(180円)と、豆腐(300円)あったわ!

 

(しぃちゃんは、大根と豆腐を買い物カゴに追加した)

var Daikon = 180; //大根の値段を代入
var Tofu = 300;    //豆腐の値段を代入
var Kago = 0;       //買い物カゴ

// 買い物カゴに大根と豆腐を追加
Kago = Daikon + Tofu;

// 補足:
// Daikon + Tofu の「+」は、演算子です。
// 今回は「180 + 300」で加算した結果(480)を、Kagoに代入しています。

 

よし!ブツはそろったわ。レジでお会計よ。

 

(しぃちゃんは、レジでお買い物をした)

Saifu = Saifu - Kago;
// Saifu - Kagoで、1000 - 480の結果(520)を、Saifuに代入しています。

 

次はパン屋で買い物! 食パン(200円)と、ジャム(250円)ね

 

(しぃちゃんは、食パンとジャムを購入)

// 買い物カゴを空に戻す
Kago = 0;
// パン(200円)を定義
var Pan = 200;
// ジャム(250円)を定義
var Jyamu = 250;
// カゴにジャムとパンを追加
Kago = Pan + Jyamu;
// お会計
Saifu = Saifu - Kago;

 

これで買い物は終わり。

しかし2カ所で買い物するの面倒だったわ。だってカゴに商品を追加して、レジで支払いする行動は、スーパーでもパン屋でも同じ。

こんな単純な繰り返し処理は好奇心旺盛な子供にはダルいわ。

そうだ!買い物処理を「関数」にまとめちゃいましょ!

// カゴに商品を追加し、財布から引く行動を関数にまとめる
function Add_Kaimono(shouhin1,shouhin2,saifu){
  saifu = saifu - (shouhin1 + shouhin2);

  // 処理した結果を関数の呼び出しもとに渡す
  return saifu;
}
// 財布の定義
var Saifu = 1000;

// Add_Kaimono(180,300,Saifu)で、定義した関数に商品の値段と、
// Saifuを渡しています。
// スーパーでの買い物
Saifu = Add_Kaimono(180,300,Saifu);

// パン屋での買い物
Saifu = Add_Kaimono(200,250,Saifu);

console.log(Saifu);

 

随分とコードがすっきりしたわ。

でも、Saifuの定義と関数の定義が分かれていたり、買い物の関数呼び出しが2回でてきたり、気持ち悪いわ。

 

そうだ!「オブジェクト」に処理をまとめちゃいましょう。

// Kaimono オブジェクトを作成
var Kaimono = new Object();
Kaimono = {
  Saifu:1000,
  Kago:0,
  // カゴに追加する処理
  Add_Kago:function(shouhin1,shouhin2){
    this.Kago = this.Kago + shouhin1 + shouhin2;
    // 処理結果を戻す
    return this;
  },
  // 支払い
    Kaimono_Seisan:function(){
    this.Saifu = this.Saifu - this.Kago;
  }
}
// スーパーの買い物 . パン屋の買い物 . 清算
Kaimono.Add_Kago(180,300).Add_Kago(200,250).Kaimono_Seisan();

// 財布の中身を確認
console.log(Kaimono.Saifu);

 

「var Kaimono = new Object();」で、Kaimonoオブジェクトを作成し、
「Saifu:1000」「Kago:0」で、Saifuと、Kagoのプロパティを作成しています。

「Add_Kago」と、「Kaimono_Seisan」は、買い物カゴに商品を追加する関数と、清算する関数を定義しています。オブジェクトのメソッドと言われています。

定義したオブジェクトを「.」ドットで、処理をつないでいます。これをメソッドチェーンと呼んでいます。
Kaimono
  .Add_Kago(180,300)
  .Add_Kago(200,250)
  .Kaimono_Seisan();
 

オブジェクトとは上記のように、変数や、関数を一つの箱(オブジェクト)に入れる箱です。
JavaScriptを使っていると、このような書式をよく見ると思います。それらは全てオブジェクトのプロパティや、メソドットを使い処理が構成されています。
 

 

DOMについて

 

オブジェクトが理解できたところで、DOMについて説明します。
DOMとは、「 Document Object Modle(ドキュメント・オブジェクト・モデル)」の略です。

Document: ブラウザそのもの
Object: 上記で説明したオブジェクト
Model: データや関数

DOMとは、ブラウザが持つオブジェクトのデータや関数という意味です。

下記コードを記述・実行しコンソール画面をみてください。

console.dir(document);

(結果)

「console.dir(document);」で、documentオブジェクトをコンソール画面に出力しています。このdocumentとは、Windowそのものが持っているオブジェクトで、URLや、文字コード、ページのタイトルや、ブラウザの位置など、ブラウザが保有している全ての情報にアクセスすることができます。

DOMを利用することで情報にアクセスするだけでなく、情報を書き換えWebサイトの見た目を動的に変更することもできます。
変更するためのサンプルも見てみましょう。

<h1 id="title">テストタイトル</h1>
<script>
  var title = document.getElementById('title');
  console.dir(title);
</script>

document(オブジェクト)の getElementById メソッドを使い、title オブジェクトを取得しています。
取得したオブジェクトを、title 変数に入れ、コンソールに出力しています。

(結果)

コンソール画面に出力された値を眺めてみると、「innerText」や「style > color」などを確認することができます。
この値(プロパティ)にアクセスするには、title.innerTextや、title.style.color などのように「.」どっとでつなぎ、アクセスすることができます。

そして各プロパティは参照するだけでなく、上書きすることもできます。

title.innerText = 'DOMから上書き';
title.style.color = 'red';

<h1 id="title">テストタイトル</h1>
<script>
  var title = document.getElementById('title');
  title.innerText = 'DOMから上書き';
  title.style.color = 'red';
</script>

このコードを実行すると、文字とカラーが変更されるのが分かるかと思います。

 

以上、JavaScriptのオブジェクトと、DOMについてでした。
なかなか文字だけですと伝わりにくいので、動画でも解説しました。合わせまして動画もよろしくお願いいたします。

 

 

関連タグ: 

無料のGoogle翻訳でWebサイトを多言語対応する方法

$
0
0

Webサイトは様々な方法で多言語対応することができますが、今回は「Google Website Translator Gadget」を使い自動でWebサイトを多言語化する方法をご紹介します。

試しに当ブログのグローバルナビゲーションに設置してみました。

Google Website Translator Gadgetの特徴

無料で利用できる
簡単に導入できる
英語、フランス語、イタリア語、ロシア語、中国語など多くの言語に対応

Google Website Translator Gadgetの欠点

機械翻訳なので翻訳の精度は低い。翻訳の精度にこだわる場合はCMSなどを多言語対応し文章を一つ一つ翻訳する必要があります。
画像に埋め込んだ文字は翻訳されない

 

導入方法

  1. Google Website Translator Gadgetにアクセスし「今すぐWebサイトに追加」をクリックします。

    Google Website Translator Gadget
     

  2. 必要情報を入力し「次へ」をクリックします。


     

  3. 「プラグインの設定」画面で必要情報を入力し「コードを取得」をクリックします。
  4. 生成されたコードを翻訳したいページに貼り付けてください。

 

以上で設定完了です。え?これだけ?と思った方も多いかと思います。
簡単にWebサイトを多言語化することができました。

 

関連タグ: 

マイクの性能比較Audio-Technica‎ AT2050とAT4040

$
0
0

CPIスタッフブログの動画撮影では、これまでサンワサプライのUSBマイクを使っておりました。
4年くらい前に購入した物で当時5,000円くらいだったかと思います。

今回動画撮影用にAudio-Technica‎のAT2050と、AT4040を購入いたしましたので、性能を比較してみました。

 

どうでしょうか、音が変わっているのが分かりましたでしょうか。
弊社の会議室が一気にスタジオぽくなりましたよね。今後CPIスタッフブログでは、この撮影機材を使い撮影をしていきます。

機材を新調したことにより複数人での撮影が可能になりました。
色々な方をお呼びして動画を作っていきたいと考えております、ぜひCPIスタッフブログの動画にご出演ください。お待ちしております。

 

おまけ

今回撮影した部屋はこんな感じの場所でしていました。

 

関連タグ: 

Twilio Studioを使ってIP電話の転送機能を実装しよう

$
0
0

Twilio は、2017年9月19日にノンプログラマーでも直感的に操作できるインターフェース「Twilio Studio」を発表しました。
Twilio Studioは10月23日現在クローズドベータ版ですので、どのようなことが出来るのか、本当にノンプログラミングでも構築できるのかについてお届けいたします。

今回はTwilio StudioでIP電話の転送機能を実装し、後半では音声認識を組み合わせた転送機能にも挑戦してみます。(動画の後半多少グダグダしてしまったのをお許しください)

Twilio Studioで実装する要件

  1. 電話がかかってくる(想定は東京オフィスなどの共通の番号)
  2. 誰も電話にでない場合
  3. ボタン1で営業、ボタン2を押下するとサポートに電話を転送する(想定はテレワークなどで自宅勤務の方に転送するなど)

 

Twilio Studioを使うことでノンプログラミングで簡単に電話機能が実装できますね。
Twilio担当曰く、早ければ2018年の1月ころにベータ版がリリースされるとのことなので、気になる方は是非お試しください。

 

関連タグ: 

CPI20周年サンクスキャラバン in東京 イベントレポ!

$
0
0

2017年12月22日(金)、CPI20周年を記念し開催した「CPI20周年サンクスキャラバンin東京」が無事終わりました!今回は、イベントの様子とCPIの裏側的なところを、いつもの阿部でなく、広報の伊勢がレポートしていきます。

 

CPI20周年サンクスキャラバンとは

CPIでは、これまで全国でのセミナー登壇やイベント出展などを通じてWeb制作に役立つ情報を発信してきました。今年サービス提供20周年を迎えるにあたり、CPIのお客さまはもちろん、CPIに関わってくださるみなさんへ感謝の気持ちを込めて、全国でイベントを開催する運びとなりました。

 

第1回目となる東京では、一線で活躍する全国のCPIエバンジェリストが一堂に会し、「Webのこれから」をテーマに各セッションをおこないました。さらに、特別ゲストとしてCSS Niteを運営する株式会社スイッチの鷹野さまや、株式会社ウェブライダーの松尾さまなども招いておこないました。

Webは変化の激しい業界です。これからどうビジネスが変わっていくのか、そのときに必要なことは何なのか、みなさんにとって「Webのこれから」を考える気づきになっていただけるようなイベントとして、開催させていただきました。

 

CPIが実践するサービスの取り組みと顧客価値体験

今回開催したのは大手町駅直結のグローバルビジネスハブ東京。入り口にあるジャングルジムのような鉄格子が印象的でした。

 

 

 

 

まずは共通講演として、KDDIウェブコミュニケーションズ クラウドホスティング事業本部 本部長の西村から、これまでのCPIの取り組みや今後の展望についてと、KDDIウェブコミュニケーションズ フィールドマーケティング部 CPIエバンジェリストの阿部から、CPIが実践する顧客価値体験を高めるマーケティング手法についてご紹介しました。

 

 

西村の話の中で、CPIに関するいくつかのデータを公開しました。

まず、法人利用が約9割を占め、7割近くのお客さまが「.jp」ドメインを利用していること。また、サーバーとあわせてメールアカウントを取得するお客さまが多く、従業員数20名以下の中小企業を中心に、大企業さままで幅広くご利用いただいているとのことでした。これは、20年間CPIが一貫してビジネスでも利用できるレンタルサーバーとしてサービスを提供してきた結果といえます。

 

さらに、お客さまのWebサイトで障害が発生した時に、人的対応に加え機械的に検知、障害の予兆・傾向を読むシステムを導入している点や、今後CPIが注力していくことについても紹介がありました。安定的にサーバーが稼働することが一番ですが、その裏側でどういったことを実践しているのかをお伝えしました。

 

 

続いて阿部のセッションでは、CPIがなぜお客さまに選ばれ続けるのかをご紹介しました。

通常の購買行動は、まずサービスを知り、評判・どんな商品かをリサーチし、購入に至ります。CPIの場合は、まずサービスを好きになってもらい、それから商品行動に結びつけるマーケティングを考えています。商品を購入したお客さんが口コミ的に情報共有したくなるような、コミュニケーションの輪を広げてもらえるような取り組みをしていると紹介しました。

今回のCPI20周年もそのひとつで、レンタルサーバーという側面だけではないお客さまとの関わり方を創造し、最終的にはみなさんのビジネスに貢献できるように、日々取り組んでいるとのこと。

 

共通セッションが終わった後は、全国のCPIエバンジェリストと、特別ゲストたちのセッションをおこないました。ここではセッションの様子を一部写真で紹介していくのみですが、登壇者のみなさまから多くのコメントをいただいたので、ぜひ下記URLからアクセスし、あわせてご覧いただければ幸いです。

■CPI20周年サンクスキャラバン 登壇者コメント

 

 

「これからのWeb制作 〜「変容するコンテンツ」をデザインする〜」

(左から)株式会社タガス 浅野桜さま crema design 黒野明子さま

 

「これからのコンテンツの作り方」

(左から)ニイハチヨンサン 大月茂樹さま 株式会社ウェブライダー 松尾茂起さま

 

「Webクリエイターのための情報交換所スペシャル」

(左から)KDDIウェブコミュニケーションズ 阿部正幸 株式会社イーネット・ワークス 前川昌幸さま よつばデザイン 後藤賢司さま

 

「3つのレイヤーで考えるクリエイティブにおける「文字」の扱い」

株式会社スイッチ 鷹野雅弘さま

 

「これからウェブを必要とする人へ届けるためにできること」

CalmTech代表 古川勝也さま

 

 

懇親会

セッション終了後には懇親会!ビュッフェ形式でどんどん出てくる料理をおいしくいただきました〜!

 

 

 

 

実は、イベント当日が誕生日の登壇者がいました。

CPI20周年と一緒に祝おう!ということで、サプライズで20周年の特大ケーキに続いて……

 

 

もうひとつ、株式会社ウェブライダー 代表の松尾さまに!

お誕生日おめでとうございます!

 

 

みなさん一斉にカメラを構えます!(私も負けじと笑!)

 

 

そして、イベントとあわせてTwitterでキャンペーンを走らせていました。
私が確認した限りだと、なんとTwitterトレンド8位に!みなさんのおかげです!ありがとうございました!
本部長 西村から抽選で当たった方に限定Tシャツをプレゼント。

 

 

そしてスペシャルプレゼントとして、Google Home mini 2台を贈呈!(深々と!)

 

 

当選した方を内心では羨ましく思いながら、ぜひ活用いただければ嬉しいなと思います!

最後にみなさんで集合写真!

 

 

懇親会のとなりでは、登壇者のノベルティブースなどを用意していたのですが、CPIエバンジェリストのCalmTech 代表の古川さんから青森のりんごを、なんとダンボール3箱分も(!)ご提供いただきました!葉取らずサンふじ、ジョナゴールド、ぐんま名月の3種類。どれも大きくて、見るからにおいしそうでした。りんごの季節ですよね、よだれが出ます。

 

 

CPIと20年

ところでCPIの由来、みなさんご存知でしょうか?実は社員でも知らない人がいると思います。少し前に、創業者である山瀬さんにインタビューする機会があり、由来を伺ったところ、”サイバープラットフォーム&インスティテュート”の頭文字を取って、”CPI”だと教えてもらいました。当時は「サイバービジネス」という言葉がよく使われていたそうで、その言葉を組み合わせてサービス名とし、社名も「株式会社CPI」として展開していました。

1997年に横浜でCPIが誕生し、その後神田、麹町を経て、現在外苑前にオフィスを構えています。CPIのメンバーだけで80名近くのスタッフが関わっており、KDDIウェブコミュニケーションズの主力事業として年々成長を続けられています。

 

また、みなさんにお持帰りいただいた20周年限定ノベルティの箱のデザインは、実はCPI創業時にはじめて利用した「Sun Enterprise 450」という富士通さんから発売されたサーバーを模したものでした。「え、サーバーのルックスってこんなオシャレなの?!」と思ってしまうあたりは職業病に近いかもしれませんが、ぜひサイトを覗いていただくと、そのままのデザインを活かしてアレンジしているのがわかります。

紹介ページでは”デスクサイド型ワークグループサーバ”と記載されていますが、今でいうサーバーラックということですね。だいぶ形が変わりました。磁気ディスクはいまSSDと表現しますし、メモリ容量や通信速度も桁違いに増強していて、20年の長さを感じます。

 

ドドンッ!(サーバーラックを意識して)

 

最後に、株式会社CPIだった頃の受付をちらっと。

 

 

CPI20周年サンクスキャラバンはまだまだ続きます!

次は福岡です。みなさんよろしくお願いします!

 

■CPI20周年特設ページ

https://www.cpi.ad.jp/20th/

 

CPI20周年サンクスキャラバン in福岡 イベントレポ!

$
0
0

CPI20周年サンクスキャラバン in 福岡

CPI20周年サンクスキャラバン、東京に続いて福岡で開催しました!(東京レポートの様子はこちら!)
福岡にいったらおいしいごはんを食べずして帰れない!と思ってしまうのは私だけでしょうか。梅が枝餅もおいしいし、福岡、大好きです。

CPIでは、これまでも福岡でCPI主催のセミナーを開催したり、important!をはじめとしたWeb系セミナーにCPIエバンジェリスト阿部が登壇させていただくことがあったりと、Webを中心にみなさんと交流し、CPIを知ってもらう活動をおこなってきました。

こうした動きもあり、福岡のCPIユーザーさんはWeb業界の方が圧倒的に多く、(逆にいうとWebに関わっていないとCPIを知られないということでもあります...がんばらねば!)今回「未来のWebがどうなっているのか?」をテーマに定め、各セッションをおこないました。

 

Webのこれからとは?CPIエバンジェリストによる各セッション

実はイベント数日前から福岡では急激な冷え込みと積雪があり、交通機関にも影響が出ていたので少し心配でした。が、そんな心配とはうらはらに、当日は晴天!予定どおりに開催場所であるヌーラボさんのオフィスへ到着できました。

こちらのビル全部がヌーラボさんのオフィス!

 

本日の会場となるヌーラボさん福岡本社です!

 

まずは全国共通セッションとして、KDDIウェブコミュニケーションズ クラウドホスティング事業本部 本部長 西村謙一と、

 

KDDIウェブコミュニケーションズ CPIエバンジェリスト阿部正幸から、CPIサーバーの取り組みと顧客体験価値についてご紹介(共通セッションは東京レポートで軽く触れたのでここでは割愛)。

 

続いてのセッションからは「Webのこれからとは?」をテーマに全国のCPIエバンジェリストのみなさんにお話いただきました。

福岡に拠点をもつ株式会社キャッチアップ 代表取締役の江頭さんからは、「CMSを活用した次世代ワークフローを考える」と題したお話。制作会社に求められる役割の変化から、複雑化するワークフローをいかに効率よく実行していくのかをお話いただきました。

 

続いて株式会社イーネット・ワークスの前川昌幸さんからは、「2017年の業界ニュースから見る2018年の展望」と題し、よつばデザインの後藤さんとCPIエバンジェリストの阿部も加わってセッションがおこなわれました。前川さんや後藤さんが管理するFacebookグループ「Webクリエイターのための情報交換所」に2017年投稿された210件を、4半期ごとに投稿数が多かったトピックを振り返ります。Webクリエイターのための情報交換所は、Web業界の動向や最新トピックの収集ができます。先日7,000フォロワーを突破したと思ったら、すでに7,800を超えていました(すごい!)。

 

前川さん

阿部(左)、後藤さん(右)

 

最後はヌーラボのbacklogチームソフトウエアエンジニアである藤田さんから、「コラボレーションワークのこれまでとこれから」についてご紹介。コラボレーションツールの変遷や、コラボレーションが持つ要素などに触れ、イノベーションが生まれてきた歴史的背景を踏まえ、イノベーションにコラボレーションは不可欠であるとお話いただきました。

 

懇親会&プレゼント大会!

セッション終了後は、7階に移動して懇親会!卓球台やドラム、カラフルな椅子、たくさんのおもちゃなど、随所に遊び要素が散りばめられたかわいい会場でした。

ごはんとともに乾杯です!

さて、今回のTwitterキャンペーンも担当者の独断と偏見で選ばれました。
その中に「スタッフさんが着てるTシャツほしいでござんす。」とつぶやいてくれた方がいて、せっかくなのでプレゼントしたい!とTシャツをプレゼント!きっと各地でもつぶやいたらもらえるのかも?

 

最後にみなさんとTHITAで撮影!

CPI20th記念イベント@福岡 - Spherical Image - RICOH THETA

最後までご参加いただきありがとうございました〜!

さて、続いてのキャラバン先は青森です!青森のみなさん、どうぞよろしくお願いいたします!

 

おまけ:CPIの都道府県別シェア、トップ5公開!

せっかく福岡をはじめ各地をめぐるので、CPIユーザーさまがどれくらいの割合なのか調べてみたところ、都道府県別シェアはなんと5位!

1位はもちろん東京です。では2−4位は?
これからキャラバンする他の地域も含まれているので、追って公開していこうと思います!( ´∀`)bグッ!

 

 

■CPI20周年サンクスキャラバン

https://www.cpi.ad.jp/20th/

CPI20周年サンクスキャラバン in青森 イベントレポ!

$
0
0

CPI20周年サンクスキャラバン in 青森

 

3回目となる「CPI20周年 サンクスキャラバン in青森」のレポートブログ、今回は伊勢に代わってマーケティング部の押野が担当します。

 

1月の青森なので予想はしていたものの、道路側面には除雪された雪が小高く積み上がり、イベント当日はチラチラと雪が舞うなかでの開催となりました。

会場となった「Gravity CO-WORK(グラビティコワーク)」は、NPO法人あおもりIT活用サポートセンターのみなさまが立ち上げたコワーキングスペースで、1月にプレオープンしたばかり。しかもイベント開催は今回のサンクスキャラバンが初とのこと!記念すべき1回目を飾らせていただきました。

これから貸し出しも本格化するようですので、ご興味ある方はぜひ!綺麗でオシャレなスペースです。

 

 

「Webのこれから」〜Web制作に必要な技術と考え方〜

はじめに、KDDIウェブコミュニケーションズ クラウドホスティング事業本部 本部長 西村よりCPIの取組みについて紹介。青森は初訪問となりましたが、「お客さまとの対話を大切にするのがCPIサーバー」であることを改めて強調し、今後も全国でユーザー会を実施していきたいと決意を新たにしていました。

CPIはユーザーさまとの対話から生まれる意見や要望を、サービス改善や品質向上につなげていく動きを大切にしています!
 

 

続いては、CPIエバンジェリスト阿部正幸から、CPIサーバーの取り組みと顧客体験価値についてご紹介。

今でこそ全国で沢山の講演をこなす阿部ですが、初めて登壇した地が青森だったというエピソードを披露し、深い縁を感じているとのことでした。

 

 

さて、青森は全国共通テーマであるWebのこれからにサブテーマ「〜Web制作に必要な技術と考え方〜」を加えて、登壇者の方から制作寄りの内容や実制作に役立つノウハウを中心にセッションを行っていただきました。

各地のセッションテーマを決める際は、その地域のユーザーさまの属性とCPIエバンジェリストや講演者さまへのヒアリングにより、各地のニーズにあった内容をお届けできるようにしています。青森は他地域と比べてもWeb制作に関わる業種が多かったため今回のセッション内容にしました。

 

まずは、株式会社イーネット・ワークスの前川昌幸さんからは「SmartReleaseでのWordPressの開発と運用」をテーマに実際のデモを交えながら紹介いただきました。CPIサーバーでもダントツの利用率を誇るCMS「Wordpress」と、CPIの「SmartRelease」を組み合わせると、いかに安心かつ簡単な運用フローが確立できるかを紹介いただきました。

SmartReleaseのプロジェクトマネージャーである阿部も「自分以外の人がこんなにSmartReleaseの事を語ってくれるのは初めて聞いた」と語っていました。

 

 

続いては、青森を拠点に活躍されているCPIエバンジェリストの古川さんによる講演「CMS選定時に考えておきたい運用ディレクション」。制作案件は一度作って終わりではないため、初期段階から運用面や体制までしっかりつぶしていく事の重要性を、実際の事例をもとに古川さんならではの視点で鋭く切り込んで共有いただきました。

 

なお、CPIエバンジェリストになったキッカケは、青森でのイベント時に阿部さんを前にSmartReleaseの良さを熱く語ったことだそうです。

 

 

最後は、同じく青森を拠点に活躍されているディーシーティーデザインの蝦名さんより、CMS導入前にしっかりやっておきたい「情報整理」について講演。制作フローにおける企画部分にフォーカスをあて、どのようなポイントに気をつけて進めていけばクライアントも制作側も幸せになれるかを紹介いただきました。

 

 

古川さん、蝦名さん両名とも仕事の進め方のおける観点が鋭く、かつクライアントのためにここまで考えて進めてるのかと感銘を受けると同時に発注側として私自身いつも深く考えず依頼してしまっていることを猛省いたしました......。

 

懇親会&プレゼント大会!

 

セッション終了後は会場レイアウトを変更し、恒例の懇親会+大抽選会がスタート!
今回もTwitter投稿キャンペーンは私の独断で選出させていただきました。

そして今回なにより嬉しかったこと、それは事前申込いただいた全員が、当日会場に足を運んでいただいたこと。参加率100%!事前申込なしで参加いただいた方も1名いらっしゃるので、なんなら参加率105%!!!

懇親会でも、参加いただいた皆さまが積極的に情報交換やコミュニケーションを取ろうとする姿が至るところにあり、講師の方も交え熱心に話を聞く様子やイベントの参加率に、Web制作会社としての熱意垣間見ました。青森を中心に、これから更に東北を盛り上げていきたいと感じました。

またお会いしましょう!

 

 

全6回のうち、青森で折り返し地点を迎えました。残すところあと3回です。続いてのキャラバンは2月10日の岡山です。青森同様に考え抜いたセッション内容を用意していますので岡山の皆さま、どうぞ宜しくお願いいたします!

 

おまけ

青森市のコワーキングスペース「Gravity CO-WORK」:http://gravity-co-work.jp/

すぐ近くには「のっけ丼」で有名な青森魚菜センターがあります。丼を片手に、お好みの海鮮具材などをどんどんのせて自分だけのオリジナル丼を作る夢のようなスタイル。イベント前にはスタッフ、登壇者や運営の皆さまと一緒に堪能しました。

丼の構成の仕方に個性が出ますね。

 

 

Viewing all 131 articles
Browse latest View live