結果はこちら
上記をjqueryで画面ロードが終わったタイミングでfadeOutしていくといい感じにロード済みのページが表示されます
ではでは〜
メインビジュアルを画面一杯にしたときに、画面下部に入れる「スクロールしてね」のアニメーション例
結果はこちら(画面幅によっては見づらいかも...)
メインビジュアルにでかい写真を一杯使って、コピーをドンっ!!
というサイトによく使われる系ですね
cssのアニメーションを活用した機能なのですが、パラパラ漫画の容量で作成します
・animationが何秒で終わるか決める(繰り返しの1周目)
・動きをイメージ
・0%、100%の状態を記述
・間の特徴的な状態を記述(今回の場合は↓が一定の時間下にとどまる部分)
あとはブラウザがよしなに補完してくれるというとってもいい機能ですね!!
ではでは〜
スクロール方向と逆に動いてるような背景を持つセクション(パララックス効果)を作るメモ
サイト制作の際にたまに使いたくなるので、メモ
結果はこちら
jqueryのプラグイン「parallax.js」を使ってます
npmやyarnでインストールする際は、jquery-parallax.jsを参照してねとのこと
npm/yarnの参照名からわかるように、jquery依存のライブラリです
ライブラリを読み込んで、data属性を着けるだけで手軽に使えるので、いい感じ
背景画像に暗めのブラーをかけたものを使って、セクション内の文字や画像を明るくして目立たせる用途に使われてるケースが多いのかなと
スクロールと若干変わった動きをするので、目を引きやすい??
CTAに使ったりするといいかもしれない
ではでは〜
ホバーすると暗転/画像が少し拡大されるパーツのマークアップとSCSS
よくある実装なのですが、毎回忘れてしまうのでメモ
コードはコチラ
ざっくり解説
htmlの略式図です
.effectable-img
a.effectable-img__link
img.img
.effectable-img__info
背景画像が拡大される
親の枠を決めます
.effectable-img {
width: 233px;
height: 165px;
overflow: hidden;
}
子要素は親要素の幅と同じなので
.img {
width: 100%;
height: auto;
}
ホバー時に拡大すると
a:hover {
.img {
transform: scale(1.2);
}
}
最初のスタイルで枠を決めている/溢れたときの挙動を決めているので、画像が拡大されます
ホバー時の暗転
画像と並ぶdiv要素(effectable-img__info)が肝
親のeffectable-imgにrelativeが付いてるため
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
で親要素と同じ大きさになり、1つ前の要素のimgにかぶさる形になります
それがopacity: 0のため、通常時は表示されず
hover時はopacity: 1になるので表示されるという感じですね
全然話が変わりますが、GoogleさんのCSSスタイルは
Alphabetize declarations
Google HTML/CSS Style Guide
ということで、アルファベット順なようです
jsfiddleに記載してる方は、その真似してみました
個人的にはtop,leftなどが意味的に近いものが少し離れているのは違和感を感じますが、バラツキは確かに少なくなりそうですよね
ではでは〜
外出先でMacbookProのお供にしたい周辺機器
どうも〜
あけましておめでとうございます
新年一発目の記事は、僕の使ってる周辺機器に関してです
僕は2018年の1月にタッチバーモデルのMacbookPro13インチを購入しました
大きさも持ち運ぶのにちょうどよく、画面サイズも大きくて気に入ってるのですが
外出先で作業を行う時に、よくバッテリー切れとか起こしちゃうんですよね汗
ChromeとかDockerとか色々アプリを立ち上げてて、充電忘れとか重なっちゃうともう一瞬...
でも、忘れちゃうときは忘れちゃうんですよね〜笑
すぐに充電できる場所が見つかればいいのですが、見つからんときは見つからん!!
あと電源コードも忘れる(ていうか重い!)...
「常に持ち歩ける電源がほしいな〜」
そういった問題を抱えていたのですが、最近ようやく(遅い笑)その辺が整ってきたので
知見を共有しようかなと
コンセントが近くにある場合
USB-Cの電源アダプタがあればOKなのですが、mac標準のものだと結構大きいし
僕のような忘れっぽい人は、家のコンセントから外すのを忘れてしまいます
できれば別で持ち運び用の電源アダプタが欲しいですよね
そこで僕はこちらを使っています
- 出版社/メーカー: Shenzhen Shuangju Electronic Co., Ltd
- メディア: エレクトロニクス
- この商品を含むブログを見る
amazonのページにもとても細かくスペックが記載されていますが、
大きさは、タバコの2/3くらい、厚みはちょっとタバコよりあるくらいでしょうか
ほぼ場所を取らないので、メインでも使いたいくらいいい感じです
Macbookに標準でついてくるアダプタは61Wですが、こちらのアダプタは60Wで出力も申し分ないです
実際に充電しながら使用していても十分に充電されていきますね
注意しないといけないのは、 type-c to type-cのケーブルは付属していない ので別で購入する必要があります
下のモバイルバッテリーには、ケーブルがセットで付いてくるため
コンセントがない場合
モバイルバッテリーですよね
ただ、僕も藁にもすがる思いで挑戦して失敗したのですが、
コンビニで売ってるような貧弱なものだと全く充電できない ので、
事前に準備しないといけないです
こちらはニンテンドースイッチ用なのですが、amazon CyberMondayで安かったので購入しました
スマホ用モバイルバッテリーのようなカワイイサイズだといいのですが、結構大きいんですよね
ちょうどショートのタバコ2つを縦に重ねたようなサイズ感です
縦長になってるのでスキマにシュッと入ります
こちらはMacbookを使用しながら充電を行うとゆっくり回復していく感じです
実際の商品スペックも
Power Delivery出力：5V=3A, 9V=2.6A, 15V=1.6A 通常出力：5V=2A
ということで10W〜24Wということでしょうか
おおよそ1/3くらいのパワーですね〜
現状維持するために使用して、あわよくば充電する感じですね
ただ、2019年1月時点では残念ながら現時点では在庫切れみたいです
それだと話にならないので、同じメーカーが出してる充電器を探してみました
少し大きくなってしまうようですが、こちらもMacbookProへの充電が可能なようです。
Anker PowerCore+ 26800 PD (Power Delivery対応 26800mAh モバイルバッテリー)【USB-Cポート搭載/USB-C急速充電器付属】
- 出版社/メーカー: Anker
- メディア: エレクトロニクス
- この商品を含むブログを見る
サイズは
最初に紹介したバッテリーが約168 x 62 x 22mmで約360g
後者は約180 x 80 x 24mmで約580g
重量は大きくなりますね...
パワーは後者のほうが上がるようで30Wとのこと
こちらも現状維持的な感じなのでしょうか...
だれか使ってる人教えて欲しい!
まとめ
外出先であったらいい周辺機器を紹介しました
持ち運び用の電源アダプタとモバイルバッテリーを紹介したのですが、
これらを常にカバンに入れておくことで、外出先で作業を行う際の不安が一つ消えます
ぜひ皆さんも快適なPCライフを〜
ではでは〜
Chromecastでできるオススメの学習環境
Chromecastって持て余しがちじゃないですか??
我が家もリビングでYouTubeを見るための道具として実力を発揮してくれています
動画を見るのは好きなので、「それでもいいか」と思うのですが、やはりずっと見てると飽きてきますね
そんな時にちょっとだけ変化球
Chromecastでそんな時間にスキルアップを行いませんか??
最近、僕もこの環境で勉強を勧めています
- 事情があって仕事部屋にこもれない人
- これまで学習したことない単元をサラッと勉強したい
犬を飼うことになったので目を離すことができず笑
仕事部屋にこもるとリビングがう○こまみれになるという惨事を引き起こしたため、
リビングで犬と遊びながら落ち着いた時にサクッと勉強したいな〜というモチベーションから、このやり方を始めてみました
使ったもの
- Chromecast v3(v2/v1は未確認ですが、castできればできると思います!)
- iPhone7(これもGoogleHomeアプリが入っていれば大丈夫と思われます!)
- アプリ(Udemy)
です
で、どうすんの??
普段YouTubeをcast経由で見ている方はほぼ同じ操作です
- (購入済みの)目的の講座を選択し、castアイコンをタップ
- マイクの使用許可をOnにするか聞かれるので、Onにする(何に使うんだろ??心配だったら設定のところから後でOffにできます)
- 見るだけ
簡単ですよね!
動画に飽きたらぜひやってみてください
年末/年始でスキルアップだーーーー!!
ちなみにアイキャッチで書かれたイラストはUdemyの
https://www.udemy.com/nazoru-illust/
で学んだ技術のアウトプットです!
僕、めっちゃ絵が下手くそなのでこれを機会に勉強したいなと笑
ではでは〜
naniwa.rb#2 開催!!
こんにちは!
先日、naniwa.rbというコミュニティで、第二回目の読書会&勉強会を開催したので、その様子をお伝えします!
「プログラミング...やりたいけど1人で進めるのはモチベーションが続かない」
「1人で一通りやってみたけど、次は何しよう??」
といった方々が参加すると得体の知れない何かを得られる勉強会です:)
今回は
* 「プロを目指す人のためのRuby入門 」の読書会
* ガンプラを作って電子装飾
を行う勉強会でした
ちなみに僕のレベル感としては、
Ruby(Rails)歴4年目、ガンプラ歴(なし)という感じです。
それを如実に表したツイートがコチラ
ガンダムしゃなくてジェガンですーー（笑）
— namikisugie (@namikisugie) 2018年12月8日
ガンプラ=>すべてガンダム
というヤンチャな発想が今の僕の実力です(｀・ω・´)ｷﾘｯ
では勉強会の様子をお伝えしましょう!
ガンダムは教養 by @ogomr
名言から始まった今回の勉強会ですが、始めにガンプラの装飾の世界についてさっくり説明が入りました。
正直元の姿がわからないので、どれくらいスゴイのか実感はわかなかったのですが、よくよく目を凝らすと
ペットボトルでカスタムパーツを作ってたり、わざと汚れてる装飾を施したり...
もう、スゴイ以外に言葉が出ないですね笑
テッペンを確認したところで、現実に戻りましょう。
本日のガンプラ勉強会側のゴールはガンプラを光らせることです。
ただ、僕は落ち着いて本を開きます
「プロを目指す人のためのRuby入門 」の読書会
前回と同様、本を読み進めながら疑問点があったら、ホワイトボードへ付箋を張っていくスタイル 今回、僕は10章「yieldとProcを理解する」 を読み進めました その時に学んだことはコチラのツイートから!!
https://t.co/Gwnm76VLZKとlambdaで引数が足りない場合の挙動が違うんだね#naniwarb
— Islands5 (@510_five) 2018年12月8日
Procオブジェクトが===でcallできるって意識してなかったー
— Islands5 (@510_five) 2018年12月8日
今までなんとなくwhenに渡してました。#naniwarb
これまで何気なく使ってた部分が解説されてるので、納得感持って進められます。
よく見かけるmap(&:to_i)のイディオムがやっとわかった...
ガンプラ電子工作
電子工作の前に、まずはガンプラを作らないといけません。 僕は今回(ググって出てきた)初心者用の
ガンプラ HGUC 191 機動戦士ガンダム RX-78-2ガンダム 1/144スケール 色分け済みプラモデル
- 出版社/メーカー: BANDAI SPIRITS(バンダイ スピリッツ)
- 発売日: 2015/07/25
- メディア: おもちゃ＆ホビー
- この商品を含むブログ (13件) を見る
を購入して行きました
初心者用ということでビーダマン×5くらいのボリューム感で考えていたのですが、ガンダムのヘッドパーツだけでパーツが5つくらい笑
「めっちゃ多っっっっ」とか思いながらモクモクと作業を行いつつ、
他の方のプログラミングに関する疑問点をサポートをしつつ...
1時間半後...
光らせるところまでは出来なかった笑
— Islands5 (@510_five) 2018年12月8日
圧倒的途中#naniwarb pic.twitter.com/vTCNtZ7O4m
他の参加者の方は、光らせることに成功!!
目が光るジェガン
残念ながら僕は光らせるところまではできませんでしたが、
久々に手先を使う作業を行ったため、終わった後に謎の開放感がありました:)
これからも定期的にやってみようと思います!!
(脳トレに良さそう)
最後に皆さんで集合写真をパシャリ
あと、制作物もドンッ!!!!!
ということで皆さんお疲れ様でした!!
今回は、読書会とガンプラ勉強会と併設ということで
naniwa.rbはこれからもバラエティ溢れる勉強会を行っていきますので、よろしくおねがいします!
次回は1月末/2月初旬を予定してます!
あとがき
プラモ製作前の話で、ガンプラの組み立ての手順書が子供でもできるように工夫されているという話を聞いて、どの辺りが工夫なのか気になった点をまとめてみました。
・完成形が表紙にある
・対象のパーツすべてにナンバリングされている
・パーツの色(決まったルール)によって、大カテゴリが組まれている(黄色はA-1、黒はB-1的な)
・同時に使うパーツは近い位置にある
・モジュール(複数のパーツをつなげたもの:勝手に命名)間の関連がわかりやすい
・というか組立図の絵、うますぎ笑(モジュールの向き等もわかりやすい)
※下の図はイメージです
説明書もそうですが、パーツの配置にも工夫がされてる様子
操作手順等をまとめる時に意識したいことが詰まってるなと感じました
最後に完成後のガンプラと興味津々のハムスターを御覧ください笑
前回の勉強会の様子はコチラ
blog.ryogoto.com
第2回参加者の方から、このようなコメントも頂いております!
ご参加ありがとうございました!
こんばんは。
— SK@ゆるく生きます (@kenma369) 2018年12月10日
夜分遅くに失礼いたします。
土曜日のnaniwarbに参加させて頂いたruby初学者です。
大変遅くなり申し訳ございませんが、
土曜日は貴重なお話を伺うことができ、本当にありがとうございました。
引き続きrubyの勉強に努めます。
それでは次回も会場でお持ちしております!!
naniwa.rb#1 開催しました!
こんにちは!
最近、一度封印したMinecraftを復活させました
せこせこ整地を行うのが趣味の@510_fiveです!
先日、naniwa.rbというコミュニティで、第一回目となるもくもく会?(勉強会?)を開催したので、その様子をお伝えしたいなと思います
「プログラミングを始めたいけど、何やったらいいかわかんね」
「始めてみたけど...めっちゃ詰まる...」
といった方々はぜひ参加してみて欲しい勉強会に仕上がっております!
はじめに「プロを目指す人のためのRuby入門 」の読書会からスタート!!
各々が読書を進めながら、引っかかった部分は共有し解決しながら進めていくスタイル
環境構築で詰まった方が居たら、@ogomrさん, @honeniqさんが徹底サポートを行ったり、
付箋を使って非同期に質疑応答を行うスペースもあったり、
僕自身も、プライベートメソッドの仕様で割と大きめの勘違い(selfつけると呼び出せない件)をしていた話を共有したり、
自由な環境で本を読み進めていきます。
1時間半程読書会を行ったら、希望する方だけ電子工作の方に移りました!
ワイヤレス給電でLチカ
今回の電子工作は、2つの光るアイテムを作成しました。
・光るコンペイトウ(めっちゃ小さいLED, 1006LEDチップLEDの1608)
・光るハーバリウム(ワイヤレス給電の仕組みを活用)
です
今回は電子工作と言っても、半田ゴテを駆使したりするハードなものではなく
パーツを組み合わせて、UVレジンで固めていく方式でした(初級者にも安心ですね〜)。
(制作途中の写真を取り忘れた...)
こちらが完成品です
まずは光るコンペイトウ
(わかりずらいかもですが、赤い玉みたいなやつが、それです)
1006LEDチップLEDの1608を活用して制作します!
線香花火みたいで、めちゃくちゃキレイでした!!
続いて光るハーバリウム
これまで、「ハーバリウム」なんて単語を使ったことがなかったので、最初は何を制作するのかわからなかったのですが
植物標本のことを指すみたいです。
瓶の底にワイヤレス給電で駆動するLEDを設置して、標本を設置していくことで一風変わったキレイな仕上がりになりました!!
最後に
バルス!!!!!!!!
以上でnaniwarbの参加レポートは終わりです!
皆さんの次回の参加をお待ちしております!!
まずは60秒のプレゼンを決める意識を持つ『僕たちはどう伝えるか~人生を成功させるプレゼンの力』のメモ
シンプルな表紙が目を引く
オリエンタルラジオの中田さんが書いたプレゼンに関する本
ジョブズの本を意識させる写真だ
プレゼンに関して悩みを抱える人は、一度読んだほうがいいと思う。
理由は
・読みやすい
こと。
冒頭数ページ目
空気を読む人間が、衰退していく。 時代を読む人間が、台頭していく。
実際に芸能界で時代の流れを読み、数々のヒットを生んできた人だから余計にこの言葉に重みを感じた。
盛り上がった気持ちと、 スッキリまとめられた文章で、じっくり読んでも1時間程度で読み切ることができた。
(僕は割と積読派なので珍しいですw)
読んだ内容で心に残った言葉3つと考えたことを記載していこうと思う。
言葉とは、空気の波動として物理敵に人に届く「モノ」なのだ 言葉は届かないと意味がない...全くもってその通りだ
とても広いホールの三階席とまではいかなくても、会場の奥に届く意識は必要だ
昔、『千の風になって』を歌っている秋川雅史さんが、舞台の中心から大声で叫んでる映像を思い出した。
プロでもそれを意識している。
素人も当然意識しないと、上手く言葉を届けることができないじゃないか。
自分もよく声が小さくなることがあるから、気をつけないと...
会場の奥に届く意識
頑張らなくていいから。才能出して 「頑張ります。」って
これまで自分も何回も言ってきたし、聞いてきた。
その度になんとなく違和感を感じてた。
結局、欲しいのは「頑張ります」という言葉ではなく「結果」だ。
内心それをわかっていながら、口に出すから違和感を感じていたんだと思う。
ジブリの鈴木さんの言葉を中田さんが引用していたのだが、僕も衝撃を受けた。
「結果出して」ではなく「才能出して」という部分が、言葉として響く。
『君に才能があることを僕は知っている。だから君に仕事を依頼した。君が才能を出せば、結果が出るでしょ。』
という風に言ってもらえてるように思う。
言葉の選び方のすごさを感じた。
まずは1分!60秒ほどのプレゼンを「決める」感覚をつかもう。 これは完全に納得
どうして、プレゼンの時に応用しなかったのだろう
システム開発も小さな部品を組み合わせて、ソフトウェアを組み上げていくのに。。。
他のプレゼンに関する本でも「エレベータピッチ(30〜60秒で相手に商品を説明し関心をもってもらうこと)」に関しての言及はあったと思う。
ただ身近なアイテム(映画、ドラマ...)に関して試してみよう、それで反応を見てみよう的なことまでは考えてなかった。
毎日それを意識して話をしてる人に、勝てるわけないじゃないかw
と思ってしまった。
以上が心に残った3つの言葉と考えたこと
他にもこの本には、緊張との付き合い方について記載されていたり、
多くの人が話をする際に必要とされている技術や心構え、習慣が記載されていると思いました。
プレゼンに関わる人は、一読の価値があると思います。
- 作者: 中田敦彦
- 出版社/メーカー: 宝島社
- 発売日: 2018/09/19
- メディア: 大型本
- この商品を含むブログを見る
Go言語で正規表現にマッチした文字列を処理してから、置換する(replaceAllStringFunc)
便利な関数があったのでメモ
「sample text」を全部*で置換したい、ただ文字数を同じにしたい等で使えます。(こんなユースケースあるんだろうか)
検索してよく出てくる関数はReplaceAllStringで、置換するワードが第2引数に渡した値になります。
replaceAllStringFuncは2つめに関数を渡すことができ、マッチした文字をその関数に渡してもらえるので、
処理してから置き換える文字を変更することができます。
以下がサンプル
package main
import (
"fmt"
"regexp"
"strings"
)
func main() {
str := "「正規表現によるマッチ」を意味する（専用の）演算子がある言語なども一部ある。"
regx := regexp.MustCompile(`「(.*?)」`)
repStr := func(str string) string {
runeStr := []rune(str)
lenRuneStr := len(runeStr)
return strings.Repeat("*", lenRuneStr)
}
matches := regx.ReplaceAllStringFunc(
str,
repStr,
)
fmt.Println(matches)
}
動作チェックは以下のリンク先でできます。
Go言語は結構funcを渡せる関数があるので、いいですね!
ではでは〜
