読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【Javascript】フェイドイン・アウトするスライダー(自作)


slide

目標

  1. 複数の画像をフェイドイン、アウトして切り替えていく
  2. 読み込んだ時、画像をランダムに表示
  3. ボタンを押すと特定の画像を表示
  4. 画像の切り替えに合わせてボタンも切り替わる

実装

  1. 2枚の画像を重ねることで対応。z-indexとopacityをタイマー処理で増減して、画像が見えなくなった時に切り替えるようにしました。
  2. ランダムに表示されてもそこからスライドが実行されるようにしました。
  3. ボタンを連打してもタイマー処理が重ならないように制作しました。
    クリックイベントで画像を2枚とも現在の画像にして、背面の画像を切り替え、上に表示されている画像を関数でフェイドアウトして下の画像を表示させています。
  4. 変数をカウントさせて、それぞれのボタンに対応させています。

反省、改善点

  • 最初に画像を2枚同時に読み込まなければ軽くなるかもしれない。
  • ボタンを押した時のフェイドアウトする関数とタイマーでフェイドアウトする関数が被ってしまう。一つの関数でまとめられるかもしれない。
  • ボタン一つ一つにイベントを付与するコードをまとめて記述できるかもしれない。

コード

html

<div id="slider">
<img src="#" id="slide1">
<img src="#" id="slide2">
</div><!--/#slider-->
<ul id="slide_menu">
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
<li><p></p></li>
</ul>

css

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
img{
	vertical-align: bottom;
}
/*body*/
body{
}
/*#slider*/
/*DOMを変数に格納*/
var slide1 = document.getElementById('slide1');
var slide2 = document.getElementById('slide2');
var slide_menu = document.getElementById('slide_menu');
/*変数を初期化*/
var opacity = 0;
var t_id = null;
var f_id = null;
var btn_f_id = null;
var s_id = 1;
var count = 0;
var opacity = 1;
var slide_count = 0;
var btn_count = 0;

/*画像の名前をimg_arrに格納*/
var img_arr = ['slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg','slide5.jpg'];

/*5秒カウント*/
function timer(){
    /*カウント*/
    count++
    t_id = setTimeout(timer,1000);
    /*7秒経過したら*/
    if(count == 7){
        slide_count++
        if(slide_count == 5){
            slide_count = 0;
        }
        f_out();
        btn_change(btn_count);
    }
    if(count == 14){
    /*14秒経過したら*/
        count = 0;
        slide1.style.zIndex = 200;
        slide2.style.zIndex = 100;
        f_in();
        btn_change(btn_count);
    }
}
timer();
function s_id_change(num){
    s_id = num;
}

/*slide_menuの中のliをslide_btnに格納*/
var slide_btn = [];
for(var i = 0; i < slide_menu.children.length;i++){
    slide_btn[i] = slide_menu.children[i];
}

/*slide_btnにクリックイベントを付ける*/
slide_btn[0].addEventListener('click',function(){click(0)},false);
slide_btn[1].addEventListener('click',function(){click(1)},false);
slide_btn[2].addEventListener('click',function(){click(2)},false);
slide_btn[3].addEventListener('click',function(){click(3)},false);
slide_btn[4].addEventListener('click',function(){click(4)},false);
/*クリックイベント*/
function click(btn_num){
    /*btn_f_out()が終わるまで押せない*/
    if(btn_f_id === null){
        btn_opacity(btn_num);
        /*カウントを止める*/
        clearTimeout(t_id);
        if(s_id == 0){
            /*slide1が非表示なら*/
            slide1.src = slide2.src;
        }else if(s_id == 1){
            /*slide2が非表示なら*/
            slide2.src = slide1.src;
        }
        slide1.style.zIndex = 200;
        slide2.style.zIndex = 100;
        slide2.src = 'img/' + img_arr[btn_num];
        opacity = 1;
        s_id = 0;
        btn_f_out();
    }
}

function btn_f_out(){
    s_id = 0;
    if(opacity > 0 ){
        opacity -= 0.01
        slide1.style.opacity = opacity;
        btn_f_id = setTimeout(btn_f_out,10);
    }else{
        clearTimeout(btn_f_id);
        btn_f_id = null;
    }
}

