読み込み中

岡田ポートフォリオ

まいポートフォリオサイト2021.10

スマホメニュー開く

SITE NAME : ORION

閲覧有難うございます。こちらは個人のポートフォリオサイトです。 WEBにおいてはデザイン&コーディング、Wordpressオリジナルテーマの作成、DTPは折りパンフレットなど制作しております。

デザインやWEBコードの世界は難しいことだらけで、まだまだ至らない点もありますが、いろんなイメージを表現したいと思い勉強しながら制作に携わらせてもらっています。

サンプルサイトについて

QRコード生成サイト
ライブラリを使ってQRコードジェネレーターを作りました。フォーム入力値をパラメータとして持っていき一旦jsonで保存します。pngかsvgの選択でパネル表示とDL先を分けるようPHPで組みました。

パスワードジェネレーター
ランダムな文字列を組み合わせて、パスワード生成システムを作成しました。

MTサンプル畑サイト
Movable Typeのオリジナルテーマです。bootstrapのテストとして作ったhtmlにMTタグを組み込みました。

DBシステムテストサイト
ファミレスメニューをモデルにしたデータベースのテストです。MySQLとPHP、jsで組んでいます。管理画面から入力したデータをメニュー覧に表示し、注文リスト作成の一連を作りました。

CONTENTS

実績と連絡先については個人情報も入ってますのでログイン形式にしています。
お手数ですが、お知らせしましたIDとパスワードをご入力ください。

APPENDIX

自作GIFアニメ

ちょっとしたアニメを作ってみたかったので一から自作しました。
キャラを描き起こして手、足、頭など各部分をレイヤーでパーツ化、Photoshopのタイムラインで作成。
画像をクリックすると動画が始まります。

STOP

インコアバター生成ツール

javascriptでアイコン作成ツールを作りました。

インコアバター生成ツールへ

PHOTOS

暇をみては写真撮影をしています。
ファーストビューのオリオン座も自宅のベランダから撮りました。
夜中、オリオン座がとても綺麗に出ていたので、三脚を持ち出してカメラをセット。
肉眼では見えなかったのに、撮影した画像の中には無数の星が写っていたことに驚きです。
星自体はそのままで、色補正とエフェクトを少しPhotoshopで加工しました。

flickrというサイトに撮りためてきた写真をアップしています。よかったらご覧になってもらえると嬉しいです。
flickr

※画像をクリックすると拡大画像が表示されます

  • 写真

    {{items.photoNum}} {{items.photoText}}

写真 前へ 次へ 閉じる

このサイトについて

デザイン、コーディング、フルスクラッチで組みました。
最近、デザイン作成はAdobe XDというプロトタイピングツールを使っています。操作性も良いし、軽い上サクサク動くのでWEBデザインの他、PDFデータ、説明図やマニュアル作成にも重宝したりしています。なんといってもフリーなのが有難い。Adobeにしては珍しく大盤振る舞いと感動してる反面、いつ有料になるかとヒヤヒヤ感も。

CMSを使うまでもない小規模サイトなのでhtmlでコーディングした後はPHPで条件分岐を入れて、各ブロックを切り分けています。
headerとnav、footerなどの共通部分はインクルードしておくと圧倒的にメンテナンスが楽になります。解析コードは共通化しておくと書き換えしたい時、一箇所で済みます。

Photosの写真一覧はVue.jsを使って一覧の書き出しをして、モーダルウィンドウはjQueryでコードを組みました。
今回の画像入れ替えはattrメソッドで値を取得し、次の要素を指定しています。
いつもはliの数から配列を作り、クリックしたインデックスで値を指定していましたが、配列を使わない方法を試してました。

※Vue.jsはHTMLチェックをすると文法エラーになります。案件により何を優先順位にするか変わると思いますので、そこは柔軟に考えて行こうと思っています。自分のポートフォリオは練習と実験を兼ねてますので色々試している次第です。

CODE VIEW

HTML

<div id="photoBox">
  <!-- li書出しはvue.jsを使っています -->
  <ul class="photoLi">
    <li v-for='items in photoBox'>
      <img v-bind:src="items.photoImg" alt="写真">
      <p class="photoTitle">{{ items.photoNum }} {{ items.photoText }}</p>
    </li>
  </ul>

  <!-- モーダルウィンドウ -->
  <figure class="photoPanel">
    <img id="panelImg" src="/image/pic01.jpg" alt="写真">
    <img id="prev" src="/image/prev.svg" alt="前へ">
    <img id="next" src="/image/next.svg" alt="次へ">
    <img id="panel_close" src="/image/panei_close.svg" alt="閉じる">
  </figure>
</div>
<!-- //.photoBox -->
<div id="overlay"></div>
            

js

    //写真list
    const thumbLi = jQuery('.photoLi li');
    const panelImg = jQuery('#panelImg');
    
    thumbLi.on('click',function(){
      panelImg.attr('src',jQuery('img',this).attr('src'));
    jQuery('.photoPanel').stop().fadeIn('slow');
    jQuery('#overlay').addClass('overlay');
  });
  //次へ
  jQuery('#next').on('click',function(){
    //現在の画像を取得
    let actImg = panelImg.attr('src');
    let nextLi;
    if(actImg == jQuery('.photoLi li:last-child img').attr('src')){
    //画像が最後のliだったら最初へ戻す
      nextLi = jQuery('.photoLi li:first-child');
    } else {
      nextLi = jQuery('img[src="'+actImg+'"]',thumbLi).parent('li').next();
    }
    panelImg.attr('src',jQuery('img',nextLi).attr('src'));
  });
  //前へ
  jQuery('#prev').on('click',function(){
    //現在の画像を取得
    let actImg = panelImg.attr('src');
    let prevLi;
    if(actImg == jQuery('.photoLi li:first-child img').attr('src')){
      //画像が最初のliだったら最後へ戻す
      prevLi = jQuery('.photoLi li:last-child');
    } else {
      prevLi = jQuery('img[src="'+actImg+'"]',thumbLi).parent('li').prev();
    }
    panelImg.attr('src',jQuery('img',prevLi).attr('src'));
  });
  //閉じる
  jQuery('#panel_close,#overlay').on('click',function(){
    jQuery('.photoPanel').stop().fadeOut('slow');
    jQuery('#overlay').removeClass('overlay');
  });
            
CODE VIEWを閉じる
トップへ