60歳のお婆ちゃんはウェブデザイナーになりたい!

もうすぐ還暦迎えます、今独学で勉強してウェブの仕事を探しています

WEBデザイナー修行中

コリンキーを食べました

こんにちは、久々に投稿記事を書きました。

土曜日に農協の直売所へ行ったら黄色い見たこともない野菜が売っていました。

カボチャの一種でコリンキーという名前だそうです。生食用でサラダなどで食べるとか。
味はキュウリに近いです。カボチャだから甘いと思っていたので、見た目と味のギャップに少々戸惑い気味。
食感がコリコリの歯ごたえなのでコリンキーとついたそうです。
値段は200円。

半分にするとこんなん

コリンキーでサラダとトースト作ったよ

コリンキーサラダ

皮付きのまま薄くスライス。顆粒の昆布だしをまぶして、しばらく漬け込み。要は浅漬けですね。
オリーブオイルをプラスアルファしてちょいイタリアン。
箸休めの一品といった感じ。実が大きいのでかなりの量ができました。

コリンキートースト

次はトーストにしてみました。
ガーリックバターを塗ってコリンキーサラダ、トマト、生ハムをトッピング。彩りに紫蘇の葉を散らしました。マーマレードジャムのトーストも添えて。
ちなみにトマトと紫蘇とミントの葉はmy畑の収穫物。

トーストはメチャ美味しかったです。(好みもあると思いますが)
味は元々ガーリックバター、生ハムにほんのりついてるし、トマトの自然な味とマッチして飽きのこない優しい味に。

また、コリンキーの栄養についてもググってみました。

コリンキーの栄養としてあげられるのが、緑葉職野菜ならではのβカロチン(カロテン)です。
 
体内でビタミンAに変換されるβカロチン(カロテン)は、抗発がん作用、髪・肌・粘膜の健康維持、視力の維持などの効能があるとされています。
その他にもビタミン類やカリウム、カルシウム、鉄分など、たくさんの栄養素が含まれています。 

主な栄養素と効能・効果

βカロチン
抗発がん作用
髪、肌、粘膜の健康維持
視力の維持
ビタミンB1
皮膚や粘膜の健康維持
エネルギー代謝(ダイエット効果)
ビタミンC
風邪予防
疲労回復
肌荒れ防止
鉄分
貧血改善
カルシウム
骨や歯を丈夫にする
骨粗鬆症予防
カリウム
ナトリウム(塩分)排出による高血圧予防
むくみ防止

視力、ダイエットに良いと知ると、テンション上がります。マニアック野菜ですが進んで取りたいものですね。

お仕事の近況

もう1年以上経つんですね…
サイト制作も任せてもらえるようになりました。LP(ランディングページ)もパンフレットもCMS構築も。

デザイナーってマルチタスクを要求されるんですね。コード、サーバの知識、広告のルール、印刷データの作成、現場で全て覚えます。スピーディに出来て当たり前の風潮。
おばあちゃんはモタモタしている挙句、新人なのでアップアップ状態です。
みんなスムーズにこなせているのかなぁ…

何度も疲労とハードルの高さで挫折しそうになりながらのタスク完了。

人生歴は誰よりも超ベテランなのにデザイナー歴は超新人。
最近Wordのサイドに表示される履歴機能知って「何、それ!?」といった感じ。

そんな状態ですが、何とか続いております。はい…。。。

還暦お婆ちゃんのデザイナー修行

秋も深まり寒くなってきた昨今。
近所の畑の直売所で秋のマニアック野菜を購入してきました。

f:id:kanrekijyosi:20201108030602j:plain

  • ズイキ3本...100円
    サトイモの茎です。お店ではまず見ませんね。
    乾燥したものは「芋がら」としてスーパーで売られています。
    シャキシャキとした歯ごたえで味はクセがなく、汁物、鍋、炒め物、何でも合います。
  • オロ大根3本...90円
    葉っぱだけ成長した大根に見えますが、よくわかりません。
    葉は大根特有の苦味はなく、ほうれん草や小松菜のように使えます。
  • ヤーコン4本...200円
    食物繊維が多くカロリーが低いイモ類で一時期ダイエットで注目されました。 今はスーパーで見かけることはほとんどないです。ちょっとお高めでした。
  • ゆず4個...100円
    マニアック野菜ではないですが、不揃いで傷がついてます。
    果汁は薬味で、搾かすはお風呂で再利用。いい香りでした。

f:id:kanrekijyosi:20200210141914p:plain還暦ばあちゃん仕事の近況

入社してから5ヶ月目になります。
デザインの修正も少なくなりましたが、まだまだ未熟者です。
ようやく会社の空気感が掴めるようになったというか…

従業員は多いのですがほとんどテレワークなので、連絡している相手に滅多に会うことはありません。

入社時は世間が自粛状態で仕事は比較的暇でした。
徐々に仕事が増えてきて、先月くらいからメチャメチャ忙しくなってきています。お国のGoToキャンペーン政策や行事の緩和で。