/*slide_btnの透明度*/
function btn_opacity(num){
    for(var i = 0; i < slide_menu.children.length; i++){
    slide_btn[i].style.opacity = 0.5;
}
    slide_btn[num].style.opacity = 1;
}
function btn_change(num){
    btn_count++
    if(btn_count == 5){
        btn_count = 0;
    }
    btn_opacity(num);
}

/*最初に画像をランダム表示*/
slide_count = Math.floor(Math.random() * 5);
btn_count = slide_count;
btn_change(btn_count);
slide1.src = 'img/' + img_arr[slide_count];

if(slide_count == 4){
    slide2.src = 'img/' + img_arr[0];
    slidecount = 0;
}else{
slide2.src = 'img/' + img_arr[slide_count+1];
}

/*画像を置換*/
function slide1_change(){
    slide_count++
    if(slide_count == 5){
        slide_count = 0;
    }
    slide1.src = 'img/' +img_arr[slide_count];
    
}
function slide2_change(){
    if(slide_count == 4){
        slide2.src = 'img/' +img_arr[0]
    }else{
    slide2.src = 'img/' +img_arr[slide_count + 1];
    }
}

/*フェイドアウト*/
function f_out(){
    s_id = 0;
    if(opacity > 0 ){
        opacity -= 0.01
        slide1.style.opacity = opacity;
        f_id = setTimeout(f_out,10);
    }else{
        clearTimeout(f_id);
        slide1.style.zIndex = 100;
        slide2.style.zIndex = 200;
        slide1_change();
    }
}

/*フェイドイン*/
function f_in(){
    s_id = 1;
    if(opacity < 1 ){
        opacity += 0.01
        slide1.style.opacity = opacity;
        f_id = setTimeout(f_in,10);
    }else{
        clearTimeout(f_id);
        slide2_change();
    }
}

【php】オブジェクト、クラス、インスタンス


参考 : http://qiita.com/mpyw/items/41230bec5c02142ae691

オブジェクト、クラス、インスタンス

引用
http://wa3.i-3-i.info/word13563.html

オブジェクト
クラスとインスタンスを指す?
クラス
「型」、「設計図」
属性(プロパティ)と操作(メソッド)を定義したもの
インスタンス
「実体」
実際にメモリ上に配置されたデータの集合という意味合いが強く
「クラスをnewしたもの」

クラスの作り方

class User { }

new演算子で生成

$a = new User;
class User{
    //プロパティ
    public $name;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
    }
    //メソッド
    public function sayHi() {
    echo "hi, i am $this->name!";
    }
}

$taro = new User("Taro");

//インスタンスのnameプロパティを参照
echo $taro->name;
//改行
echo nl2br("\n");
//sayHiメソッドを参照
$taro->sayHi();

引用
http://php.net/manual/ja/language.oop5.properties.php
http://www.atmarkit.co.jp/ait/articles/1506/03/news019.html

プロパティ
クラスのメンバ変数のことをプロパティと呼ぶ
メンバ変数
オブジェクト指向における「属性」を定義したもの。
クラスの中にある変数
コンストラクタ
クラスからインスタンスを生成する際(new を行う際)に最初に実行される関数
new をするだけで自動的に実行される
__constructという名前のメソッドを使う
メソッド
クラス定義内に書かれている関数

クラスの継承

extends
指定したクラスを継承する
<?php
class User{
    //プロパティ
    public $name;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
    }
    //メソッド
    public function sayHi() {
    echo "hi, i am $this->name!";
    }
}
class AdminUser extends User{
    public function sayHello(){
        echo "Hello Admin";
    }
}
$bob = new AdminUser("bob");
echo $bob->sayHello;
echo nl2br("\n");
//継承されたクラス内のプロパテ
echo $bob->name;

子クラスで親クラスをover ride(上書き)できる。

<?php
//親クラス
class User{
    //プロパティ
    public $name;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
    }
    //メソッド
    public function sayHi() {
    echo "hi, i am $this->name!";
    }
}
//子クラス
class AdminUser extends User{
    //メソッド
    public function sayHello(){
        echo "Hello Admin";
    }
    public function sayHi() {
    echo "hi, i am $this->name!";
    }
}
$bob = new AdminUser("bob");
//上書きされたメソッド
echo $bob->sayHi();

