2016-01-15

狩猟本能をくすぐろう。GIFアニメーション

Photoshop

f:id:pandanote:20160115164303g:plain

タイトル「おばけの散歩」

誰でも自由に商用に使ってください。マージン１００円。

photoshopのGIFアニメーションで簡単にちょっとしたアニメーションができます。

データが軽く、スマホでも再生可能、ということで再び注目されているとのこと。

狩猟本能で、男は動いているものに目が行く！だから女は揺れるピアスをするとモテる！って聞いた事ある。

男子に限らず　コンビニのpopとかもちょっと動くやつに目が行くし、WEB広告も動かせると効果倍増だよね。ポチッとしてもらえるバナー制作に多いに役立ちそうです。

授業では「ただいまSALE中」というバナーにちょっとした動きをつけてみました。

「キラリン★と光るバージョン」と「シュタッ！と動くバージョン」

f:id:pandanote:20160115164437g:plain

f:id:pandanote:20160115170618p:plain

ここでゆっくり解説する余裕がないので　以下、自分用のメモ程度に行程を。

背景の上に文字レイヤーをつくる
文字レイヤーにテキストを書く（カスタムシェイプツールでカタツムリも追加）
文字レイヤーの上にキラリン★レイヤーをつくる
キラリン★に白のグラデーションを作る
新規グループを作成
グループのフォルダを選択したままの状態で文字レイヤーの文字の部分を選択
（⌘+サムネイルをクリック）（winの場合はAlt+サムネイルをクリック）
レイヤーマスク作成
これによって文字とカタツムリの中にキラリン★のグラデが入る
キラリン★レイヤーをグループフォルダの中に入れる
ウィンドウから「アニメーション」を表示
（家で使ってるCCでは「タイムライン」）
アニメーションをコピーするごとにキラリン★レイヤーの部分を右にちょっとずつずらしていく。
秒数とか繰り返しの回数を指定
gifで保存
この時マットの部分を背景色(出来上がった画像を貼る場所の)に合わせるとGood

こんな感じだったかなー。

「シュタッと動くバージョン」はデータを学校に忘れてきたか失くしたかしたので、かわりにTOPに貼ったおばけのお散歩を作りました。

ぼかし（移動）を使うだけです。キラリン★より簡単です。

yachin29.hatenablog.com

2016-01-15

PHPでフォーム作成

PHP

とりあえずサーバーにUP

一体ここで打ち込まれたデータはどこに溜まっているのだろう・・という根本的な、大きな疑問を残したまま。

http://iamaki.php.xdomain.jp/form/

http://yakitori.pinoko.jp/form/

来週そのデータを受け取る部分をやるのかなー？

授業中xdomainにUPしようとした人達がうまくいかない、という問題がありました。

盗み聞きしたところによると、まず最初に[index.html]というファイルをUPしておかないとだめらしいです。

ただし、家に帰ってわたしもxdomainにUPをしてみたのですが、最初から[index.html]が存在していました。　なのでそのままフツーにUPできましたよ。

CyberduckとFFFTPの違いなのかなぁ。

ちなみに変更日をみると昨日xdomainでPHPの使用を開始した時間になっています。

まぁ、終わり良ければ全てよし、という事で。　考えません。

f:id:pandanote:20160115151817p:plain

2016-01-13

PHP習熟度テストの為のお勉強

PHP テスト対策

htmlspecialchars(変数,ENT_QUOTES,'utf-8');

xss

nl2br

session_start()

var_dump()

とりあえず単語はこのくらいは覚える必要ありそう。

変数「$a」に「1000」を代入し、変数「$a」の値をブラウザ上に表示する

<?php

$a=1000 ;

echo $a ;

フォームの送信方法の指定は form タグのどの属性に行うか

method

<form action="check.php" method="post">こんな感じ

フォームに入力したデータを送信する際の遷移先の指定はformタグのどの属性に行うか

action

POSTメソッドで送信されたフォームの値は、$_POST[ 'フィールド名' ] で取得
GETメソッドで送信されたフォームの値は、$_GET[ 'フィールド名' ] で取得

HTTP送信の種類を2種類

post, get

自分の名前をブラウザ上に表示するようにPHP