おばあちゃんの仕事はディレクターさんが進行を仕切ってくれます。
スポットの依頼が来て、案件が重なって、追加依頼も来て、クライアント側の変更が同時に出て頭がクラクラ。
まずは頭をカラにして、ディレクターさんに優先順位と納期を確認。スケジュールを組み直してもらいます。
そして校了をもらえてホッとしたら次の案件へ。

最初はバナーデザインがメインでしたが、最近はちょっとしたwebページのデザインも任されるようになりました。

f:id:kanrekijyosi:20200210141914p:plainおばあちゃんの手作りサイト作ったよ

仕事ではデザインがメインですが、コーディングも好きなのでお休みは練習でサンプルサイト作ってます。
チクチクと作業を積み重ねて、ようやくサンプルサイトが完成しました。

サンプルサイト

▶ ︎おばあちゃんの手作りサイトはこちら

コンテンツの内容はおばあちゃんの畑事情。
トップ1pと下層ページ4p、流行りのGoogleマテリアルデザインを意識して作りました。

マテリアルUIコンポーネントCSSフレームワークbootstrap-material-designをダウンロード。

bootstrapは全体の枠組みのcontainerとrowを、コンテンツはcardを適用。細かいCSSとjsは自分で設計。

ファーストビューのスライドはフツーのだとつまらないので、ズームアップしながらフェードで切替わる仕組みを作りました。
ただページャーを連携させるのは面倒だったのでページャーをクリックしても何も起こりません。

コーディングが済んだらhtmlをphpへ組替えて、headerとfooterをインクルードしました。
そうするとnavとかのリンクが1pで完結するのでメンテが楽になります。
ただ、titleやnavのアクティブはページによって変えたいのでURLのパスを取得してページに合わせて条件分岐で切り替えています。

//パス名取得
$pass = $_SERVER['REQUEST_URI'];
//初期値書出し
for($i = 0; $i < 5; $i++){
    $act[$i] = 'nav-item';
}

if($pass === '/hatake/index.php' || $pass === '/hatake/'){
    $head_title = '草ぼうぼう サンプルサイト'; 
    $act[0] = 'nav-item active';
}
if($pass === '/hatake/works.php'){
   $head_title = 'works | 草ぼうぼう サンプルサイト';
   $act[1] = 'nav-item active';
}
if($pass === '/hatake/access.php'){
   $head_title = 'ACCESS | 草ぼうぼう サンプルサイト';
   $act[2] = 'nav-item active';
}
if($pass === '/hatake/recruit.php'){
   $head_title = 'RECRUIT | 草ぼうぼう サンプルサイト';
   $act[3] = 'nav-item active';
}
if($pass === '/hatake/contact.php'){
   $head_title = 'CONTACT | 草ぼうぼう サンプルサイト';
   $act[4] = 'nav-item active';
}

あとPhotoshopCCも使いたくてお絵描きしました。
Psは会社で毎日さわってますが、お絵描きで使うツールが全く違います。
プロ仕様のグラフィックソフトは多機能ですね。

 

休みはwebのコーディングやデザインの練習、お絵描きもしたいし写真も撮りたい。

畑は時間がないので草ぼうぼうの放置状態。
家事もサボってるので田舎では不良お婆ちゃんです。

60歳お婆ちゃんはデザイナー修行中

早いもので、もうお盆休みです。
畑で育てたトマトも収穫期に入りました。

My畑の収穫物

My畑の収穫物

山の中の田舎に住んでいるので、都会の会社には往復5時間近くかけて通っています。

f:id:kanrekijyosi:20200210141914p:plainお婆ちゃんのド素人ぶり

50歳前はデザイナーというとファッションデザイナーしか知りませんでした。
50半ばからwebデザイナーというものを知ります。
JavascriptPHPCMS、聞いたこともありません。要はドのつく素人です。

お婆ちゃんはデザイン学校や美大に行ってないので、本格的にデザインを学んだことはありませんでした。

先々月、デザイン会社に入社して基本のできていないお婆ちゃんは、えらく苦労しています。
文字組というものができてなかったんです。

この文字組というものは、デザイナーにとっては基本中の基本、これが出来なければ仕事になりません。
逆に文字組が出来れば余白使いも上手くなり、プロとアマの違いはここで決まると言っても過言ではないかも。

文字組とはタイトル、キャッチ、説明文など、どう並べるかという作業で、書体、大きさ、順序を考えて、より感覚的、自然に飛び込んで見えるよう配置する事です。

例えば下のテキストですが、加工無し(ベタ組み)と整形したものを並べてみました。

文字組

何をしたかというと、文字詰め、カーニング 、サイズ変え、ウェイト、長体を施しています。

文字組

フォントには一字ずつ仮想ボディというスペースを持っています。字の周りに余白があるんですね。
余白は文字によってそれぞれサイズが微妙に異なります。
PCは仮想ボディを基準にして並べますが、そのままだとスペースが不揃いに見えることがあります。

人間の目は違和感を感じると、ストップしてそのまますっ飛ばしてしまうんですよね。
読みづらいものとして。
広告としては致命的です。

ただし、見せるキャッチや見出しと違い、読ませる長文は基本ベタ組みです。均等配置、約物、禁則処理は設定しますが。
この辺の知識は本で読んで知っていましたが、実際組んでみると知識だけではどうにもなりません。

