js/web

slick sliderの使い方 [3]

Posted on by cogumo

レスポンシブ対応について

slickのオプションで「responsive」というものがあり「breakpoint」を設定できてオプションを切り替えることができます。

私が実装したいと思っていたのはレスポンシブであり、スマートフォンの時は写真を縦長のものに変更するということでした。以前はスライド自体を差し替えていたのですがそれぞれの時に両方の画像を読み込んでしまって重くなってしまうのが気になっていました。

PCの時 横長画像

スマートフォンの時　縦長画像

cogumo design

<pictuire>タグと<source>タグを使って切り替えたいと思います。

<ul class="slides">
    <li>
    <a href="#">
      <picture>
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" />
      </picture>
    </a>
  </li>
  <li>
    <a href="#">
      <picture>       
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" />
      </picture>
    </a>
  </li>
  <li>
    <a href="#">
      <picture>       
      <source media="(min-width:768px)" srcset="PC用画像へのパス">
      <img src="スマホ用画像へのパス" /></a></li>
      </picture>
    </a>
  </li>
  </ul>

ここまでのサンプルはこちら

js/web

slick sliderの使い方 [2]

Posted on by cogumo

どうしてslickを使うのかときかれると色々オプションがあるからというのも大きな一つの理由です。色々説明されているサイトがあるのでしらべていけばよいのですが毎回調べるのが大変なので自分のためにもと思いよく使うものをざっくり

たとえば

・自動再生：autoplay（デフォルトはtrue)

・左右の矢印をカスタマイズ：arrows（デフォルトはtrue）

・スピード：speed（ミリ秒です！１秒＝1000ミリ秒）

・スライドをループ：infinite（デフォルトはtrue）

「slick　オプション」で検索すると色々出て来ます！

上記を実装したのがこちらです。

commmon.js

$(function(){
  $(".slides").slick({
  	autoplay: true,
    speed: 1000,
    prevArrow: '<button class="slide-arrow prev"></button>',
    nextArrow: '<button class="slide-arrow next"></button>',
    infinite: true,
});
});

common.css

/*arrow*/
button{
  margin: 0;
  padding: 0;
  background: none;
}
.slide-arrow{
  position: absolute;
  top: 50%;
}
.slide-arrow.prev{
  left: -40px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}