<?php
echo 'name' ;

printとechoの使い分けがわからん。

<?phpecho 'こんにちは' . $name . 'です。' ;　

連結はこんなかんじ

入力したデータを取得する際に特殊文字の変換処理を行うための関数名

htmlspecialchars

クロスサイトスクリプティング（Cross Site Scripting XSS）

htmlspecialchars(変数,ENT_QUOTES,'utf-8');

改行を含んだテキストを表示する関数名

nl2br

セッションを開始する関数を書きなさい。

session_start()

以下の記述をした場合、ブラウザにはどのように表示されるか

$r = mb_strlen('YAMA','utf-8');

echo $r;

4

以下のように連想配列を宣言し、初期値を設定しました。各要素のキーと値を書け

$present = array("りんご"=>"apple", "オレンジ" =>"orange", "もも" => "peach");

キー：りんご、オレンジ、もも　値：apple、orange、peach

1から10までの数値を合計した値を求める式をfor文で記述

<?php

$sum = 0;

for( $i = 1; $i <= 10; $i++ ){

$sum += $i

}

echo '1から10までの合計は'. $sum.'です。';

その他　よく出てきたワード

required属性
placeholder属性
var_dump()
foreach

2016-01-12

テーブル接頭辞の書き換えできた。

WordPress 永久保存版

今日　クラスの天才に指導を受けて

テーブル接頭辞の書き換えに成功しました。

天才のブログ通りにやればOK

昨日の時点でわたしがやってなかったのは以下の部分、

最後にwp-config.php内の「$table_prefix」を新しい接頭辞に変更

$table_prefix = 'wp_';

ここまでちゃんとやったら成功しました。

wp-config.phpというファイルがwordpressのフォルダの中にあるのでその中の接頭辞も新しくしてやる必要があるらしいです。

やったー　ありがとうー。

2016-01-10

WordPressテストサーバー移行に四苦八苦の乱

WordPress 永久保存版

昨日の放課後はみんなで仲良く大荒れでした。

なんだかよくわからないままにローカルで作ったWordPressを仮サーバーにアップし始めたのですがなんだかよくわからないままに出来たり出来なかったり出来たと思ったらやっぱ出来てなかったり、シット！

現状、なんとかlolipopでもx-domeinでも画像含めて表示できるようになりましたけど、接頭辞の問題はクリアできていない、謎も多いまま、あと、昨日なにやったのか既に忘れた、という、、

f:id:pandanote:20160111192738p:plain

こんな感じの今日です。

travel (lolipop)

TRAVEL　（x-domein）

とりあえずやった事を思い出せる範囲でメモしておいて、完璧にできるようになった頃にちゃんとまとめたい。

何にしろ、まず

●ローカルで作ったデータをバックアップ（ちなみに未完成だけど）

ダッシュボードからxmlデータをエクスポート
データベースからsqlデータをエクスポート
wp-contentフォルダ（themeフォルダとuploadsフォルダが必要）を確認

ここからは　x-domeinサーバーとlolipopサーバーで違います

●x-domeinの場合（なんかかなり面倒だった記憶）

x-domeinのサイトにログイン
無料レンタルサーバーのページでwordpressの利用を開始する
wordpressインストールする為の必要事項を入力
・この時サイトアドレスは自分で決められなかった（無料版だから）
・wordpressID / ブログタイトル　/　メールアドレスとか入力
　このIDはwordpressのダッシュボードにログインする時に必要！！
このへんうろ覚えなんだけどこの後wordpressをインストールしたんだと思う
「設定」ボタンを押して

FTPアカウント設定で　全てのファイル/フォルダにアクセスするにチェック

セキュリティ→ログイン試行回数制限を無効に（これは学校でやる時だけね！）
で、ここまで来たらダッシュボードにログイン（多分）
さっきのIDと、どっかのタイミングで与えられたパスワード（笑）でログイン。
バックアップしておいたXMLデータをダッシュボードからインポート
この段階でだいぶデータが移行されてて浮かれるけど実はまだまだここからが本番。自分で作ったMythemaが全く反映されていない状態なのでスタイルがあてられてない。
FTPクライアント（学校ではFFFTP）を使ってwp_contentをアップする
・FFFTPに新たにwp用のホストを作る！
・管理パネルのFTPアカウント設定の中でホスト名/ユーザー名を確認できる
・接続して最初に設定したサイトタイトルのフォルダが確認できたら
　その中にwp_contentをUPする
ダッシュボードに戻ってテーマ→Mythemeを有効化すると...完成！！？？