自分の目で判断して実務で積み重ねていかないと、身に付かないんです。

f:id:kanrekijyosi:20200210141914p:plain初心に戻って、と言うか初心者同様だけど

まずはPhotoshop2020(CC最新版)の使い方をちゃんと学ぼうと決意しました。

PSのガイド、整列、グリッドは今まであまり使ってきませんでした。バナー制作はほとんどIllustratorに任せっきり。
レイアウト機能は圧倒的にイラレが使いやすいので。

家でも練習しようと思いAdobeのサブスクを申し込むことに。
Adobe製品が全部使えるコンプリートプランはお高いので単体プランにしようとしたところ、フォトプランというものが目に止まる。

単体プランは2,480円/月なのに、フォトプランはLightroomとPSで980円/月。

単体プランとフォトプラン

何でPS単体より、Lrがついてる方がメチャメチャ安いの!?

もしやフォトプランのPSは簡易版のElements?

調べてみるとプロ仕様で間違いない。何でも昔のキャンペーンがそのまま残っているとか。
大きな違いは単体プランは月ごとの契約ができ、フォトプランは年間契約のみ。
またキャンペーンの名残なので、いつ無くなってもおかしくないそうで。
それにしても半分以下の金額って…

早速フォトプランでのお申し込み。
PSの最新版だけDL。
グラフィック編集ソフトは重たいのでPCの負担にならないよう必要なものだけセレクトします。

なんか最新版、嬉しいね。OSのVerも気にせず使えるし。

改めてインターフェースも一通り触ってみる。
まずはデフォルトのままだと使いずらいのでワークスペースを自分用に並び替えて保存。スウォッチやグラデも拡張。
オリジナルで作り貯めていたブラシ、スタイル、アクションも追加。

ツール周りは変わっても、グラフィック概念は変わらないので慣れるのに時間はかからないかも。
画像解像度(ppi)、プリント解像度(ppd)、色の加減法(RGB)、加算法(CMYK)、チャンネル、マスク、レイヤー属性、ここら辺は昔ながらと同じ 。

休日はPSとデザインの練習に当てています。合間に畑仕事。
直ぐに完璧にはなれないので、まずは修正回数を減らすことが直近の目標。
時代は変わってもデザインの基礎は変わらないので、ここはしっかり文字組と余白使いを習得することに専念します。

 

60歳お婆ちゃんwebデザイナー目指して就職活動しました

f:id:kanrekijyosi:20200210141914p:plain2月から積極的に応募開始

還暦間近で一人前のwebデザイナーになりたくて、ほぼ独学で勉強。
今年の2月から転職サイトでwebデザイナーの募集をしている会社に応募を始めました。

都会のビル

就活の道のり風景

全部で年齢ぶんは応募したかもしれません。
20過ぎたあたりから応募した数がわからなくなりました。

2月に応募したのは全体の四分の三くらいだったと思います。
結果は全て面接にいたらずお断り。
エージェントや派遣も登録しましたが、全て不採用。

返答は応募した二時間後に、翌日に、もしくは連絡無しのまま。

こんなに即決で断られ続けると、覚悟していたとはいえさすがに辛い。

2月下旬、ここまでやってみて同じ結果しか出ないのは、このままじゃあダメってことなのかも。
ポートフォリオに設置した解析データを見るとアクセスされた痕跡は無かった。

中身も見てもらえないまま断られていたみたい。

ここは一旦、落ち着いてアピールの方法と今の状況を整理してみることにしました。

1月から3月は就活ラッシュ、転職人数が一年の中で一番多い時期。そしてwebデザイナーは人気職。
巷の聞いた話では「働き方改革」でwebデザイナーを目指している人が激増しているそう。
そういえば断られた理由に「応募者多数で忙しい」というのもいくつかありました。

私は年配なのに実務経験が少ない。口下手でどもるし、要領は悪いし、オマケにトロい。
ヨーイドン!でスタートすると必ずビリ。
徒競走だけではなく、何事もスタート地点は人よりも遅かったのです。

そんな私が就活競争でビリを走っても当然のこと。
人が競争に飽きてくる頃、ジリジリと追いついて結局最後は難なくクリアというケースが常だったので。
この特性に年齢制限はありません。

ただ好きなことには感覚で入っていけて、群を抜いて習得が早く周囲から驚かれたことが何度かありました。
あと集中力が半端じゃないそうです。これも人から言われました。

f:id:kanrekijyosi:20200210141914p:plainタイミングを待って仕切り直し

