concrete5 検索ブロックを複合検索にしてセレクトメニューをラジオボタンに変える方法

このブログは、concrete5 アドベントカレンダー 2016  に参加しています。前日の、take556さんのconcrete5 2016の総括 でした。

※2016-12-5追記
⑤複合検索にするために検索ブロックのカスタムテンプレートを作成 の コードを5.7推奨用に書き直しました。

このブログはconcrete5 バージョン5.7.9をベースに書いています。

concrete5 の検索ブロックをカスタムテンプレートという機能を使ってカスタマイズすると、ページ属性やブロックを使った複合検索が可能になります。また、ページ属性の選択を設定すると通常はセレクトメニューになりますが、それをラジオボタンに変更してみたいと思います。他のブログでも紹介されているのですが、ワークショップ形式で一から作っていきたいと思います。

・サイトの説明

このような、食事の種類と場所を検索できるようなサイトを作ります。

sitemap

①concrete5のインストール

今回は空白のサイトでインストールします。

インストールに関してはconcrete5公式サイト等をご覧ください。

http://concrete5-japan.org/help/5-7/installation/

②ページタイプを作成する。

[管理画面(上部メニュー一番右のボタン)→ページとテーマ→ページタイプ]

[ページタイプの追加]をクリックし、下記の通り入力して、[新規]ボタンを押します。

page_type

③ページ属性を作成する

[管理画面→ページとテーマ→ページ属性]

最下部「属性を追加」のプルダウンメニューで「選択」を選択し[実行]ボタンを押します

%e3%83%9a%e3%83%bc%e3%82%b8%e5%b1%9e%e6%80%a7%ef%bc%88%e5%a0%b4%e6%89%80%ef%bc%89

④ページを作成する

今回作成するのは、下の6ページです。

ページタイトル 食事のジャンル(ページ属性) 地域(ページ属性)
ハンバーグ 洋食 東京
パスタ 洋食 大阪
ラーメン 中華 東京
餃子 中華 広島
寿司 和食 大阪
天ぷら 和食 広島

1.上部メニューの[新規作成]ボタンを押し[食事詳細]をクリック

%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e4%bd%9c%e6%88%901

2.上部[ページ設定]ボタン(歯車のマーク)→[属性]をクリック

3.左側のメニューから、「食事のジャンル」と「地域」をクリック

4.下の画像のように入力し、[変更を保存]ボタンを押します。

5.[編集モード終了]ボタン(鉛筆マーク)を押し[変更の公開]ボタンを押す。

続いて1にもどり.2つ目のページ以降を作成します。画像のようにパスタ・洋食・大阪と入力されている項目を上記の表を参照し置き換えて6ページ作成してください。

%e3%83%9a%e3%83%bc%e3%82%b8%e4%bd%9c%e6%88%90

⑤複合検索にするために検索ブロックのカスタムテンプレートを作成

標準の検索ブロックでは、キーワード検索のみが有効になっていますが、下記のコードのようにページ属性を追加することで、そのページ属性が設定されているページの検索も可能になります。

・concrete/blocks/search/view.php  ->

application/blocks/search/templates/meal_search.php コピーし下記のコードを挿入してください。

※上記は変更部分のみです。ファイルの全体のコードが必要な場合は下記よりダウンロードしてください

⑥トップページに検索ブロックを設置して、カスタムテンプレートを適用

1.[管理画面→サイトマップ]よりトップページに移動します。

2.[編集モード]ボタンを押してください。

3.メインエリア上で、左クリックし、出てきたエリアメニューのブロックを追加をクリックします。

4.左のブロックタイプメニューから、[検索]を選択します。

5.ブロック編集画面になりますので、タイトル欄にに”グルメ”・ボタンテキスト欄に”検索”・「ここ以下のページ」を選択して[新規]ボタンを押してください。これで、検索ブロックの設置が完了です。この時点では、キーワードのみの検索項目になります。

5.次に先ほど作成したカスタムテンプレートを適用します。設置した検索ブロックの上で左クリックし、ブロックメニューから、[デザイン&カスタムテンプレート]を選択し、出てきたメニューの歯車のマークを押し、下の画像のようにMeal Search を選択し、[保存]をクリックします。

%e6%a4%9c%e7%b4%a2%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88

6.[編集モード終了]ボタンを押し、検索をしてみてください。この時点では、各項目がセレクトメニューで表示されます。

⑦セレクトメニューをラジオボタンに変更

concrete/attributes/select/search.php -> application/attributes/select/search.php へコピー

application/attributes/select/search.phpの11行目から16行目を下記のコードに変更します。

※上記は変更部分のみです。ファイルの全体のコードが必要な場合は下記よりダウンロードしてください

⑧実際にボタンを選択して、検索をしてみてください。