かと思いきや、実はここまででは駄目〜〜〜！！！
ローカルで画像を挿入した時のパスがそのままになっているので画像のリンクがキレています。自分のパソコンにはローカルのデータが残っているので画像もちゃんとリンクされて見えるのが罠。スマホで確認してみると確実に画像がない。
画像のアドレスをまとめて書き換える！　我らがスター★先生のブログを参照にします。

データベースのSQLを開いて、古いアドレス→新しいアドレスにまとめて書き換えるプログラムをコピペで書いて実行。wp_optionsでアドレスが書き換わってるのを確認したら万事OKです。
スマホで確認したらちゃんと画像見れました。成功♡アメージング♡AWESOME♡

残った疑問、ダッシュボードのメディアの中に画像がありません。これはどうなの・・？

●lolipopの場合

lolipopはwordpressの簡易インストールというのができるので（ちなみにわたしは250円のサービス）wordpressのインストールまでは結構簡単。

ロリポップのサイトにログイン
簡易インストール→wordpressをインストール
必要事項を入力
インストール先のURL（任意）/サイトタイトル/ユーザー名
パスワード/アドレスなど
ダッシュボードにログイン
xmlデータをインポート
FTPクライアント（今回はFFFTP）でwp_contentをUP
x-domeinと違ってホストを作り直す必要なし（アドレスが同じだから！）
画像のアドレスをまとめて書き換える！（x-domeinの場合と同じ）
lolipopサイトのWEBツールからデータベースにアクセスできる

これで一応OKなんだけど、、、、スマホでも確認できました。

でもここからまた複雑な問題が〜　超めんどくさいんですけど〜〜

250円lolipopではwordpressが１つしかインストールできない。

テーブル接頭辞がlolipopに勝手に決められてしまう。

ローカルでは「wp_」という接頭辞で作っていたけど、データベースに作られたテーブル接頭辞は「wp1_ 」その後、色々あってやり直したら今度は「wp2_」。要するに１度使った接頭辞は永久欠番みたいになって、テーブルを削除しても「wp3_」「wp4_」と接頭辞のナンバーがどんどん大きくなっていく仕様のようです。データベースに「wp2_」の接頭辞で作られたテーブルに、「wp_」接頭辞のデータをインポートしていいのかしら、、、駄目って言われたよね、、でもなんか、普通に出来たなぁ、、まいっか、で終わらせてたのが昨日の授業中までだったんですが、放課後みんなで先生に質問をぶつけていると「やっぱ接頭辞そろえないと駄目じゃん」「後々出来ないと困るじゃん」という事になりましたよ。

で、それを見事にやってのけた天才クラスメイトのブログがこれ　↓

接頭辞の変更に成功した様子です。

で、わたしもコピペにコピペを重ねて真似をしてみたんだけど、接頭辞を書き換えたらサイトにアクセスできなくなって😡😡😡🔥🔥🔥くじけました。

phpMyAdominで確認するとwp_に書き換えられていたけど、wordpressインストール履歴を見ると接頭辞はwp_2のままだったのでちゃんと書き換えが出来てなかったのかなー。で、よくわかんないけど色々やってるウチに、インポートした方のテーブルが「wp_2」に書き換わっていました。　？　それでちゃんとアクセスもできたので、まぁいいや・・ってのがナウです。もしかして　↓　の行程を端折ったからかな？　なぜ端折ったかというとよくわからなかったからです。

というわけで、とりあえずここまで。

2016-01-08

再起動の魔法が効かないMySQLサーバーが立ち上がらない問題

WordPress

今日もお家に帰ってデータ移行の練習、と思ったらMAMPが立ち上がりませんでした。この問題はMAMPあるあるのようで、ネットには同じような状況の迷える人々の質問が沢山。結果、なんか面倒くさそうなのでMAMPのインストールからやり直ししました。でも今後も同じ問題が起こるであろうし、明日先生に聞いてみよう。