2月の就活はストップして3月に入ってからから再スタートすることにしました。
それまではポートフォリオを強化することに。

  • HTMLで作っていたポートフォリオPHPで組み直し
    header、footer、グローバルnavはrequire_once関数でインクルード化。
    CSSとjsファイルはREQUEST_URIでパスを取得して条件分岐、読込みを制御。
    jsはプラグインを使わず自作してイベント、スクロール値を取得し動きに変化をつける。(五月蝿くならないようデザインを配慮)

  • 他にも違ったデザインテイストの目的別サイトを作る
    新しいフレームワーク(Vue.js)をjQueryの代わりとして使ってみたサイト。
    jsで自作したコードをまとめたライブラリー風サンプルサイト。
  • PDFのポートフォリオも作る(印刷用)
    書面として使えるポートフォリオも作る。
    サイトには載せていない制作物をDTPデザイン風にして15ページくらいでまとめる。
  • ポートフォリオDL専用クラウドストレージを用意
    PDFのポートフォリオを置いておくクラウドストレージを用意。
    画像が多くファイルサイズが大きい為メールには添付できない。応募先の会社にパスワードとIDを記載してDLしてもらうようお願いの文面を入れる。
    Freeのストレージもあるけど制約もあるしインターフェースもゴチャゴチャしてわかりずらい。

    何よりも広告が入るのが嫌で自作しました。

デザインサンプル

秋をテーマに素材も自作したサンプルサイトの一つ

3月に入って、ポートフォリオもできた頃に再度就活スタート。

アクセス解析してみると今度はちゃんと数字が出ていました。

どうやら就活ラッシュのピークが過ぎて会社も余裕が出てきた感じです。

やはりタイミングの問題が一番の原因だったみたい。

面接の連絡ももらえて、2月のペースで応募するとスケジュールがバッティングしそうなので応募は減らして日程調整。

あと登録した転職サイトでオファーやスカウトも届くようになりました。
2月は全然なかったのに何で???

f:id:kanrekijyosi:20200210141914p:plain面接にて

自然体とまではいかないけれど特に構えることはしませんでした。緊張はしましたけど。
見えを張ったり嘘はかなりの確率で見破られているものです。
人って初対面は人柄をよく探って観察しあってる。仕草、言葉、表情、どんなタイプの人かって。

私は決して見栄えのいい人間ではありません。
でも、マナーを守って不快なことをしなければ大体は大丈夫。(たまにトロい人をみるとイライラする人はいますが)

向けられた質問にも自分の言葉で正直に応えるようにしています。
なぜwebデザインをやりたいのか、主婦がどうして会社勤めをしたいのか、口下手でどもりながらも説明します。
面接官の人がうなずいてくれると、伝わったと思いホッとします。

ただ、ほとんどの会社でこんな質問が出ました。
「あなたよりかなり年下の人と一緒の仕事になりますが、気になりませんか?」

仕事になれば年齢なんて関係ないじゃん、と思っていたのでそう答えていました。
複数回そんな質問を繰り返されるうちに、ある日こんなことが脳裏によぎる。

もし自分より20も30も年上の人が新入社員として入ってきたら?

80歳や90歳の人と、どういう会話したらいい…?

あ、
やっぱり気を使うかも。。。

それから自分の年齢、かなり意識するようになってしまいました。

f:id:kanrekijyosi:20200210141914p:plain新型コロナウィルス緊急事態宣言の前

東京都で緊急事態宣言が発令される前、応募したデザイン会社から内定のお知らせをいただけました。しかも正社員で。

ホントにこんなお婆ちゃんでいいの?
断られ続けていたので感動もひとしおです。
ここの会社、面接はとても感じが良くて笑いが出ながら会話が進んでいた所でした。

実は採用通知は他にもあったのですが、アルバイトでしかも時給が前回のパートよりも500円も安い…
せっかく勉強してきたのに安売りはしたくなかった。
いろいろ悩みながら「もう少し探そう」と決め、そこは辞退させてもらいました。

挫けずに探し続ければ、希望どうりの仕事に出会えることってあるんですね。
諦めなくて本当に良かったです。

ただその直後、緊急事態宣言が出て出勤日が決まらずにしばらく待機状態になってしまいました。
世が世なので仕方ないです。

待ち時間は勉強を続けながら歯医者さん行って歯垢取って健康メンテ。
あと畑でトマト育てたり。

コロナ対策も緩和傾向に入ったつい先日、出勤日の連絡をいただきました。

入社はほんの入り口で、大変なのは会社に入ってからです。
臆病になりすぎず配慮しながらも、自分の仕事ができるよう素直に努めていく所存です。

トマトの子供

 

60歳お婆ちゃんはホームページのお勉強してます

ホームページ作成の為にいろいろ勉強しています。
そんな最中、今まで見たこともない大きなクモに出くわしました。

脚も入れるとCD1枚弱くらいの大きさ。恐怖で身が氷るような感覚に。
蜘蛛は大の苦手ですが、この衝撃的なビジュアルを残したくて怯えながらデジカメを撮る事に。
世間から「不快害虫」として認定されてるので、準備なく見せられると不快に思われるかもしれません。
そこで、見る見ないの選択ができるようスライドの機能をつけてみました。

f:id:kanrekijyosi:20200210141914p:plainアシダカ軍曹

※矢印の円形部分をクリックすると画像が現れます。

f:id:kanrekijyosi:20200601153910j:plain
f:id:kanrekijyosi:20200601154004p:plain

やっぱり隠す

この大蜘蛛の正体はアシダカ蜘蛛。
アシダカ軍曹と呼ばれているそうです。

