• TOP
  • ブログ
  • プロフィール
  • お問い合わせ
  • フロントエンドカンファレンス2016に参加した話

    3月5日(土)にフロントエンドカンファレンスに参加してきました。
    http://kfug.jp/frontconf2016/

    タイムテーブルはこちら

    ○参加したもの
    <セッション>
    ・大型フロントエンド開発におけるTypeScriptとDDD
    ・HTML5のAPI群をただひたすらに触ってみた記録
    ・Webサイトパフォーマンス管理の基礎知識
    ・グロースハックを実現する「モジュールデザイン」とCSS設計
    <ハンズオン>
    ・Gitを始めてみよう!!
    ・gulpで始めるフロントエンドタスク管理

    2つのハンズオンは初心者向けといった感じで、一から教えていただけたので、非常に勉強になりました。まずは個人でもっと使っていこうと思います。
    (そのうちブログに何か書きます)

    ・オープニング
    基調講演として、明石高専2年のやましーさんが登壇。「Are you a Designer or an Engineer?」というタイトルで、自分のこれまでの背景を踏まえながら、自分なりに考えるフロントエンドについてお話されました。
    「フロントエンドとはデザイナーとエンジニアが一番近づけるところ」と話されていたのが印象的でした。
    やましーさんのサイト

    ・大型フロントエンド開発におけるTypeScriptとDDD
    https://speakerdeck.com/armorik83/da-xing-hurontoendokai-fa-niokerutypescripttoddd

    ChatWorkの奥野さんが登壇。ChatWorkの開発をどのようにチームで進めているかについてお話されました。
    TypeScriptなどは少々ハードルが高く感じられましたが、チームで開発を進める上での考え方などはとても参考になりました。

    ・HTML5のAPI群をただひたすらに触ってみた記録
    高校2年生の花谷拓磨さんが登壇され、自分でさまざまなAPIを実際に触ってみて、感じたことなどを話されていました。
    難しい実装の話はここではおいておきますが、お話のなかではまだまだモバイルでの対応がなされていないということで、これからに期待したいと感じました。便利そうな機能がたくさんあったので、対応ブラウザの問題が解決されればこれからより広がっていくのではないでしょうか。

    ・Webサイトパフォーマンス管理の基礎知識
    http://www.slideshare.net/takehora/web-59093011/

    竹洞 陽一郎さんが登壇され、サイトパフォーマンスの重要性についてお話されました。
    詳しくは中身の濃いスライドを見ていただくとよいと思いますが、個人的に印象的だったのは
    ・遅いサイトは2度と行かない人は47%。
    ・精神的な影響は最初が最も影響を受けやすい。だからサイトが表示される速度が大切。
    ・年齢層に対するバイアスをはずす(年齢が高いからといって新しいものに手を出さないとは限らない)
    というところでした。
    非常に熱のこもったお話で、これまで以上にサイトパフォーマンスについて考えていく必要があると感じました。

    ・グロースハックを実現する「モジュールデザイン」とCSS設計
    榊原昌彦さんが登壇され、webデザインやUIデザインの考え方についてお話されました。
    印象に残ったお話は、webデザインはリリース後にも変更が可能であることが、紙のデザインとの違いというところです。
    webはリリース後の検証と仮説を繰り返し、サイトをよくしてくものであり、特にパーツの配置などのUIは必ずと言っていいほど変更される。そこで最小の修正は最小の人員のみで試みられるべきであり、そのためにデザインのモジュール化が必要であるということでした。

    ちなみにモジュール化の定義としてお話されていたのは以下の3点
    ・仮説検証のサイクルを持ってる
    ・CSS設計まで見据えている
    ・容易に手入れを行うことができる

    こういったことまで意識してサイトを作るのは難しいと思いますが、今後、ちょっとしたところから試みてみたいと感じる内容でした。

    ○感想
    内容の濃いセッションばかりでとても勉強になった一日でした。(なかなか自分の文章力で表現しきれないのが残念ですが)
    gitやgulpなど以前から興味のあった内容にも触れることができ、すごく満足できました。
    ここをきっかけにしてもっとたくさんのことを勉強して技術を身につけていきたいと思います。

    yori3

    2016年3月6日
    イベント参加した話
    セミナーレポート
  • ドロップダウンメニュー(レスポンシブ)を実装してみた

    ドロップダウンメニュー(レスポンシブ)を実装してみた

    ナビゲーションにホバーすると、下層のナビゲーションが出てくる、いわゆるドロップダウンメニューを作ってみました。
    調子に乗ってレスポンシブで、スマホのときはアコーディオンメニューにしようとか考えて、結構苦労しました・・・。

    デモはこちらから
    DEMO

    以下、コードです。
    HTML

    liの中にulを入れる入れ子構造です。普通に打つとかなりめんどくさいですね。何かしら楽をする方法を使う方がいいでしょう。私の場合はemmetでやりました。

    CSS

    動きに関わる部分は特にありません。ほぼ見た目を整えるために使ってます。「>」は子要素を指定するセレクタです。今回みたいな入れ子構造のものは子要素のみを指定してあげればclass・idなしでも実装できます。(メンテナンス性とかの良し悪しはさておき・・・)

    jQuery

    画面サイズによってイベントを切り替えています。700pxより大きい場合はhoverイベントが、小さい場合はclickイベントが動作します。さらに700px以下の時はmenuというボタンが現れ、ナビゲーションが格納されます。これは読み込み時と画面サイズが変わったときに読み込むようにしています。

    ちなみに.on(‘load resize’)の中にクリックやホバーのイベントを入れると正常に動作しません。
    jQueryのonイベントは入れ子にすると、外側のイベントの読み込みを内側のイベントに継承してしまいます。つまり、.on(‘load resize’)の関数の中に.on(‘click’)を入れると、リサイズが起こった回数だけクリックされたという判断がされてしまい、アコーディオンが何度も開いたり閉じたりしてしまうのです。
    なので、イベントごとにウィンドウサイズを判断して、サイズによる出しわけをしています。

    openerという変数は他のアコーディオンが開いているかどうかを判断しています。どのアコーディオンも閉じているときは、クリックしてすぐ開きますが、どれかのアコーディオンが開いているときは、閉じ終わってから開くようになっています。

    =>・・・この記号はES2015から実装されたアロー関数というものです。setTImeoutなどの通常thisを継承できない場合でも、thisを継承してくれるというものです。(このあたり説明すると長いので、また別の機会にでも。)ちなみにES2015の仕様は、サポートしてないブラウザも結構あるので(iPhone5sではうごきませんでした)、使用時は注意が必要です。

    今回は、イベントが重なるとだめなところとか、アロー関数とか、実際に試すことができたので面白かったです。
    以下参考にしたサイトと書籍。大変勉強になりました。

    参考サイト:
    jQuery.on()は追加式なのでイベントの重複登録に注意しよう

    416番地 setTimeoutの話

    参考書籍:
    『フロントエンドエンジニアのための現在とこれからの必須知識』(マイナビ出版)

    yori3

    2016年2月22日
    【Web】いろいろ試してみた話
    コーディング
  • タブ切り替えメニューの実装

    みなさん、お久しぶりです。気が付けば最後の更新から1か月半。だいぶ更新してないと思い、こないだ仕事で実装したタブ切り替えメニューをご紹介します。

    まずはDEMOから。
    DEMO①

    mainArea内のdivの中身はご自由にどうぞ。

    HTML

    CSS

    jQuery

    ○コード解説
    メニューと下の表示エリアのid名の数字をいっしょにすることで、for文で操作しやすくしています。
    表示しているメニューをクリックしてもフェードアニメーションが発生したので、currentというクラス名をつけて、条件分岐させています。slideとかにしてもおもしろい動きになるかも。

    次回はドロップダウンメニューの予定。いつになることやら・・・。

    yori3

    2016年2月6日
    【Web】いろいろ試してみた話
    コーディング
  • まにまにフェスティバル参加レポート(?)

    昨日、まにまにフェスティバルに参加してきました。

    まにまにフェスティバル(まにフェス)P4

    まにまにフェスティバルとは、Web系・IT系セミナー、展示会で今年で4回目になるそうです。Webデザイナーやエンジニア、クリエイターなど様々なIT業界の方が登壇し、ご講演をしていただきました。
    3階が展示とステージ、4階はチケットが必要な大きなステージで、私はほとんど4階のステージでの講演を聴かせていただいていました。
    たくさん魅力的な内容の講演があったのですが、その中でも特に個人的に気になったこと・感想としては
    ①WebデザイナーはWebに特化する。
    ②ウェラブルコンピュータに注目。
    ③Edgeはこれから期待できる。
    ということです。

    ①あれこれ手を出すより、WebならWebで深く身につける方がよいというお話がありました。これからある程度のことは機械による自動化が進むと考えられる中で、必要とされるのは機械ができない深い部分、細かい部分ができる人材ということでした。なので何か1つ、より深い部分を身につけようと思いました。

    ②ウェラブルコンピュータはAppleWatchやドローンなど、かなり現実味のある話だと思いました。将来、Webデザイナーがそういった操作系のデザインをすることになるのではということで、そのあたりにも関わっていけるようにがんばりたいと思います。

    ③そして、Edgeです。IEに代わりwindows10に搭載されたブラウザですが、これがかなり良さそうでした。レンダリングシステムはwebkitに近いという話。さらにchromeやsafariの拡張機能も使える予定だったり、標準で、絵や字を書き込んでキャプチャーを撮れる機能があったりと、かなり期待させてくれました。近々windowsをアップデートして使ってみたいと思います。
    あと、1月13日でIE8以前のIEがサポート終了というのも大きなお話でしたね。Microsoftの人が「IE用の記述もベンダープレフィックスもいらない」と断言されていたので、聴いていてかなりテンションが上がりました。

    他にもいい話がいっぱいあったのですが、私の力不足でまとめきれず、すみません。ご講演いただいた方々、貴重なお話を本当にありがとうございました。

    yori3

    2015年12月20日
    イベント参加した話
    セミナーレポート
  • 同じ方向にスライドし続けられるカルーセル

    みなさん、お疲れ様です。

    今回は同じ方向にスライドし続けることができるカルーセルを作成したので、ご紹介します。

    2017年1月8日更新
    コードを直して挙動がだいぶましになったものをあげましたので、こちらからどうぞ

    同じ方向にスライドし続けられるカルーセル第2弾

    5秒ごとに要素が切り替わっていきます。左右のボタンでも切り替えられます。スライドで切り替わるものは以前にも作ったのですが、今回はずっと同じ方向にスライドするようにしました。

    DEMO①

    HTML

    CSS

    jQuery

    liをposition:absoluteにして、動かしています。一回のスライドごとに左からの位置を取得し、それにli要素一つ分の幅を足したり、引いたりすることでスライドさせています。li要素の幅と高さでwrapperの大きさやボタンの位置を制御しているので、CSSはそこだけ変えれば好きな大きさで使うことができます。フリックもつけています。仕組みは以前のものと同じです。

    ○今回使ったjQueryのいろいろ
    ・.stop():jQueryのアニメーションの処理を制御します。今回は時間で動くタイミングとボタンを押すタイミングが被ったときにきちんと処理できるように引数を(true,true)にしています。
    詳しくはこちらをご覧ください。
    【jQuery】stopメソッドを理解する

    ・.offset().left:要素がページの左から何pxの位置かを取得します。

    見たいところに飛べるボタンもつけたかったのですが、実装できませんでした。いつか挑戦したいと思います。あと、早く動かすと処理が追いつかないのも何とかしたいと思います。

    それでは!

    yori3

    2015年12月13日
    【Web】いろいろ試してみた話
    コーディング
  • 私のchrome拡張機能

    みなさん、お疲れ様です。

    突然ですが、ブラウザは何をお使いですか?
    私は専らchromeを使っています。理由はいろいろありますが、何よりも拡張機能がいろいろ便利だからです。

    今回は私がよく使っている拡張機能をご紹介したいと思います。
    Web制作で役立つものから普段使いで便利なものまでいろいろありますので、参考までにどうぞ。

    1.Appspector
    この拡張機能は、サイトを開くだけで使用しているCMSやアプリケーションなどの情報がわかるというものです。導入していると、アドレスバーの右端にアイコンでいろいろ表示されます。私は主にWordPressで作られたサイトを探すときに使っています。

    2.ColorPick Eyedropper
    こちらはサイトから色を抽出できるエクステンションです。16進数の表示はもちろん、RGBやHSLも表示してくれます。サイトの色を参考にしたいときに使えます。

    3.Page Ruler
    こちらは要素の大きさを測ることができるエクステンションです。幅と高さだけでなく上下左右からの位置、さらに選択範囲を動かすこともでき、ただ測るだけでなくいろいろな使い方ができます。

    4.Fire Shot
    こちらはサイトのキャプチャーを撮ることができます。ページ全体・見えている範囲・選択した範囲の3通り選べます。プレゼンとかデザインの一部を持って来たりするときに使えます。

    5.Pushbullet
    こちらはサイトのURLを共有できるエクステンションです。他の人とも共有できますし、スマホでアプリをダウンロードすれば、そのままスマホにURLを送ることもできます。共有できるアプリはいろいろあると思いますが、これは1クリックでできるところが魅力的です。

    6.OneTab
    こちらは開いているタブを1つにまとめることができます。タブを開きすぎると動作が重くなる。かといって閉じたくないというときに使うとよいです。ブラウザを閉じたり、PCをシャットダウンしても残っているので、一時的なブックマークとしても使えます。

    7.Google Mail Checker
    Googleメールのエクステンション。未読メールの数を表示してくれるので、作業しながらメールの受信を確認できます。スマホのアプリでええやんとか言わないで・・・。

    8.Incredible StartPage – Productive Start Page
    これを入れると、新しくタブを開いたときブックマークや履歴を表示してくれるようになります。個人的にchromeのブックマークは使いづらい印象があるので、結構重宝しています。

    9.Googleマップ™のツール
    エクステンションのページにこういう名前で載ってるのです(笑)。ただ単にGoogleマップが開くだけですが、1クリックで開けるようになるので、少し手間が減る気がしています。

    10.Auto Replay for YouTube
    その名のとおり、YouTubeでリピート再生ができるようになります。作業用にBGMを流すときに使えます。

    他にもいろいろ入れてますが、よく使うのはこんな感じです。皆さんはどんなの入れてますか?
    おすすめのものとかあったら教えてください。

    yori3

    2015年12月6日
    【Web】いろいろ試してみた話
    その他
前のページ
1 … 6 7 8 9 10 11
次のページ

©️ 2024 yori3 All rights reserved.