Apacheサーバーの方は大丈夫なんですがMySQLサーバーだけが立ち上がらないんです。何十回やってもだめ。「再起動すればだいたい解決」だと思っていたMacなのに、最近原因を解決しないと先に進めない事が多くて面倒です。
そもそもApacheとMySQLが何なのかもわからないんだけど。

f:id:pandanote:20160108213510p:plain

何が原因なのか調べてる中でMAMP>logs> [mysql_error_log.err]を開くとエラーの原因が見える事を知りました。昨日は普通だったのに今日は２つのエラーが出ています。（現時点でわたしに解決はできませんが原因を知ることは出来ました）

f:id:pandanote:20160108215107p:plain

f:id:pandanote:20160108214831p:plain

あと、「ターミナル」とかいう今まで触れた事のないものの存在を知りました。解決策の中でみなさん「ターミナル」でナントカを実行するとか書いてるんですが、何の事かわからず、Macintosh HDの中を検索してみたら入ってました。テキトーに触ってみたけど、全然ピンと来ず、すぐに諦めて再インストールの魔法に切り替えました。

f:id:pandanote:20160108213944p:plain

明日こそ、何かひとつエラくなれますように。なむ〜

2016-01-07

wordpressの設定　2016年保存版

WordPress 永久保存版

今日はできたけど　明日にはもう出来なくなってる自分の為にザックリ覚え書き。

ちなみにわたしの環境は

学校ではWindows/XAMPP　自宅ではMac/MAMP

学校と家でwordpressのデータを行ったり来たりさせながら勉強する為に、データの移行の仕方を勉強しました。

先生のブログに全て書いてあります。

Webデザインの勉強 | Webサイト制作科 9月15日開講クラス

ここからは今日わたしが実際に家でやった作業を明日の自分の為に書きます。

この記事の下にまとめてリンクしますが、以前クラスメイトのブログを参考に、wordpressをダウンロードし、「wordpress」という名前のデータベースを設定、インストールまでしていました。

今日学校で作ったデータベースは「wordpress0915」という名前にしたので、勉強がてら再度wordpressをダウンロードして、今度は「wordpress0915」というデータベースを作成しました。（手順は以下）

MAMPを立ち上げる→ツールの中のphpMyAdmin→「wordpress0915」「utf8_general_ci」で作成→完成

f:id:pandanote:20160107184422p:plain

次はwordpressのインストール

localhost/wordpress0915/

にアクセスして「さあ、始めましょう！」で、また例のクラスメイトのブログを参照に、wordpressをインストールをしました。この時、今回はさっき作った「wordpress0915」というデーターベース名を指定。

↓

次に学校で使うテキストのサンプルデータを入手してwordpress0915にインポート（手順は以下）

localhost/wordpress0915/にアクセスしてダッシュボードを開く

↓

ツール

↓

インポート

↓

wordpress

↓

ファイル選択

↓

sample>contentsフォルダ内の「 posts.xml 」を選択　でOK

で、ここからが大事な移行作業

学校から持ち帰った（途中まで作業を進めた）データを家で作ったデータベースにぶっこみます。

持ち帰ったのは「wp-content」というファイルと「wordpress0915.sql」というデータベースからwordpress0915のテーブルをエクスポートしたデータ。

今日学校では「mytheme」というフォルダを作り、その中で作業しました。なので今日は「mytheme」だけを持ち帰ってもいいのですが、わたしは「wp-content」ごと持ち帰りました。wordpressで画像をUPした場合画像は「uploads」という「mytheme」よりも上の階層のフォルダに保存されます。画像も一緒に持ち帰りたい場合はさらに上の階層の「wp-content」ごと持ち帰れば間違いないようなので練習がてら今回もそうしました。

で、家の「wordpress0915」の中の「wp-content」と持ち帰った「wp-content」を入れ替え。

↓

MAMP立ち上げ→ツールの中のphpMyAdmin→「wordpress0915」を選択して→「構造」テーブルを全てチェック→チェックしたものを削除

f:id:pandanote:20160107205549p:plain