なんと軍曹の好物はゴキブリ。
夜な夜なゴキブリを捕まえて、多い時は一晩に20匹捉えることも。
ゴキブリだけでなく、ハエやネズミといった害獣も食べてくれる。
糸を貼ることはなく徘徊性で、毒は持っていないし人を襲うこともない。もちろん人の食べ物にも手を出さない。

しかも見かけによらず、動きはゴキブリより早いらしい。
ゴキブリが普通車だったら、軍曹はF1並みのスピードだという。

どうもここのところゴキブリが少ないなと思っていた。
軍曹のおかげだったのかな…?エコで無料のゴキブリ駆除剤。

だから、地方によっては「家の守り神」と呼ばれているそう。
そしてゴキブリを食べ尽くすと、その家からは去ってくれるらしい。

調べてみると何とも有難い存在だけど、やはり見かけが…

そんな軍曹はネットで購入もできるそうで。
1,500円前後でヤフオクに出展されていました。
飼う人、いるんですね…。

数日後、軍曹の子供らしき2,3cmの同じ型の蜘蛛も発見。
1人前の軍曹になる前だから伍長かな。
どうやら我が家には軍曹の家族が暮らしているようで。
同居するのは構いませんが、どうか遭遇することなく平和な毎日が過ごせるよう願ってる次第です。

f:id:kanrekijyosi:20200210141914p:plainスライドのコードについて

ハテナブログの記事入力欄はHTML入力できるので、javascriptも試してみました。
jQueryは効かなかったので、DOMで組み込んでいます。

四角のピースに当たるliはjsから書き出すと、変更しやすくなります。


<script>
const photo = document.querySelector('#wrapper2');
const start = document.querySelector('#start');
const close = document.querySelector('#close p');
let box = document.querySelector('#wrapper2 ul');   

//li書出し
for(let i=0; i < 8; i++){
    let box = document.createElement('ul');
    photo.appendChild(box);       
    box.classList.add('box');
    for(let i=0; i < 10; i++){
        let boxItem = document.createElement('li');
        box.appendChild(boxItem);
        boxItem.classList.add('item');
    }
}
//li要素配列で取得
let item = document.getElementsByClassName('item');
const max = item.length;
const speed = 50;
//順番にliを消していく
start.addEventListener('click',function(){
    start.style.display = 'none';
    for(let i=0; i < max; i++){
        setTimeout(function(){
        item[i].style.opacity = '0';
        }, speed*i);
    }

    setTimeout(function(){
        close.style.display = 'block';
    }, speed*(max-10));

});
//逆再生
close.addEventListener('click',function(){
    close.style.display = 'none';
    let la = 0;
    for(let i=max-1; i >= 0; i--){
        setTimeout(function(){
            item[i].style.opacity = '1';  
        }, speed*la);
        la++;
    }
    setTimeout(function(){
        start.style.display = 'block';
    }, speed*max);
});
</script>

createElementでタグを生成し、classList.addでclassを付与します。 getElementsByClassNameで全部のピース要素を配列形式で取得して、出力はsetTimeoutでタイミングをずらしながら、for文で処理を繰り返し。

60歳お婆ちゃんプログラムに挑戦してみた

60歳を間近にウェブデザイナーを目指して独学で勉強しているお婆ちゃんです。

去年の暮れからphpを勉強して、初めてシステムらしきものを作ってみました。

・やりたいこと プチ・クラウドストレージ

ファイルをどこからでもアップ、保管してダウンロードもできる。
セキュリティも兼ねてIDとパスワードでログイン形式にする。

まずはパワーポイントでサイトの系図を設計しました。
Excel、Word、パワポは商工会議所で習いたてホヤホヤです。
それぞれ基礎編までクリアして一ヶ月半くらいかかりました。
全部で5万円くらいはかかったかな。

f:id:kanrekijyosi:20200520075207j:plain

次は手順を考えてイメージを具体化

これはAdobeのXDを使ってみました。
もうお金がないので無料版。
操作も簡単で、習わなくても感覚的に作れちゃうので便利です。
ページ自体はシンプルにしたかったのでフォントだけで作りました。
コードを書くのもAdobeの無料Brakets。Adobeドップリ。

f:id:kanrekijyosi:20200210141914p:plainログインページ

パスワードとIDはここで決めてます。
空文字はNGの条件も設定。

TOPデザイン

・login.php


//XSS
function html_escape($word){
    return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
}
$logid = '';
$pass = '';
$messege = '';

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    //isset入れると空文字条件が効かない
    $logid = $_POST['logid'];
    $pass = $_POST['pass'];
    $logid = html_escape($logid);
    $pass = html_escape($pass);
    
    //IDとパスワード設定
    if($logid === '' && $pass === ''){
        session_start();
        $_SESSION['login'] = 1;
        //ファイル一覧へリロード
        header('Location: file_list.php');
        exit();
    } elseif ($logid === '' || $pass === ''){
        $messege = '<p class="notice">IDとパスワードを空文字にしないで入力してください</p>';
    } else {
        $messege = '<p class="notice">IDかパスワード、もしくは両方違います</p>';
    }
}