%e3%83%a9%e3%82%b8%e3%82%aa%e3%83%9c%e3%82%bf%e3%83%b3

 

以上です。concrete5の検索ブロックは4行程度のphpのコードを足せば簡単に複合検索が実現できます。また、ここでは紹介してないですが、ページ属性のIDを使用して特定のページ属性だけをラジオボタンにすることも可能です。ぜひ、参考にしていただきポータルサイトなどに役立てていただければと思います。ここ分かりにくい、ここ間違っているよなどのご意見もいただけたらと思います。

このブログは、concrete5 アドベントカレンダー 2016  に参加しています。翌日は、tao-sさんの Ver.8 から使えるExpressオブジェクトとは? です

concrete5 version5.7 . It is caution when create the theme.

Block color sentence is English.gray color sentence is japanese.

create the theme  from the static site  is about 10 lines add to template file.

concrete5の静的サイトからのテーマ作成は、テンプレートファイルに10行くらいコードを足せば作れるのですが

but it is caution when read of external css files

外部cssファイルの読込に関しては注意が必要です。

When Read to external css files of template file is change as in the under.

concrete5 5.7系で静的サイトからテーマを作るときに、テンプレートファイルの外部CSSファイルの読込みは下記のように変更します。

static site

静的サイト

concrete5

add to  <?php echo $view->getThemePath()?>/

It is No change to external css files read override and change themes directory name

これで、オーバーライドしたり、テーマのフォルダ名を変更しても、変更なくCSSを読み込むことが出来ます。

However,There is it only affects the css of concrete5’s default dashboard and menu of screen left side . Severe cases can not edit mode.

しかし、それだけでは、conrete5の元々用意されている画面左側のメニューのブロックの追加画面や、ページ設定の画面のCSSとかぶってしまって、管理用の画面の表示が崩れてしまうことがあります。ひどいときには、編集が出来なくなることもあります。

It write under body tag  In order to prevent this

これを防ぐためにconcrete5 5.7系では、body タグ直下に

というコードを書きます。

It explain of this code. The code was change to below class.

まずは、このコードの解説をします。このコードは最終的には下記のクラスが吐き出されます。

before after, “page-template-home” is current page template handle name.

example use template name is if is “blog” well be “page-template-blog”.

前後しますが、classの後ろの部分 page-template-home は 現在使用しているページテンプレートハンドル名です。たとえば、blogというページテンプレートを使っていれば、page-template-blog となります。

So, main theme is “ccm-page”.

では、本題のccm-pageです。

It is meaning CSS of the inner webpage when it create the theme.

Please take unpleasant ifccm-page” is to wear the dashboard of CSS.

実はこれ、テーマを作るときにページ内のCSSですよというのを明確化するためにあります。つまり、管理画面のcssとかぶるのが嫌ならcssにccm-pageクラスをつけてください。という意味になりますw

But CSS is big size. No be doing!!

ただ、「膨大なCSSにすべてにccm-page付けろっていうんかい!!」となりますよねw

If it know SCSS and LESS ,  It is understand to compale after nest.It also describes how you can easily by those who can not provide a compiler.

SassやLESSをご存知の方であれば、ネストしてコンパイルすればいいとわかると思いますが、コンパイル環境を作れる方ばかりではないと思いますので、比較的簡単な方法を説明したいと思います。下記の方法で、管理画面のcssとかぶらないテーマが作成できます。

Figure 1 Before file organization

図1.現在のファイル構成

Figure 2 After File organization

図2.書き換えた後のファイル構成

Working process

作業手順

1.main.css of figure 1 is change name to “stryle.less” and move “build directory”.

①.図1のmain.css を style.less にリネームして、buildディレクトリに移動します。

2. There create file  “css/main.less” and write following code.

②.図2のcss/main.lessは新しく作成し、そのファイルに下記のコードを記述ください。

css/main.less

The content of css file has been nested  “ccm-page” when class The code writed.

この記述をすることで、従来のcssファイルの中身がccm-pageクラスでネストされます。

3.edit theme files.

③.テーマ側のファイルを修正します。

The above part is edit to following code.

上記部分を下記のとおり修正します。

css/main.less is read to automataly.

この記述で、自動的にcss/main.lessを読み込まれます。

main.less even without preparing the compiler of LESS on yourself, compile by concrete5.page view speed slow a little. But will be speed up when use the cache.

main.lessは自分でlessのコンパイラを用意しなくても、concrete5側でコンパイルしてくれます。lessのコンパイルを表示前にやるのでページの表示が遅くなることも考えられますが、キャッシュをうまく利用することで軽減可能です。

Add CSS is edit style.less. LESS is use grammer of CSS.

また、cssを追加したい場合はstyle.lessに追加してください。lessファイルは従来のcssの書き方が出来ますので、lessよく分からないという方も、抵抗なく記述できます。