上書きしたくない場合はアクセス権(public等)の前にfinalとつける。
override出来ないので「Fatal error: Cannot override final method User::sayHoo()」というメッセージがでて実行されない。

<?php
class User{
    //プロパティ
    public $name;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
    }
    //メソッド
    final public function sayHoo(){
    echo "hoo";
    }
}
//子クラス
class AdminUser extends User{
    //上書き出来ない
    public function sayHoo(){
    echo "hoo";
    }
}
$bob = new User("Tom");
$Tom = new AdminUser("Tom");
//上書きできないメソッド
echo $Tom->sayHoo();

アクセス権

private
そのクラス内のみアクセス可能
protected
そのクラス内+親クラス内からのみアクセス可能
同じクラス内、同じパッケージ、サブクラスからアクセス可能(http://www.gamesite8.com/archives/588322.html)
public
どこからでもアクセス可能

privateを使う

class User{
    //プロパティ
    private $name;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
    }
    }
class AdminUser extends User {
    public function sayHello(){
        echo 'hello from Admin $this->name';
    }
}

$bob = new AdminUser('Bob');
$taro = new User("Taro");

//publicなので書き出されるが$this->nameの部分は書き出されない
echo $bob->sayHello();
//privateなのでエラーになる。
echo $taro->name;

protectedを使

<?php

class User{
    //プロパティ
    public $name;
    protected $color;
    //コンストラクタ
    public function __construct($name,$color){
        $this->name = $name;
        $this->color = $color;
    }
    }
class AdminUser extends User {
    public function sayHello(){
        echo 'hello from Admin',$this->name;
        echo ' your color is ',$this->color;
    }
}

$bob = new AdminUser('Bob','red');

echo $bob->sayHello();
echo $bob->name();
echo $bob->color();

static

インスタンスを作らなくても呼び出せる。

<?php

class User{
    //プロパティ
    public $name;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
    }
    public static function Message(){
        echo 'this is static'; 
    }
}
//インスタンス化してなくても呼び出せる
User::Message();

インスタンスを作る度にカウントする。

self
自クラスのプロパティ、及びメソッドへの静的にアクセスする。
<?php

class User{
    //プロパティ
    public $name;
    public static $count = 0;
    //コンストラクタ
    public function __construct($name){
        $this->name = $name;
        self::$count++;//インスタンス化する度にカウント
    }
    public function sayHi(){
        echo "hi, i am $this->name!";
    }
    public static function Message(){
        echo 'this is static'; 
    }
}
echo '最初',User::$count,',';
$suzuki = new User('suzuki');
echo '2回目',User::$count,',';
$sato = new User('sato');
echo '3回目',User::$count;

抽象クラス

他のクラスで継承することを目的としたクラス。

<?php
abstract class BaseUser {
    public $name;
    abstract public function sayHi();//子クラスで必ず実装するメソッド。(この時点で中身を書かなくていい)
}
//BaseUserを継承する子クラス
//nameプロパティを実装しないとエラーになる。
class User extends BaseUser {
    public function sayHi(){
        echo 'This is child class';
    }
}

インターフェイス

interface
このインターフェイスに含まれる全てのメソッドを実装する
カンマで区切って指定することで複数のインターフェイスを実装できる
メソッドのアクセス権は必ずpublicを使う
<?php
interface sayHi {
  public function sayHi();
}
interface sayHello {
  public function sayHello();
}
class User implements sayHi,sayHello {
    public function sayHi() {
        echo 'hello!';
    }
    public function sayHello() {
        echo 'say hello!';
    }
}
$suzuki = new User('suzuki');
echo $suzuki->sayHi();
echo $suzuki->sayHello();

【webデザイン】デスクトップとノートどちらが多い?


いくつかのサイトを個人的に要約しました

パソコンはデスクトップ派?ノート派?レビュー比較

普段の使用割合は?【タブレット、デスクトップpc、ノートpc】