?>
<!doctype html>
   <!-- headerインクルード -->
    <?php require_once(dirname(__FILE__).'/header.php'); ?>
<div id="wrapper">
 <header>
 <div id="titleVar">
 <h1>ファイル預かり処 マイ保管庫</h1>
 <p class="tx14">ログインページ</p>
 </div>
 <div id="topvew">My keep folder</div>
</header>
<main id="topMain">
 <form class="clearfix" action="" method="post">
  <label>ログインID</label> 
  <input name="logid" type="text" />
  <label>パスワード</label> 
  <input name="pass" type="password" />
  <p id="logBtn"><input type="submit" value="ログイン" /></p>
  <?php echo $messege; ?>
 </form>
</main> 
<!-- footerインクルード --> 
<?php require_once(dirname(__FILE__).'/footer.php'); ?>
</div>

f:id:kanrekijyosi:20200210141914p:plainファイルリスト一覧ページ

アップロードとダウンロード、削除ファイルの3つのform
アップロードは同一ページで処理
ダウンロードはチェックページに飛ばしてリロード処理
削除ファイルは確認ページを別に作ってpostデータを渡す

ちなみにダウンロードと削除ファイルはタブ切替。
フォルダーの中身は一緒でアップすると自動でリストが増えて、削除すると減っていきます。

ファイル一覧ページ

・file_list.php


//ログインしていないとアクセスさせない
session_start();
session_regenerate_id(true);
if(isset($_SESSION['login']) === false){
    header('Location: un_login.php');
    exit();
}

function html_escape($word){
        return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
    }
$up_file = '';
$messege = '';
$select_file = '<p id="take">ファイルを選択して下さい</p>';
$restore = '';
$up_before = 'upBefore';//非表示css
$filename = '';

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    $up_file = $_FILES['file_up'];
    $up_file['name'] = html_escape($up_file['name']);
    $up_file['name'] = strtolower($up_file['name']);//英小文字に変換  
    //var_dump($up_file['name']);
    
    $extension = Pathinfo($up_file['name'],PATHINFO_EXTENSION);//.以降の拡張子を重複しないよう整形
    $filename = Pathinfo($up_file['name'],PATHINFO_FILENAME);
    $filename = str_replace('.', '', $filename);//ファイル名に.があったら除去
    
    //ファイルがNGの場合条件処理
    if($up_file['size'] > 30000000 ){
        $messege = '<p id="caution" class="notice"><i class="fas fa-info-circle"></i>ファイルサイズが容量を超えています</p>';
        $up_before = 'upBefore';
        $restore = '<a id="restore" href="file_list.php">こちらからUPし直してください</a>';
        $select_file = '';
        //phpよりエラー表示を出すときsubmitのvalue値を空文字に
    } else {
        $messege = '';
        $up_before = 'upAfter';
        //fileをアップする関数
        move_uploaded_file($up_file['tmp_name'], './up_file/'.$filename.'.'.$extension);
    }
}

    //upフォルダの中身
    $dw_items =  glob('./up_file/*');//DL用、同じでも変数変えないとエラーになる
    $del_items = glob('./up_file/*');//削除用、grobは配列形式でファイルパスを取得
?>
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ファイル一覧 | ファイル預かり処・マイ保管庫</title>	
<!-- headerインクルード -->
<?php require_once(dirname(__FILE__).'/header.php'); ?>
<div id="wrapper">
    <header>
       <div id="titleVar">
          <h1><i class="fas fa-circle"></i>ファイル預かり処 マイ保管庫</h1>
           <p id="logout"><a href="logout.php">ログアウト</a></p>
       </div>       
       <div id="topvew">My keep folder</div>             
    </header>
    <main id="main">
        <h2 class="pageTitle">ファイルアップロード</h2>
     <!-- ファイルup -->
        <form id="upBox" action="" method="post" enctype="multipart/form-data">
              <p class="notice">※ファイルsizeは1つにつき30MBまで、名前は英小文字で</p>
              <!-- UPし直し表示 -->
              <?php echo $restore; ?>
              <p id="<?php echo $up_before; ?>">ファイル「<?php echo $filename; ?>」はアップされました。続けてUPできます</p>
              <label for="up">
                  <!-- ファイルを選択ボタン -->
                  <?php echo $select_file; ?>
                  <input id="up" type="file" name="file_up">
              </label>
              <p id="send"><input type="submit" value=""></p>
              <!-- エラーメッセージ -->
              <?php echo $messege; ?>
        </form>
      
      <div id="fileBox">
          <p id="fileCount">ファイル数<?php echo count($dw_items); ?>項目</p>         
          <h3 class="selectFile" id="dowTab">DL用ファイル一覧</h3>  
          <form id="dowList" action="download_file.php" method="post">
             <!-- 飛び先でLocation リダイレクト処理-->
              <ul>
                 <?php if(count($dw_items) === 0): ?>
                    <li>まだファイルはありません</li>
                    <?php else: ?>
                      <?php foreach($dw_items as $items): $dw_name = Pathinfo($items,PATHINFO_BASENAME); ?>                   
                     <li><input type="radio" name="dowl" value="<?php echo $dw_name; ?>"><?php echo $dw_name; ?></li>                     
                      <?php endforeach; ?>
                  <?php endif; ?>
              </ul>
              <p class="notice">※左のラジオボタンにチェックしてダウンロードボタンをクリックしてください</p>
              <p class="pibtn"><input type="submit" value="Download"></p>
          </form>
                   
          <h3 class="selectFile" id="delTab">削除用ファイル一覧</h3>
          <form id="delList" action="delete_confilm.php" method="post">
              <ul>
                 <?php if(count($dw_items) === 0): ?>
                    <li>まだファイルはありません</li>
                    <?php else: ?>
                      <?php foreach($del_items as $items): $del_name = Pathinfo($items,PATHINFO_BASENAME); ?>
                         <li><input type="checkbox" name="del[]" value="<?php echo $del_name; ?>"><?php echo $del_name; ?></li>  
                      <?php endforeach; ?>
                  <?php endif; ?>
              </ul>
              <p class="notice">※左のチェックボックスを選択(複数可)して確認ボタンをクリックしてください</p>
              <p class="vibtn"><input type="submit" value="削除確認"></p>
          </form>
      </div><!-- //id="fileBox"-->
               
    </main>  