The CSS  nested by “ccm-page” is created. showed dashboard menu  is  no problem .

以上で、クラス名”ccm-page”でネストされたCSSが作成され、メニューも問題なく表示されます。

concrete5 5.7系の静的サイトからテーマ化のCSSの注意点

concrete5の静的サイトからのテーマ作成は、テンプレートファイルに10行くらいコードを足せば作れるのですが、外部cssファイルの読込に関しては注意が必要です。

concrete5 5.7系で静的サイトからテーマを作るときに、テンプレートファイルの外部CSSファイルの読込みは下記のように変更します。

静的サイト

concrete5

上記のように
<?php echo $view->getThemePath()?>/
を追加します。これで、オーバーライドしたり、テーマのフォルダ名を変更しても、変更なくCSSを読み込むことが出来ます。

しかし、それだけでは、conrete5の元々用意されている画面左側のメニューのブロックの追加画面や、ページ設定の画面のCSSとかぶってしまって、管理用の画面の表示が崩れてしまうことがあります。ひどいときには、編集が出来なくなることもあります。

これを防ぐためにconcrete5 5.7系では、body タグ直下に

というコードを書きます。

まずは、このコードの解説をします。このコードは最終的には下記のクラスが吐き出されます。

前後しますが、classの後ろの部分 page-template-home は 現在使用しているページテンプレートハンドル名です。たとえば、blogというページテンプレートを使っていれば、page-template-blog となります。

では、本題のccm-pageです。

実はこれ、テーマを作るときにページ内のCSSですよというのを明確化するためにあります。つまり、管理画面のcssとかぶるのが嫌ならcssにccm-pageクラスをつけてください。という意味になりますw

ただ、「膨大なCSSにすべてにccm-page付けろっていうんかい!!」となりますよねw

SassやLESSをご存知の方であれば、ネストしてコンパイルすればいいとわかると思いますが、コンパイル環境を作れる方ばかりではないと思いますので、比較的簡単な方法を説明したいと思います。下記の方法で、管理画面のcssとかぶらないテーマが作成できます。

図1.現在のファイル構成

図2.書き換えた後のファイル構成

作業手順

①.図1のmain.css を style.less にリネームして、buildディレクトリに移動します。

②.図2のcss/main.lessは新しく作成し、そのファイルに下記のコードを記述ください。

css/main.less

この記述をすることで、従来のcssファイルの中身がccm-pageクラスでネストされます。

③.テーマ側のファイルを修正します。

上記部分を下記のとおり修正します。

この記述で、自動的にcss/main.lessを読み込まれます。

main.lessは自分でlessのコンパイラを用意しなくても、concrete5側でコンパイルしてくれます。lessのコンパイルを表示前にやるのでページの表示が遅くなることも考えられますが、キャッシュをうまく利用することで軽減可能です。

また、cssを追加したい場合はstyle.lessに追加してください。lessファイルは従来のcssの書き方が出来ますので、lessよく分からないという方も、抵抗なく記述できます。

以上で、クラス名”ccm-page”でネストされたCSSが作成され、メニューも問題なく表示されます。

concrete5 5.7.5 から $a->display($c) の $cが要らなくなったこと

concrete5 5.7.5 より 「通常のエリア」のdisplayメソッドで必要だった $c が必要無くなりました。

バージョン 5.7.5 以前のソースコード(5.7.5以降でも有効)

バージョン 5.7.5 以降のソースコード

$cとは、concrete5のページオブジェクトが入っており、concrete5標準のままだと、現在のページのオブジェクトになっています。また、以前から「グローバルエリア」の時は$cは不要でした。どうやら、グローバルエリアと通常のエリアで、書き方が違うことが問題とされ、ほとんどの場合、テーマを作成するときにdisplayメソッドには、決まり事のように$cをつけていたので、省きましょうということになったのではないかと思います。

余談ですが、テーマやブロックタイプを作るときに$cに値を代入すると、エラーになることがあるのでご注意ください。

さて、話を戻して、以前の$cをつけた書き方は5.7.5以降のバージョンでも有効です。

どのようなソースになっているか確認します。

https://github.com/concrete5/concrete5/blob/release/5.7.5.1/web/concrete/src/Area/Area.php#L829

1行目で引数がなければ、基準値として$cにfalseを設定しています。

3行目のif文で$cがfalseであれば、「現在のページオブジェクトを取得する」というコードになっています。

これによって、テーマファイルで$cを省いても、問題なく稼働するようになっています。

それでは、これからかかれなくなっていくだろう $c がなぜ必要か解説したいと思います。

Areaクラス(通常のエリア)は、独立した一つのクラスです。そのエリアはページが密着していまして、下記のソースの場合だと

$c は 現在のページ ですので、「現在のページのMainエリアを表示する」といういう意味になります。