※2015年のデータ
引用 : http://pc-on.net/review/2081/

内容
20~50の男女
回答数100
ノート
54%
デスクトップ
36%
タブレット
10%

パソコンの利用(第4回)

※2016年のデータ
引用 : https://www.myvoice.co.jp/biz/surveys/20007/index.html

内容
2015年3月1日~3月5日
11,933名
A4サイズのノート
54.2%
デスクトップ
45.5%
  • デスクトップは減少傾向、ノートは増加傾向にある。

モニター解像度のシェア(2017年1月現在)

※2015年のデータ
引用 : http://webseeya.com/2015/05/25/display-resolution-2015/

1920 x 1080
25%
1366 x 768
17%
1024 x 768
5%
2560 x 1440
5%
その他
4%前後

おまけ

自宅・個人で使っているパソコンメーカーランキング!やはり国内メーカーが強し!
http://www.mexce.net/monitoring/7648.html

【webデザイン】シニア向けサイト製作時の注意


いくつかのサイトを個人用に要約しました。

50以降向けサイト

引用:http://hi-posi.co.jp/tech/?p=330

  • 大きめのフォント
  • わかりやすいテキストリンク
  • リンク領域の分かれ目は分かりやすく。
  • ボタンは大きく立体感を出す。フラットデザインのボタンは分かりにくい。
  • アイコンだけでなくテキストも併用
    アプリに慣れ親しんでない場合アイコンの意味が分からない場合がある。
  • アコーディオンメニューにもわかりやすく文字で解説を
  • 一つの画面に機能を入れすぎない。シンプルに使いやすく。

シニア向けサイト構築

引用サイト
http://www.bebit.co.jp/info/column/column016.html
http://www.bebit.co.jp/info/column/column017.html

  • シニアユーザーは急増している。

身体能力の低下

視力の低下
長時間ウェブサイトを閲覧することは難しい
記憶力の低下
ウェブサイト上で現在位置を見失う可能性が高い
巧緻性(こうちせい:思い通りに体を動かせること)の低下
素早い行動は難しくなる
誤クリック、動作ミスの誘発。

どう配慮していくか

視力の低下
初期設定の文字サイズは大きめに
文字サイズは固定しない(?)
文字サイズを調節するような機能
記憶力の低下
なじみのある言葉を使う
英語の使用は避ける。
比較の必要な情報は同じ画面内に。
ポップアップウィンドウ使わない
戻るボタンが効かず、現在位置の把握が困難に。
巧緻性への配慮
動くメニューは避ける。プルダウンなど
リンクの周辺もリンクの一部に
リンクの感覚は余裕をもって空ける。

シニア層の為のユーザビリティ

引用:http://www.webcreatorbox.com/tech/usability-for-senior/

「知っていて当たり前」は通用しない
手間をかけてでも親切に、わかりやすい設計。
新規ウィンドウを避ける
どうやって前のページに戻るかが分からなくなる。
スクロールが苦手
CTAボタンを付ける場合はページの最後ではなく途中にもつける。
CTAボタン Call to Action button
ユーザーのクリックを促進し、アクションを完遂(CV=コンバージョン)させるためのボタン
引用:https://www.s-bokan.com/blog/conversion-optimization/cta-button-optimization.html
英語は避ける
英語よりも日本語で書かれた方が圧倒的に理解しやすい
横文字を避ける
「難しい・聞いたこともない単語」を避ける。
文字サイズ
16px位だとストレスなく読める(らしい)
説明をわかりやすく
文字の説明だけではわからない。
画像や動画での説明が可能な部分には極力対応していく。
選択ボタン
一つだけしか選択できない場合は「一つだけ選択してください」という一文をいれる
文字をおしてもチェックできるようする。
文字入力
半角英数字の場合は「半角英数字で入力してください」と書くなど、何を間違えたかなどをわかりやすく。
パンくずリストを全ページに
ユーザーが今どの位置のページにいるのかわかりやすく。

団塊シニア層向けのweb設計

引用:http://d.hatena.ne.jp/wa-ren/20061117/p1#20061117f1