<!-- footerインクルード -->
<?php require_once(dirname(__FILE__).'/footer.php'); ?> 
        
 

input type="file"は特殊でデフォルトのボタンを使うのはビジュアル面で抵抗があったのでカスタマイズしました。

ファイルが選択されたらボタンがファイル名に変わって、エラーだったら上にメッセージ表示。
OKだったらtype="file"ブロックは非表示になって、type="submit"にすり替え。
見た目は一緒のボタンです。
ファイルアップが成功したらボタンの上にファイル名が表示して下のリストに追加といった仕様。

ただ、ファイル選択時はsubmitボタンは押されてないのでphpでの処理が難しい。
そこでjsのchangeイベントを活用。
ここは頭がこんがらがりました。phpとjsとcssのトリプル連携。

javascript

    jQuery('#up').on('change',function(){
            const upfile = jQuery('#up').get(0).files;
            console.log(upfile);
            const fileName = upfile[0].name; 
            //file選択をsubmitにすり替え
            jQuery('#take').css('display','none');
            jQuery('#send').css('display','block');
            jQuery('#send input').val(fileName);
        });

f:id:kanrekijyosi:20200210141914p:plainダウンロードチェックページ

ダウンロードのコードはどうしても分からなかったのでググって動いたものをコピペさせてもらいました。

それまではダウンロードできても開けられなかったり不具合続出でした。
ここのコードが一番難しい。
今の段階では理解できなかったのですが、そのうち自分でも組めるようになりたいです。

参考コードはこちら

・download_file.php


//ダウンロードチェック
session_start();
session_regenerate_id(true);
if(isset($_SESSION['login']) === false){
    header('Location: un_login.php');
    exit();
}

function html_escape($word){
        return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
    }
$dowload_file = $_POST['dowl'];
$dowload_file = html_escape($dowload_file);

//var_dump($dowload_file);

//ダウンロードできなかったのでネットから拾ってきた

    function download($pPath, $pMimeType = null){
    //-- ファイルが読めない時はエラー(もっときちんと書いた方が良いが今回は割愛)
    if (!is_readable($pPath)) { die($pPath); }

    //-- Content-Typeとして送信するMIMEタイプ(第2引数を渡さない場合は自動判定) ※詳細は後述
    $mimeType = (isset($pMimeType)) ? $pMimeType
                                    : (new finfo(FILEINFO_MIME_TYPE))->file($pPath);

    //-- 適切なMIMEタイプが得られない時は、未知のファイルを示すapplication/octet-streamとする
    if (!preg_match('/\A\S+?\/\S+/', $mimeType)) {
        $mimeType = 'application/octet-stream';
    }

    //-- Content-Type
    header('Content-Type: ' . $mimeType);

    //-- ウェブブラウザが独自にMIMEタイプを判断する処理を抑止する
    header('X-Content-Type-Options: nosniff');

    //-- ダウンロードファイルのサイズ
    header('Content-Length: ' . filesize($pPath));

    //-- ダウンロード時のファイル名
    header('Content-Disposition: attachment; filename="' . basename($pPath) . '"');

    //-- keep-aliveを無効にする
    header('Connection: close');

    //-- readfile()の前に出力バッファリングを無効化する ※詳細は後述
    while (ob_get_level()) { ob_end_clean(); }

    //-- 出力
    readfile($pPath);

    //-- 最後に終了させるのを忘れない
    exit;
}

//選択されたファイルがあったらダウンロード、なかったらそのままリダイレクト
if(isset($_POST['dowl'])){
    download('./up_file/'.$dowload_file);
    header('Location: file_list.php');   
} else {
   header('Location: file_list.php');
}

f:id:kanrekijyosi:20200210141914p:plain削除確認、完了ページ

削除だけは誤って消してしまって後悔しないように、確認してからの動線にしました。

確認・完了ページ

・delete_done.php


//ログインしていないとアクセスさせない
session_start();
session_regenerate_id(true);
if(isset($_SESSION['login']) === false){
    header('Location: un_login.php');
    exit();
}