例えば、下記のように書くと

「トップページのメインエリアを表示する」ということになります。

displayメソッドはどのページのエリアを表示しますか?というメソッドです。

ですので、ほとんどの場合は、現在のページのエリアを現在のページに表示したい(ややこしいw)ので、$cをつけることが、ほぼ決まり事になったというわけです。

最後に、あくまでも現状では$cはなくてもいいよという感覚で考え、当面は明示したほうがいいです。$cをつけることが間違いではないですし、5.7.5以前のバージョンも存在するでしょうし。。。

数日前に$cが必要なくなったことを知ったので、備忘録として書きました。間違っていたら、こっそり教えてください。

elementalのpage_theme.php

この記事はconcrete5 Japanアドベントカレンダー2015 に参加しています。

前日のmiz563さんのconcrete5と過ごした一年間。より引き継いで書きます。

concrete5 5.7系からテーマファイルに設定用に追加されたpage_theme.phpについて書きたいと思います。
デフォルトのテーマ「Elemental」のpage_theme.phpを解説します。ファイルの場所は
「concrete/themes/elemental/page_theme.php」です。
この記事はバージョン5.7.5.3を基に作成しています。

page_theme.phpとは?

・テーマを補足して、よりGUIでの編集をしやすくするためのものです。(具体的な内容は後ほど説明します)
・このファイルはなくてもテーマとして機能します
・インストール時のみ適用となるので、あとからこのファイルを作成した場合はテーマをインストールしなおさないといけない。(バージョン5.7.5.3現在)

各メソッドの概略
registerAssets()
concrete5で最初から用意されているcssやjavascriptを使用するかしないか
$pThemeGridFrameworkHandle
レイアウト機能を使う場合にどのCSSフレームワークを使うか
getThemeName()
テーマの名前
getThemeDescription()
テーマの概要
getThemeBlockClasses()
ブロックのカスタムクラスを設定
getThemeAreaClasses()
エリアのカスタムクラスを設定
getThemeDefaultBlockTemplates()
ブロックを設置した時に使用するカスタムテンプレートを設定
getThemeResponsiveImageMap()
レスポンシブ画像を切り替えるウィンドウ幅を設定
getThemeEditorClasses()
記事ブロックのカスタムクラスで使用できるクラスを設定
getThemeAreaLayoutPresets()
レイアウトを使用するときにカラムの割合を設定

具体的にメソッドの説明をしていきたいと思います。

registerAssets()

・concrete5で最初から用意されているcssやjavascriptを読み込むか設定する
$this->providesAsset() —- 通常使われるcssやjavascriptを使用しない
$this->requireAsset() —- concrete5のコアで用意されているcssやjavascriptを使用する

下記のコードの場合
5行目

concrete5のデフォルトの設定ではフォームブロックを設置した場合に通常読み込まれるview.cssを読み込まないように設定しています。

17行目

コアで用意されているfont-awesome.cssを読み込みしています。

18行目

コアで用意されているjqueryを読み込んでいます。テーマのdefault.phpなどテンプレートファイルで読み込むことも可能ですが、concrete5で用意されているものはconcrete5本体と親和性が高いので、jqueryを使う場合はここに設定したほうが無難です。
これ以外にもコアで用意されているものが多数あるのでconcrete/config/app.phpのassets配列を参照してください。
https://github.com/concrete5/concrete5/blob/release/5.7.5.3/web/concrete/config/app.php#L495

$pThemeGridFrameworkHandle

レイアウト機能を使うときのグリッドシステムをどのCSSフレームワークにするか設定します。
テーマで使うcssフレームワークに合わせておく必要があります。
bootstrap3以外にも「bootstrap2」「foundation」「960 Grid System」が用意されています。
https://github.com/concrete5/concrete5/tree/release/5.7.5.3/web/concrete/src/Page/Theme/GridFramework/Type

getThemename()

インストール時に使用されるテーマ名を指定します。新しくテーマを作るときはElementalと書かれている箇所を変更してください。
以前はdescription.txtの1行目に書かれていた内容です。現在でもdescription.txtがあれば、このメソッドは必要ありません。

getThemeDescription()

インストール時に使用されるテーマの概要を指定します。新しくテーマを作るときはElegant,spacious …. を変更してください。
以前はdescription.txtの2行目に書かれていた内容です。現在でもdescription.txtがあれば、このメソッドは必要ありません。

getThemeBlockClasses()

ブロックのカスタムクラス名をリストに追加します。カスタムクラスは入力もできますが、最初から設定しておくとわざわざ編集者が入力する必要がなく便利です。

2015-12-12custom_class

図はページリストブロックタイプのカスタムクラス

getThemeAreaClasses()