フォント
ブラウザ設定で可変できるように。16ptあると読みづらい人が減る(らしい)
アイコンは理解されない
文字の説明を添える。
一つの画面に多数の機能を並べない
一般PCユーザはなるたけ1画面に沢山の機能を配し、画面遷移することなく多種多様な操作ができることを好むが、シニアユーザは混乱する。
1画面でできることを限定し、画面遷移数は増えても長い説明文を併用したボタン名とする。

高齢者のためのユーザビリティ

引用:https://u-site.jp/alertbox/20020428

高齢者のユーザビリティが低いわけ
ウェブサイトは、若いデザイナーが制作する場合が多い。
可読性とクリックの容易さ
動的インターフェイス要素は問題の元になる。
高齢者のマウスの動きは不安定なので。
協力的で寛容なデザイン
訪問済みリンクと未訪問リンクの見分けがつかない色使い → 訪問履歴を見失ってしまう。
  • 高齢者は、自分たちにとってもっとも使いやすいウェブサイトを好む傾向が強い。(らしい)

このサイトはwebを見ずらい人の為のUIについてすごい詳しい

https://u-site.jp/alertbox/20020428

Webサイトのシニア向けアクセシビリティランキング(2013年)

引用:http://www.tribeck.jp/newsrelease/20130326.html

このランキングで問われているもの。

トップページにおける初動喚起力
「目的とする情報への入り口が分かりやすいか」、「このサイトがどんな情報を扱っているか分かりやすいか」
メニューページにおける情報探索性
「商品やサービスを選択できるだけの情報が提供されているか」、「商品を探すために様々な切り口や手段を用意しているか」
商品ページにおける情報伝達力
「商品説明が端的で分かりやすいか」、「商品比較がしやすいか」
フォーム入力における負担軽減
文字入力や確認作業による負担を抑える配慮
情報理解・可読性の確保
「テキストや画像の文字は読みやすいか」、「色や形に頼った表現をしていないか」
シンプルな操作
「ナビゲーションが分かりづらくないか」、「リッチコンテンツの操作が複雑になっていないか」

個人的な感想

  • 高齢者がメインターゲットの業種や、ターゲット層がひろい業種が多い印象です。
  • ランキングが下がるにつれてデザイン性が上がっていっている気がします。

「説明を省略しない」 シニア向けのサイト制作のユーザービリティで気をつけたい7つのポイント

引用:http://www.selva-i.co.jp/blog/archives/1997

サイトマップのフッター配置
サイトマップ」は、ヘッダーにリンクを配置するよりも、フッターでサイトのコンテンツがすべて表示されるように設計した方が、効果的である

まとめ
http://web-tan.forum.impressrd.jp/u/2012/03/07/12315

中高年シニア向けSNS
https://matome.naver.jp/odai/2130693383241497701

【webデザイン】検索キーワードの決め方


いくつかのサイトを個人用に要約しました。

検索キーワードの決め方

【保存版】かんたん!「SEOキーワードの正しい選び方」

引用:https://seopack.jp/seoblog/20160502-choose-kw-easily/

キーワード候補を出す

思いつきでキーワードを出す
思いつくものを全て書き出してみる。
実際に検索
検索して対象のサイトが出てくるような組み合わせを探す。
(FireFoxの場合は「プライベートブラウジング」(Ctrl+Shift+P)
Chromeの場合「シークレットモード」(Ctrl+Shift+N)を使う。)
Googleキーワードプランナー
上記で選んだキーワードでSEOキーワード候補を調べる。
その中で検索ボリュームがあって関連のありそうなものを選ぶ。
検索ボリュームが高すぎるものは最初は選ばない方がいい?
good key word
関連検索語句を調べる。

キーワードを絞り込む

キーワード難易度チェックツール」
難易度の高いキーワードは弾く。
キーワードの優先順位を決める
はじめやすい・成果が出やすいキーワード

キーワードの選び方、決め方

引用:http://www.geocities.jp/hptubo/search_site/keyword.htm

原則として、専門用語は用いない。

不特定多数の人が検索することを前提に、インターネット利用者が検索サイトで検索しそうな単語を選ぶ。

キーワードのランキング

ユーザーの関心がどこに向いているのかも知る

内容を示す具体的なキーワード