function html_escape($word){
    return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
}

$delete_file = '';

//POSTで渡されたファイルを削除
if(isset($_POST['check'])){
    for($i = 0; $i < count($_POST['check']); $i++){           
        unlink('./up_file/'.html_escape($_POST['check'][$i]));
        //削除ファイルli書出し
        $delete_file .= '<li><i class="far fa-file"></i>'.html_escape($_POST['check'][$i]).'</li>';
    }    
}

?>
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ファイル削除完了 | ファイル預かり処・マイ保管庫</title>
<!-- headerインクルード -->
<?php require_once(dirname(__FILE__).'/header.php'); ?>
<div id="wrapper">
    <header>
       <div id="titleVar">
          <h1><i class="fas fa-circle"></i>ファイル預かり処 マイ保管庫</h1>
           <p id="logout"><a href="logout.php">ログアウト</a></p>
       </div>       
       <div id="topvew">My keep folder</div>             
    </header>
    
    <main id="confiBox">
        <h2 class="pageTitle">ファイル削除完了</h2>
        <p class="confiText">以下のファイルを削除しました</p>
        <ul>
            <?php echo $delete_file; ?>         
        </ul>
        <p id="toListpage"><a href="file_list.php">ファイル一覧ページへ</a></p>
    </main>
     
<!-- footerインクルード -->
<?php require_once(dirname(__FILE__).'/footer.php'); ?>
    

完成したのであとは実際のサーバに上げて動作確認。

動いた時は大感動。
あれ?
でもアップできないファイルがある。

色々試して、どうやら日本語名のファイルはアップできないみたい。

XAMPP開発時では日本語のファイル名でも大丈夫だったんですけどね。
そういえば日本語とサーバの相性は良くないと昔から言われてました。

とりあえず注意書きに日本語NGと追加して応急対処。
preg_matchで条件設定した方がいいのかなと思ったりしています。

ひとまず、これで完成として使い込んでみようと思ってます。

お婆ちゃんのweb制作奮闘記でした。

60歳のお婆ちゃんはWEBデザイナー になりたい

初めまして、もうすぐ60歳を迎える還暦女子です。

現在、WEBのお仕事求人に応募して仕事を探しています。

 

最近、パソコンを触ったら面白くてハマってしまいました。

 

私の住んでいる所は、すごい田舎で周りはお年寄りが沢山います。パソコンのパの字が出ようものなら皆んな走って逃げ出すほどのハイテク嫌い。当然スマホを使っている人もいません。でもコンビニは乱立してます。

 

そんな文明の止まった村でもひょんなことからパソコンに触る機会がありました。

そこから非常に興味が出てきて、ぜひホームページを作って仕事にしてみたいと強く思うように。

仕事をするなら、エクセルやワードは使えるようにならないとダメみたいですね。

今まで持っていなかったスマートフォンも買いました。

 

最初はPCを独学で触ってみましたが、覚えることが沢山あるのでスクールへ行くことを決意。

商工会議所でエクセルとワードを教えてくれることを知り、早速学習しに。

  

エクセルの教科書

 

️ 1日目

 最初はすぐにオフィス系ソフトにさわらせてもらえませんでした。

パソコンの基本操作ができないとダメとのこと。

ビデオ視聴の後、職員のチェックを通過しないと目的の講座に辿り着けません。

「PCの基本操作はわかります」と言っても信じてもらえませんでした…

1時間1,200円かかります。1,200円は初期費用で必要経費と自分に言い聞かせることに。

 

e-ラーニングビデオの内容

・パソコンはテレビと同じ

・マウスはV字型に指を置く

・マウスは何故マウスというのか

・正しい姿勢云々…

講座内容と料金システムについての説明ビデオも見る

 

2時間目にようやくワード入門編に入れました。

 

3時間目にワード入門編クリア。

4時間目エクセル入門に突入。

初日は4時間の授業をとりました。授業料4,800円。

 

️2日目

1、2、3時間目はエクセル入門学習。普通に入力していれば難しいことはなかったです。最後にテストをやって職員のチェック。

ミッションクリア。4時間目から基礎編へ。

2日目も4時間の授業をとりました。

 

️3日目

1〜4時間、今日はエクセル基礎編

関数面白い!

if文が関数になって第1引数に比較演算子など使って条件設定、第2引数はTRUE真の処理実行、第3引数はFALSE偽の処理実行。最後に;付けたくなる衝動を抑える。

 

相対参照、絶対参照、ファイルパスみたいなものかな。ローカル環境かurl指定か。 

データベースの機能があるので絞り込みやソートの方法も学習。

phpMyAdminより簡単な気がする。リボンというメニューバーらしきものから操作。

条件付き書式、フィルターもやりました。

 

基礎編はほとんど 進んだので次の授業でクリアできるかも。

次はパワポに進みたい。

3日目も4時間の授業をとりました。

 

と、ここまでが現在の進捗状況。

 

ちなみに管理画面からCSSでUIを一部カスタマイズしてみました。PC版は変更できたけどスマホはデフォルトのままみたいです。