ここではエリアのカスタムクラス名をリストに追加します。カスタムクラスは入力もできますが、最初から設定しておくとわざわざ編集者が入力する必要がなく便利です。

2015-12-12custom_area_class

getthemeDefaultBlockTemplates()

ブロックタイプのデフォルトのテンプレートを指定します。ブロックを設置した時に自動的に設定されます。
編集者がカスタムテンプレートを設定する手間が省けます。

getthemeResponsiveImageMap()

[ 管理画面→システムと設定→ファイル→サムネイル]で設定した内容とセットでレスポンシブ画像を実装するようです。僕は詳しくないのでこちらにて確認ください。

 

getThemeEditorClasses()

記事ブロック用に設定することができます。記事ブロックの編集画面のカスタムスタイルで表示されます。

2015-12-12editor_class

getThemeAreaLayoutPresets()

concrete5でレイアウト機能を使ってレイアウトを作成するときに、例えば2カラムのレイアウトを作成した場合に横幅は均等に割り付けされますが、ここで指定しておけば、好みのサイズのレイアウトができます。上記設定項目はレイアウト機能を使用するときに[グリッドリストのプリセット]に表示されます。

2015-12-12layout

このように、コンテンツ編集をしやすくるためにpage_theme.phpはあります。特に設定しなくても、問題なくテーマは作成できますが、jqueryを使う場合はdefualt.phpなどに書いてもいいですが2重読み込みになる可能性があるで、こちら「registerAssets()」で指定するほうが無難です。

また、毎回ブロックのカスタムテンプレートを指定することなく使えることや、編集者が手入力することによる書き間違いなどを防げるので、非常に便利です。ぜひ活用してみてください。

次回のconcrete5 Japanアドベントカレンダー2015はjunirock78さんの「concrete5で会社を辞めました。」です。

第8回concrete5奈良オフ会 開催しました。

2015年11月15日 第8回奈良オフ会を開催しました。

大和西大寺にある boki cafeさんにて

今回の、インフラエンジニア・システム開発・WEB系・IT系でない人とバラエティに富んだ参加者でした。

今回のテーマ

前半戦は「テーマ・ページテンプレート・ページタイプ・ページ属性」のそれぞれの役割について

いろんな考え方があるとは思いますが、僕なりの解釈で話させてもらいました。

今回使用したスライドです。

https://docs.google.com/presentation/d/1thAAfvuoreRrFVWfxGJ6lhatqUAx1x_RXhE1bj67q5o/edit?usp=sharing

 

後半戦は質問コーナー

・チームでconcrete5で作るサイトをgitを使って管理する方法は
・ブロックのデフォルトのテンプレートのデザインの確認方法は?
・ページタイプのフォームの出力は何をするためのもの?
・サイトマップ自体を並び替えする方法はないか?
・ユーザー領域・パッケージ領域・コア領域の意味
・タグクラウドを実装することはできるか?

 

・concrete5で作るサイトをgitを使って管理する方法は

やったことないので、感覚でしかお答えできませんでしたが、ソースコードのみgitで管理しているのではないかと思います。実際のページデータなどはデータベースで管理しているので、そちらをローカルで管理するのは難しいかなと考えました。実際に経験のある方に今後お答えいただければと思います。

・ブロックのデフォルトのテンプレートのデザインの確認方法は?

ブロックのデフォルトのテンプレートは、cssは書かれていないので、どのように表示されるかはテーマ次第ということになります。ですので、実際に表示してみる方法が一番いいと思います。

・サイトマップ自体を並び替えする方法はないか?

サイトマップで表示される順番を公開日順などに並び替えする方法はないかという趣旨の質問でした。僕自体やったことがないのですが、標準機能ではできないはず。concrete5全体的に以前から、並び方より必要なものは検索で見つけるという基本概念があるようなので、必要なページは「管理画面→サイトマップ→ページ検索」より見つける方法を常に使用しています。

・ユーザー領域・パッケージ領域・コア領域の意味

この設計を知ることはconcrete5を加工する上での第一歩の部分です。

コア領域・・・・絶対に改変してはいけない領域、concrete5をバージョンアップするたびに、修正点が消える。(concreteディレクトリ)

ユーザー領域・・・通常、ソースファイルを加工するときにはここにコア領域と同じ階層、同じファイルを設置して加工します。(5.6系ではルートディレクトリのconcrete以外のディレクトリ、5.7系ではapplicationディレクトリ)

パッケージ領域

ユーザー領域で加工したものをひとまとめにしたものを設置する場所です。加工したものを他のサイトでも使用したいときはパッケージ領域で作成するのがいいと思います。(packagesディレクトリ)

同じファイルがあった場合読み込まれる順番は

ユーザー領域>パッケージ領域>コア領域

ですので、ユーザー領域に作成したファイルが一番優先されます。

・タグクラウドを実装することはできるか?