具体的なキーワードで検索してヒット数を調べる

SEO関連サイト・ツール

【詳解レポ】ついに公式発言、Google検索順位2つの要因とは
https://seopack.jp/seoblog/20160824-top2/
無料で使えるオススメ検索キーワード調査ツール16選
http://www.ginzametrics.jp/blog/keyword-search-tools
上位SEO解析ツール fukuro
https://seopack.jp/seoblog/tool.php?insert-ad-04-ul-k-kw-hyouka-muryou

good key word
http://goodkeyword.net/

【javascript】キャラクターを操作して動かすアニメーション


これが歩きます。
panda
関数をまとめるところは今後やっていきます。。。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
#img{
    position:absolute;
    z-index:-999;
    top:100px;
    left:100px;
}
.controlar{
    position:static;
    z-index:999;
    width:100px;
    height:100px;
    text-align:center;
}
.controlar span{
    cursor: pointer;
}
</style>
</head>
<body>
<div class="controlar">
<span id="up"></span>
<div class="wrapper">
<span id="left"></span>
<span id="stop"></span>
<span id="right"></span>
</div><!--/.wrapper-->
<span id="down"></span>
</div>
<p>
<img id="img" src="img/10.jpg" alt="pnd">
</p>
<script>
var up = document.getElementById('up');
var left = document.getElementById('left');
var right = document.getElementById('right');
var down = document.getElementById('down');
var img = document.getElementById('img');
var stop = document.getElementById('stop');
var idx = 0;
var tid = null;
var x = 100;
var y = 100;
var dx = 20;
var dy = 20;
var speed = 200;
up.addEventListener('click',timer_up,false);
left.addEventListener('click',click_left,false);
right.addEventListener('click',click_right,false);
down.addEventListener('click',click_down,false);
stop.addEventListener('click',click_stop,false);
function timer_up(){
    click_stop();
    idx++;
    idx %= 4;
    img.src = 'img/4'+ idx + '.jpg';
    tid = setTimeout(timer_up,speed );
    console.log(y);
    if(y > -60){
    y -= dy;
    img.style.top = y + 'px';
    }
}
function timer_left(){
    click_stop();
    idx++;
    idx %= 4;
    img.src = 'img/3'+ idx + '.jpg';
    tid = setTimeout(timer_left,speed );
    if(x > -60){
    x -= dx;
    img.style.left = x + 'px';
    console.log(x);
    }
}
function timer_right(){
    click_stop();
    idx++;
    idx %= 4;
    img.src = 'img/2'+ idx + '.jpg';
    tid = setTimeout(timer_right,speed);
    if(x < (screen.width / 2) - 100){
    x += dx;
    img.style.left = x + 'px';
    console.log(x);
    }
}
function timer_down(){
    click_stop();
    idx++;
    idx %= 4;
    img.src = 'img/1'+ idx + '.jpg';
    tid = setTimeout(timer_down,speed);
    if(y < (screen.height / 2) - 100){
    y += dy;
    img.style.top = y + 'px';
    console.log(y);
    }
}
function click_stop(){
    clearTimeout(tid);
    tid = null;
}
function click_up(){
        timer_up();
}
function click_left(){
        timer_left();
}
function click_right(){
        timer_right();
}
function click_down(){
        timer_down();
}
</script>
</body>
</html>

【webデザイン】AMPとは?対応方法記載ページなどまとめ


AMPについていくつかのサイトを個人用に要約しました。

AMPとは

引用
https://webkikaku.co.jp/blog/seo/accelerated-mobile-pages/
AMP
(Accelerated Mobile Pages):
Accelerated=加速される という意味。
  • Googleが推し進めてきたプロジェクト。
  • 検索結果にカルーセル形式で表示される。
  • Twitterアメブロなど、様々なメディアがAMP対応を導入
google公式ブログ AMPについて
https://webmaster-ja.googleblog.com/2016/09/what-is-amp.html
AMP導入の日本語ガイド
https://drive.google.com/file/d/0BxvWUiBQ8jznNXhISW4zRFF0eW8/view
AMP対応方法まとめ
https://syncer.jp/Web/AMP/#section-2