.slide-arrow.next{
  right: -40px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 15px solid #9C27B0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}

ここのサンプルはこちら

js/web

slick sliderの使い方 [1]

Posted on by cogumo

授業で質問されることが多いのがヒーローイメージに使うスライダーのこと。

ヒーローイメージ：webのファーストビューでバババーンと飛び込んでくる大きな画像ね！
（私は最近までメインビジュアルと言ってたんだけど。。。こういうみたい）

話は早速それましたが、いろんなスライダーを使って来ました。少し前までは「bxslider.js」を使っていたのですが、、今現在使っているのは「slick.js」！早速設定していきましょう！

-まずは表示させてみよう-

公式サイトより（http://kenwheeler.github.io/slick/）「get it now」をクリックして「Download Now」をクリックしてダウンロードします。

slick.js

 

解凍後以下のような階層にしましょう！

 

カスタマイズする場合のcssやjsはcommonファイルに書いていきます。

slicksliderの階層の考え方

index.htmlへの記述

<head>に

<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/common.css">

cssの読み込みの順番に注意してくださいね！

index.html スライドを入れたい部分に

<section>
  <ul class="slides">
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
</ul>
</section>

このマークアップはdivでもよいです。
今回は.slidesですがclass名はお好みでよいです。変更した場合はjsの指定しているclass名も要変更！

index.htmlの</body＞の前に以下を記述

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha384-/LjQZzcpTzaYn7qWqRIWYC5l8FWEZ2bIHIz0D73Uzba4pShEcdLdZyZkI4Kv676E" crossorigin="anonymous"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/common.js"></script>

common.jsへの記述

 

$('.slides').slick({ 

  });

common.cssへの記述

（このあたりはお好みで！）

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }
    img {
      width: 100%;
    }

    .slides{
        width: 70%;
        margin: 20px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

ここまでのサンプルはこちら

SNS/zoom/講師業

オンデマンド資料作り!　悪戦苦闘- no1-

Posted on by cogumo

大学にてオフィスリテラシーを毎年１クォーターに担当しているのだが今回のコロナの影響でオンデマンドにて教えることになった。

１クラス150人くらい。

毎年基本的な流れはできていてその時々でデザインや内容を変えている。microsoftのwordなど私の母でも使えるが、そうじゃなくてわかりやすく効率の良いそしてデザイン性も優れているドキュメントを求めている。

毎回の授業は90分。とにかくみんなの前で説明し操作し一斉に作業する。TAさんもだいたい４名ほどいてくれていろんな国の人もいるので言葉的も対応してもらっている。

という流れが、。。。。オンデマンドに。
専門学校の方の動画はみているのだが本当にわかりやすい。果たして私がそれを作れるのか。なにで作るのか？
撮影してプレミアを引っ張り出してとも考えたけどタイトなスケジュールで予算的にもちょっとな〜〜

というわけでそうだ！zoomの録画機能を使ってみよう！

パワーポイントのファイルを用意して画面共有機能で録画する。

う〜ん。右上にかすかにみえているのが私・・
今回はもうこれでいくしかないのでずっとここにうっすら登場もしくは
全面私のどちらかでした。

録画したものを聞いてみると「こどもですか__？？？」くらい声が高い。友人に相談して


  1. ゆっくり話す
  2. 実際に授業のように立って話す

と言われたのでやってみた。最初よりはましになる。

授業の途中wordを画面共有で開いて講義しているときはこんな感じ
（ちょい切れの私が右上に・・・）

3台本があるわけではないのでなども間違えるその度にやり直していたら本当に大変。
とうわけで続いて・・・久しぶりに
imovie登場〜〜

とにかく話して間違えたら自分で「カット」とか言いながら編集することにした。
久しぶりすぎてほぼ忘れている・・

とはいえなんとか「お疲れ様でした〜また次回がんばりましょう！」と学生に向かって最後の挨拶。
ガンバリマショウ＝私。

色々不備があり、、、がっくり

次は別の方法を考えなければ、、、、

子どもとインターネット

プログラミング始める前に〜ちょっとちょっと！！

Posted on by cogumo

2020年からプログラミングが授業に入ります。

新小学校学習指導要領におけるプログラミング教育

特に賛成ではないけど、実際に始まるので。。

Scratchやロボットプログラミング色々ありますが、、

「家に帰って、練習してみてくださいね。」

それは先生、困ります。

全家庭が子ども用にパソコンあるわけじゃない。

「はい。そんなこと言っていませんよ。ご両親のパソコンがあればそちらで〜」

そりゃ困りますよ

親のパソコンなんてセキュリティ甘々でしょ。

教育的に見せたくないサイトだってどんどん出てくるだろうし

家のパソコンだからって

パスワードやらカード番号なんか登録しっぱなし、ログインしっぱなしだったりへたしたら買い物もできちゃいますよ。

ipadでセキュリティ登録するの意外と面倒だったのに。。。

出会い系への１歩を親が加担するわけには行きません。

子ども用にパソコン買う方も、親御さんのパソコンを共有する方もまずは子どもが安全に使えるようにすることを徹底しなければ！

と、ちょっとキレ気味に思う昨今です。

 

イベント

女子のママにオススメ夏休み編！
株式会社　伊勢半本店ワークショップ

Posted on by cogumo

わたしと小学校２年生の娘がGWに発見していった伊勢半本店！

素敵でした。
私たちの素敵は凄くゴージャスでもなく、絶叫するくらいのびっくりする感動はないかもしれないけど、、、、紅をさすドキドキ気分の、娘を見てる私もドキドキ！

その伊勢半本店が夏にワークショップ！

http://www.isehanhonten.co.jp/museum/schedule.html

 ８月 3(木)
夏休みこども自由研究「紅ってなあに」
①10:30～12:00　②14:30～16:00
講師：当館エデュケーター
定員各5組10名（小学3・4年生とその保護者）・参加費無料9(水)
夏休みこども自由研究「赤色？黄色？？ 紅染めにチャレンジ！」
14:00～16:00
講師：当館エデュケーター
定員8組16名（小学生とその保護者）
参加費500円／組（ハンカチと和紙の染色体験）
※申込み者数が定員に達しました。18(金)
夏休みこども自由研究「紅ってなあに」
①10:30～12:00　②14:30～16:00
講師：当館エデュケーター
定員各5組10名（小学3・4年生とその保護者）・参加費無料
facebook/SNS

えっ？私愛知にいませんけど。。。【facebookログインの場所】

Posted on by cogumo

先日SNS講座やったばかりの私ですが、、、ちょっと朝方焦りました。

ログインの場所に愛知県？？？行ってないです。

大急ぎでパスワード変えました。

設定→セキュリティとログイン
もしここに、、、ログインしていない場所があったら右側の「…」のところからログアウトしてから、
パスワード変えてください！

セキュリティとログイン

facebook/SNS/イベント

「安全・快適SNS」講座を行います！

Posted on by cogumo

日時：2017年6月20日(火)10時～12時
場所    目黒区総合庁舎　２階 大会議室
目黒区上目黒2-19-15、中目黒駅徒歩7分
定員 ：  50名
参加対象： 区内在住・在勤・在学で現在子育て中の保護者の方
申込み方法：以下のURLから申込みを行ってください（先着順）
    http://www.kokuchpro.com/event/anzen/
申込期間：6月2日（金曜日）９時～6月18日（日曜日）
問合せ先： ほ・ねっとイベント事務局　NPO法人目黒子ども劇場
メール　honettomeguro@gmail.com
電　話　03-6303-0096（火・木曜日午前10時～午後２時のみ）
※　申込は電話・メールではお受けできません。

安全・快適SNSをどうして企画したの?

子育て、子ども関連のイベントのFACEBOOKページの運営に関わっていると、皆さんのたくさんの
「いいね！」がとっても嬉しいです。
ただ、多くの方々はプライバシーが丸見えで心配になりました。

・私はあなたの友達ではないけど、お子さんの写真が見れちゃう。
・私はあなたの友達ではないけど、あなたの友達を知れちゃう。
・私はあなたの友達ではないけど、ライフスタイルを知れちゃう。
などなど・・・

もちろん、それらをわかった上で投稿されている方もいます。
でもそうではなく、そんな風に見られていたことを知り、これまでの投稿を後悔した人もいました。

ソーシャルネットワークは様々な情報を共有でき大変便利な技術です。
今まで知り得なかったイベントに参加できたり、子育ての有益な情報を得ることも可能です。
ただ、ひとたび使い方を間違えると取り返しのつかないことになります。

大切なお子様、ご家族、ご自身を守っていくためにも、一度自分の設定を確認していただければと思い、
このたび企画するにいたりました。

web

icomoonを使ってみる

Posted on by cogumo

いつも「fontawesome」を使うのだが新境地で今回は

https://icomoon.io/

ってこのioは？

「.io」はイギリス領インド洋地域の国別コードトップレベルドメイン（ccTLD）

 

 

facebook/SNS

Facebookの友達一覧を非表示にする　

Posted on by cogumo / 0件のコメント

お友達のFacebookをみていて、「あれ～～このママと知り合いなんだ～」と。。。
そしてそのママの名前をクリックすると「この人こんな人ともあんな人ともつながっているのね～」。。。

Facebookでは、最初の設定では、友達リストは公開されているのです！

自分が誰と友達なのかを皆が知ることが出来てしまうのです！

メリットはそこからまた申請していたったりすればわが広がりますが、個人情報という感覚ではデメリットもたくさん。

友達リスト公開の設定は「公開・友達・自分のみ」の３つ

公開は誰でも私のFacebookでの友達リストを見ることができる。

友達は友達のみ私のFacebookでの友達リストがを見ることができる。

自分のみは自分だけしかみれない

パソコンで設定するのは簡単！

  1. Facebookで自分の名前をクリック！これで自分のプロフィールページに行きます
  2. fb1カバー写真の下の「友達」をクリック！すると登録している友達の一覧がでてきます。
    その右上に「プライバシー設定を編集」とあるのでクリック！
  3. 表示された画面より「公開」「友達」「自分のみ」「カスタム」から選択します。
    私は自分のみにしています。
    fb2

ここは検索すれば出てくるのですが、、、スマホからがなかなか。

スマホバージョン

  1. Facebookのアプリで普段は見ている方もブラウザ（iphoneならsafariとか）で「facebook」と検索してここからログイン
  2. 右上の三本線をタップすると自分の名前が出てくるのでこれまたタップ！
    こんな↓感じの画面がでてきます。
    この下のところの上向き矢印が付いてるところをタップ！！
    fb3
  3. 最初は★のマークの「お気に入りに追加」とかが表示されていますが、右の方に「スワイプ」！すると「デスクトップ用サイトを表示」というのがあります！
    fb4
  4. 表示された画面を少し下にいくと、「基本データ」「写真」「友達」とあるので「友達」をタップ
  5. この画面では「友達」となっているピンクの輪のところをタップ
    fb5
  6. 最初は「公開」と「友達」しか表示されないので「その他」をタップすると
    「公開」「友達」「知り合い以外の友達」「自分のみ」とでてくるので
    自分のみをタップ！
    fb6

これで自分以外には誰とつながっているのかわからなくなります。
たくさんの輪で広がることでよいことももちろんありますがご自分の判断で是非設定を見直してみてください。