この話その場所でお答えできなかったのですが、検索ブロックのカスタムテンプレートでタグクラウドを使うとページ属性「タグ」を使ったタグクラウドの実装が可能でした。

 

総括

テーマは、concrete5を初めて触れる方にとっては、よく分からない内容になったかと思います。これからも参加者の方々の知りたいことを勉強会でやっていこうと思います。

参加者6名中初めて参加される方が4名。職種もバラバラなので、いろんな情報交換ができました。僕自身がWEB業ではないので、本当に助かりました。

次回はブロックタイプの作り方もやりたいと思います。

boki cafe さんは 簿記教室を主体されていて、空いた時間帯をコワーキングや貸し会議室として運営されるそうです。また利用させてもらいたいと思います。

参加していただいた方々ありがとうございました。

CoderDojo奈良に参加してきました

CoderDojo奈良にメンター参加してきました。

日時 2014年12月21日 13:00~15:00

場所  Women’s Future Center さん

CoderDojoとは、大人が子供に無料でプログラミングを教えるというものです。子供を「忍者」大人を「メンター」と呼んでいます。

CoderDojoの説明、詳しくは↓

http://coderdojo.jp/

主催者の若林さん、栗本さん、また参加されたメンターの方、忍者の方、お疲れさまでしたー。

僕は今回初めて参加させていただきました。

今回僕はscratchというソフトを使っている子供に教える機会をもらいました。

そのソフトの仕様は、画面真ん中に人間がいて、周りに服や装飾品が置いてあり、服をクリックすると人間に着せることができるソフトでした。

今回の課題

・服を着せるとき人間の後ろに隠れてしまい服を着せたことにならないことがある。

・服の位置がずれていて着てないものがある。

・クリックで着せることはできるが、脱がすことができない。

解決策

服を着せるとき人間の後ろに隠れてしまい服を着せたことにならないことがある。

これは人間もスプライトとして扱っているため、レイヤーのプライオリティが低いとこの現象が起こるようで、服を着せる(クリック)するときに 「見た目」項目の「前に出す」コマンドを使うことで、解消できました。

服の位置がずれているものがある。

これはクリックしたときに座標を変更しているのですが、その位置がずれているためうまく服を着たことにならない現象でした。これは、編集画面で服や装飾品のスプライトを着たようになる座標にもっていくと、位置が表示されるのでそれを、「動き」項目の「X座標を○、Y座標を○にする」コマンドにその座標を入力することで解決しました。

20141221座標

クリックで着せることはできるが、脱がすことができない。

これはプログラムがクリックしたときは服を着せるという「人間の座標に合わせる」という片方のみ書かれている状態でしたので、着ているときは脱がすプログラムを追加しました。プログラム方法としては人間に触れているときにクリックされたら脱がす(座標を人間から離す)、触れていないときであれば着せる(座標を人間に合わせる)という形にしました。

20141221マフラー

というわけで、最終的にはこのような形になりました。

20141221完成

プログラム的にいうと、

人間に触れていれば、座標を人間から離す。

人間に触れていなければ、座標を人間の上に持っていき前へ表示する。

分岐を使っています。分岐のあたり伝わっているといいなぁ

まとめ

scratchは簡単なゆえに操作方法もある程度限定されているところがありどのように表現するかというのは結構 力技になりそうな感じもありました。僕が知らないだけかも。。。

今回の子供さんはやりたいことを明確で、親御さんもフォローされていて、問題点がわかりやすく、非常に助かりました。

 僕がわからない所は他のメンターの方に聞いて解決して、いい雰囲気の中できました。最初は緊張されていた子供さんも次第に笑顔が増え、できることに対して満足されているように感じました。この活動を通して達成感や満足感、またうまくいかなかったときにどのように対処するかなど、どのようにすればうまく伝えられるかを勉強したいと思います。

もし、「メンター」「忍者」どちらかに興味がある方は下記に登録されると次回の開催情報を見れます。

http://coderdojo-nara.doorkeeper.jp/

今日一緒にしてくれた忍者さん、うまく伝えられないこともあったと思います。ほんとにごめんね。

一日、ありがとうございました。

発達障害を持つ子供たちにパソコン教えてきました。

2014/12/13(土) 障害を持つ子供たちにパソコンを教えてきました。このプロジェクトは非営利型一般社団法人無限のプロジェクトのひとつで障害を持つ子達がコンピューターを使っていろんなことを学んでいくのが趣旨でまず第一段階として簡単なプログラミングができるようになることを目的として開催しました。

子供たちは2人(といっても1人はうちの子)午前中 約1時間30分くらいの開催でした。

今回の勉強内容

・軽量Linux を 古いパソコンにインストールしよう
・自分たちのホームページを作ろう

軽量Linux を 古いパソコンにインストールしよう

これは最初にどうしてもやりたかったんです。なぜかというと、僕がパソコンを触り始めたころ触っては壊し触っては壊しの連続だったのです。そのたびにOSを入れなおして、環境を作り直していましたが、現在は仮想環境があり、無料で手に入るLinuxで試してもらいたかったからです。

まずは、Linuxの説明
大きく2つの種類があります。RedHat系とDebian系
RedHat系がサーバー用途、Debian系がデスクトップ用途に使われることが多いです。
各系列の代表的なものはRedHat系「CentOS」、Debian系「ubuntu」といった感じです。
また、このようなCentOS や ubuntuのことをLinuxディストリビューションといい、本来のLinuxという言葉はLinuxカーネルのことで、インストールして現在簡単に使えるようにしてあるものはすべてLinuxディストリビューションと呼びます。

できればいくつかのディストリビューションの中から選んでインストールしてみたかったのですが、そこまで時間がなかったので、Linuxは使えるOSですよいうのがわかってもらうだけとなりました。結構話を脱線させたためかなり時間がかかってしまいました。ごめんなさい。。

自分たちのホームページを作ろう

自分たちの活動の記録としてhtmlとCSSを一から書いてサイトをつくる勉強をしました。

トップページと活動概要とブログのページをつくり、毎回活動のたびにブログを更新していきたいと思っています。デザインせず、とりあえず必要項目の羅列にして、デザインはせずつくり公開。そこから徐々にデザインを変更したくなったら、それに関係のあるhtmlタグやCSSを勉強して変えていこうという趣旨にしました。こちらは概要を説明した後、宿題としてこちらが用意したデータを打ち込んでもらうということにしました。

まとめ

Linuxは無料で使えるものが多く、僕自身もweb関係の開発環境はLinuxでやっています。これからもweb関係の勉強をしていきたいと思いますのでLinuxは教えていこうと思います。

ホームページに関してもまずは必須項目などの基礎の形を覚えてもらいたいと思います。

はじめての勉強会ということで、子供の実力を確認しながらの内容で手探りの状態でした。うまく説明できなかったところがあったと思うけどごめんね。

子供たちはきっかけがあり興味を持てば、自分たちで勉強し技術レベルは上達するのも早いと思いますので、まずはプログラミングとはどんなものなのかというのを学んでもらいたいです。また、障害を持つ子は身体的、知的、精神的に苦戦をしていることがあり、そのあたりの配慮もしていきたいと思います。

障害の有無に関係なく、自分の特長を生かし好きなことに没頭する姿は忘れていたものを思い出させてもらえ刺激となります。簡単に抜かれないように勉強していきたいと思います。

第3回concrete5奈良オフ会 開催しました。

2014年11月30日 第3回concrete5奈良オフ会を開催しました。

場所は women’s future center さん JR奈良駅徒歩3分くらいです。

wifi、プロジェクタも完備され20人は座ってパソコンが使えるスペースが用意されているいい雰囲気でした。また、子供の遊び場スペースもあり、子連れでも参加できるように配慮されています。

http://wfc-wa.com/about/shisetusyokai

初めて参加していただいたり、浜松から参加してもらったりでにぎやかな会になりました。
参加していただいた方々ありがとうございました。

勉強会風景

10834166_797719126986010_1275966126_n

concrete5の概略を説明しなかったのでここに書きます。

concrete5はテーマと言われる外枠を使い、テーマによってつくられたエリアという枠に中にブロックを張りつけてサイトを作っていくものでWordPressよりはJimdoに近い感じです。またフレームワークになっていますので、がっつりプログラムを組んでwebアプリを作ることもできます。

使ったスライドがこれです。

https://docs.google.com/presentation/d/1e9nGSoCnIC28GacGnrnwUIFZJ5WibyXDbjwN4icVuZM/edit?usp=sharing

・5.6からの変更点

今回はまだ使われていないという方が多かったので、この項目は飛ばしました。

・ブロックタイプの使い方

「記事」「オートナビ」「ページリスト」「フォーム」「画像」「画像スライダー」の各ブロックタイプの説明を行いました。そのほかにも5.7系で新しくブロックタイプが追加されているので、いろいろ試してもらいたいと思います。

・テーマの作り方

簡単なテーマの作り方です。html・cssができている3カラムのものをconcete5のテーマ化する方法を説明しました。時間配分が悪く、流して説明したのでご理解いただいたかどうか。。。(申し訳ありません)
オフ会当日は説明しなかったのですがバージョン 5.7系でインストール時に使われているElementalというテーマがかなり高性能なのでこちらを加工するのが作りやすいと思います。

・質疑応答

・ライセンスはどうなっているか
本体はMITライセンス 改変・再配布自由、極端に言うとconcrete5をセメント6として販売してもOKとのこと。しかしアドオンはそれぞれにライセンスが違うので確認の必要あります。

・引っ越し
concrete5はサーバーが引っ越しする場合、ファイルとデータベースの引っ越しが必要です。 まずは、引っ越し元から引っ越し先にファイルとデータベースをコピーします。やり方はサーバーによって異なるのでここでは説明を控えます。

次にデータベース接続部分を変更します。
5.6系であれば、config/site.php を変更します。
5.7系であれば、application/config/database.php を変更します。

・セキュリティ
以前、他のCMSで大量に改ざんされたことがあり、そのあたりconcrete5ではどうかという質問でした。その改ざんではサーバー側とCMSの兼ね合いもあり、比較的簡単に使えるサーバーで起こっていたので、使用するサーバーは選ぶことが重要です。concrete5もセキュリティ改善のバージョンアップもしますので、その他のCMSと比べてセキュリティーに問題があるとは思わないです。
また、[管理画面→システム&設定→権限とアクセス→IPブラックリスト]よりログインの制限が出来ますので活用ください。サイトや運用方法によって違いますが、 1ユーザー5回 30秒くらいの設定が妥当じゃないかという意見がありました。

コンクリート5.7 -- IPブラックリスト

・モバイル対応
テーマの選択画面からモバイルテーマを選ぶことが出来ます。パソコン用のテーマと違って1つしか選択でいないので注意が必要です。

コンクリート5.7 -- テーマ

まとめ

WordPressとの比較がよく聞かれますが、どちらかというとJimdoと比較したほうが分かりやすいと思います。またWordPressとどちらが楽ですかと聞かれますが、作られるサイトにもよりますので一概には言えません。奈良ではWordPress・Jimdo・concrete5の勉強会を同じ会場で開催していますので、いろんなCMSの勉強会に参加して合うものを見つけていただきたいと思います。どのCMSじゃないとできないということはないと思いますので実現したいことが正確にはやく作れるCMSを選択されるのがいいと思います。

今後の勉強会について、はじめての方向けにconcrete5で何ができるの?というセミナー形式や、講師が多く来てくれるならテーマを決めずに質問大会のような形もやってみたいと思います。隔月で開催したいと思っていますので、ご興味ある方本当にプロアマ問いませんので気軽に参加してください。またみなさんのご意見も参考にしながら進めたいと思います。よろしくお願いします。

今後の勉強会の開催通知はdoorkeeper で行っています。
https://manage.doorkeeper.jp/groups/concrete5-kansai
登録していただければ、次回の勉強会の通知がメールで届きます。

今回、途中で用意していたデモが動かなかったり、時間配分が悪かったりでお聞き苦しい点があったと思います。申し訳ありませんでした。今後もよろしくお願いします。

concrete5 5.7の開発に携わって

現地時間 2014年9月12日に concrete5 メジャーバージョンアップ 5.7 がリリースされました。

今回のバージョンアップは新機能もconcrete5のコアの部分はそのままに新機能や便利なブロックタイプの追加もありました。詳しくはconcrete5本家のページを見ていただきたいと思います。

http://www.concrete5.org/documentation/background/version_history/5-7-0/

今回感じたことを書きたいと思います。

「5.7の開発に携わって」といっても僕がコミットしたものはないし、パッケージ化してテストケース作って提供しただけ。それもどこまで役に立ったのか。。。。不明です。

バージョン5.6系までの日本語開発チームは、どちらかというと本家版がリリースされてから日本語の通らないところや日本語を使うことで問題が出るところを修正していく形が多く、その修正を本家版の次のバージョンに報告していくような手法でやってきました。ですので、本家の開発スピードに左右されることなく、自分たちのペースでやっていたので英語のリリースノートやフォーラムを読まなくても、ソースコードの解読だけでもある程度ついて行けた気がします。

しかし、今回の5.7系からは日本語開発チームは本家版のリリース時に日本語の問題点を取り入れてもらうように動きが変わりました(以前からでしたが今回から本格的に)。そうすると、コードだけを見て自分のペースで解読していくことでは追いつかなくなり、英語で本家に質問したり、フォーラムやgithubに書かれている内容を読んだりする必要性がありました。

本当に英語がわからなく、単語の意味すらわからないので、他のメンバーに「なんて書いてあるの?」と聞いてばかり。英語力の必要性を痛感しました。

英語力が本当にゼロなので何から手をつけていいかまったく分からないけど、少しずつ覚えていきたいと思います。誰か勉強方法教えて下さい。。。

語学に興味のあるプログラマーのみなさん、concrete5に興味を持っている人がいれば、ぜひ開発チームに参加してみてください。生の英語でやりとりできます。(僕はどんな英語か分かってないけど)。

オープンソースのコミュニティへの参加動機は様々あると思いますが、このような動機で参加されるのもありだと思います。