• TOP
  • ブログ
  • プロフィール
  • お問い合わせ
  • 同じ方向にスライドし続けられるカルーセル第2弾

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

    久しぶりの更新となりました。
    年明けにデザインをリニューアルしました。すっきりと見やすくなることを目指したので、そう感じてもらえると嬉しいです。

    さて、今回はカルーセルの実装です。

    以前に同じ方向にスライドし続けられるカルーセルとして記事を書いたのですが、
    その時のものは不完全で、途中で動きがおかしくなり、要素が消えるといった不具合がありましたので、
    作り直したものです。

    実は制作自体は半年以上前にできてたのですが、ブログに書き忘れてました。

    以下デモとコードです。

    DEMO

    html

    CSS

    JS

    htmlは前回とほぼ同じです。CSSは前回はpositionで配置していたのをfloatに変えています。
    そして、JSでは、カルーセルを囲むulをクローンして、複製されたulになったら1個目の要素にもどるという動きをすることで、ずっとくるくるしているように見せています。
    ページャーの自動生成やフリックについては前回もやったので解説は割愛します。

    ○今回使ったjQueryのいろいろ

    ・clone()・・・その名の通り、要素を複製する。appendToで複製した要素をもともとあった要素の後ろに追加しています。

    参考にさせていただいたサイト:
    jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法

    yori3

    2017年1月8日
    【Web】いろいろ試してみた話
  • GRAND FRONTEND OSAKA 2016に参加した話

    GRAND FRONTEND OSAKA 20162日目に参加してきました。
    場所はグランフロント7階のinnnovation Habでした。

    当日は、10本のセッションに前日のハッカソンの発表とLTがありました。

    今のWebに本当に必要な技術とは(花谷 拓磨さん)


    「最近問題解決という視点から逸れてきて、技術的におもしろいとかの視点になってないか」という問いかけに少しどきっとしました。
    確かにWebデザインの本質は問題解決にあると思うし、その通りだと感じました。
    どの技術がいいとかではなく、しっかりと見極めたうえでその時の最適なものを選ぶようにしようということでした。

    普遍的な設計思想とモダンなコーディング(コソバマイさん)


    まさかサクラダファミリアからCSS設計の話になるとは。
    どうすれば破たんしないコーディングができるか、日々悩んでいたので、とても勉強になりました。

    変態的CSSトリック(カイトさん)

    なかなかいろいろなCSSの技がでてきて、とても面白かったです。
    いろいろな意見があるようですが、カイトさんが言いたかったのは「CSSでもプログラミング的思考力、創造性、問題解決力が必要」ってところだと思いますし、そこはかなり的を射ていると感じました。

     

    WP REST APIで変わるWordPressのフロントエンド(岡本 秀高さん)

    WP REST APIはこれからもっといろいろな利用がされていくんだろうと思います。
    全部JSでやるというのは少しハードルが高いようにも思いましたが、案件によっては選択肢としてありかもしれないです。

    60fpsを実現できるレンダリングパフォーマンス(ケノドン・ブノアさん)

    スライドはこちら

    スムーズなアニメーションやページの表示はすごく大事だと思います。実際表示の遅いページの離脱率は高いみたいですし。
    ディベロッパーツールのいろいろな使い方が出てきたのもおもしろかった。

    WebサイトやWebサービスの解析をしてみよう(牧 昂拡さん)

    普段、アクセス解析とかをする機会がないので、これを機会にいろいろやってみようと思いました。
    エンジニア目線でサイトを解析することでまた違ったものが見えてくるだろうし、これから必要な技術かなと思います。

    Mithril-軽量・高速なMVCフレームワーク(@sairoutineさん)

    Mithril – 軽量/高速なMVCフレームワーク from sairoutine

    正直言うと、初めて聞きました。フレームワークの導入で遅くなるってところは確かにあるだろうし、軽量なのはいいなって思いました。
    「それ、angularでできるよ」とか言わないで・・・・。

    Node.jsをさりげなく取り入れた最近のフロントエンド事情について(かみやんさん)

    Node.js をさりげなく取り入れた 最近のフロントエンド事情について from kamiyam .

    フロントエンドで気にしないといけないことは多いということがよくわかったので、とりあえず何か触ってみようと思いました。
    一つ一つ確実にしようと思います。

    IndexedDB、Worker、Server-side Rendereingそしてフロントエンドの未来(奥野 賢太郎 armorik83さん)

    覚えきれないくらい言葉が出てきたので、これから一つずつ復習していこうと思います。
    しかし、何から手を付けようかほんとに迷う・・・。

    プログラミング言語Rust(おのうえ @_likrさん)


    フロントエンドの話ちゃうやんと思ったら、ちゃんとフロントエンドの話でした。
    「ラストだからRustを選んだんですか?」って、だれがうまいこと言えと(ry

    まとめ

    勉強になったのももちろんですが、何より楽しかったです。
    いろんな話を聞けて、いろんな人と話して、雰囲気もよかったです。
    また、機会があれば参加したいと思います。

    yori3

    2016年8月30日
    イベント参加した話
    GRAND FRONTEND OSAKA
  • Web業界に入って半年のコーダーがWordCamp実行委員をやった感想

    Web業界に入って半年のコーダーがWordCamp実行委員をやった感想

    先日、WordCamp Kansai 2016がありまして、そこで実行委員として参加させていただきました。
    今回はそのお話を書きたいと思います。
    WordCampとは・・・こちら

    実行委員をやるということ

    私のWordPress歴はちょうど1年くらいで、やったこともデジハリの卒業制作とこのブログくらいという経験の浅さです。
    実務での経験もなく、どんなことができるのかなんとなく知ってるくらいでした。

    そんな私にWordBenchで知り合った方から「実行委員やらない?」とお声かけをいただきました。
    もともと少し興味があった私はその申し出を二つ返事で受け入れました。
    受けた理由としては、実行委員として活動することで得るものがあるのではと思ったこと、そして自分にもできることがあると思えたことが動機だったような気がします。

    さて、そうして実行委員としての活動が始まったわけですが、そのころの私は初めて制作会社に就職したばかり、WordPressどころかWeb制作を仕事にするということがどういうことかさえもほとんどわかっていないような状態でした。
    そんな状態で満足に活動できるはずもなく、全体MTGでもslack(グループコミュニケーションツール。実行委員内の連絡等は基本的にslackで行われていた)でもなんとか食らいつこうと必死になったつもりだったのですが、果たして十分な働きができたとは言い難い気がします。
    それでも与えられた役割くらいはなんとしてもやり遂げたいという思いだけで動き続けました。
    私に与えられた仕事は「当日の掲示物の管理」。デザイナーさんに制作依頼を出し、できたものをチェックし、印刷し、当日掲示する。
    文字にするとそれほど大変な感じがしないですね・・・。でもその時の私はこれだけでも必死でした。

    これに加え、当日はハンズオンの世話役もさせていただくことになりました。

    ここでまた改めて自分のWordPressの知識の浅さを痛感することになります。
    ブログに合うテーマを探し、必要な機能を備えたプラグインを見つける。
    何も知らない自分にはこれだけでもかなりきつかったです。
    しかし、同じハンズオンのメンバーのみなさまに支えていただきながら、なんとか形にすることができ、終わったときは本当にほっとしました。

    当日は怒涛のように過ぎていきました。気が付いたらすべてが終わって、十数人くらいで居酒屋にいた。。。

    実行委員をやって得たこと

    ・WordPressに関わる知識

    WordPressの機能、プラグインなどの知識だけでなく、WordPressを制作にどう生かしていくか、また、WordPressに貢献するということについても考える機会になり、これからの自分自身の取り組み方も考えるきっかけとなりました。

    ・WordPressへの貢献

    サイト制作の中でWordPressを使うだけでなく、いろいろな方面でWordPressと関わっていくことの大切さ、面白さがわかりました。
    いろいろな人にぜひ関わっていってほしいと思いました。

    ・人との出会い

    本当にたくさんの人と関わることができたというそのこと自体が一番大きいのではないかと思います。
    今回お世話になった方々、そしてこれからお世話になるかもしれない方々、この出会いは一生ものではないでしょうか。

    まとめ

    全体を通して楽しく、またいい経験をさせていただくことができてよかったです。
    ただ一点だけつらかったのは、実行委員としての仕事のしんどさもありますが、一番つらいのはどうすればいいのかわからないということだと感じました。
    何かしたくても何をしていいのかわからないことが多く、結果役に立ててないのではと思うことがほとんどでした。
    もっといろいろなことをできるように、全体を見て動けるようになりたいと思います。
    そしてそうなれたら、ぜひリベンジしたいですね。

    正直なところ実行委員をするのに知識や技術はあまり関係ないと思います。(多少は必要ですが)
    やる気、そしてWordPressへの思いがあればだれでもできるのではないかと思います。
    WordPressに関わる全ての人にぜひもっとコミュニティに参加していってほしいと思います。

    最後に

    実行委員のみなさま、当日スタッフとして協力してくださった方々、一緒にハンズオンの世話役をした方々、WordCampに来てくださった方々、今回お世話になったすべての方々に感謝を述べたいと思います。
    ありがとうございました。

    yori3

    2016年7月16日
    感想とかいろいろ
    WCK2016, WordCamp, WordPress
  • 今週の気になるWebコンテンツ(5/23~5/28)

    みなさま、お久しぶりです。いろいろ忙しいと言い訳しながら、更新が止まっておりました。
    更新しないとと思いながら、どんな記事を書こうかと迷っていましたが、とりあえず自分が読んで勉強になった記事をまとめてみることにしました。

    というわけで、今週Web上で見つけた記事の中で、個人的に気になった記事を紹介していきます。

    面白ければ結果はすぐ出る!?コンテンツマーケティングで失敗しがちな“思い込み”の罠

    LIGブログより、コンテンツマーケティングについての記事です。「コンテンツマーケティングうまくいかないよ」って人向けの記事だと思うんですが、「コンテンツマーケティングという言葉自体はよく聞くけれど、結局なにをすればいいの?」って人も読んでみるといいと思います。
    個人的な感想としては、まずは利用者になってみるのがいいのではないかと思いました。この記事の中であるように、ユーザーは思惑通りは動いてくれないというのはもっともですが、そのユーザー心理を理解するためにはまず自分自身がユーザーになる必要があるのだろうなと思います。

    コンテンツSEOってどうやるの?Googleウェブマスター向けガイドライン編

    みんな大好き(?)SEOネタです。
    SEOって難しいですよね。私もそう思います。でもこの記事を読んで思ったのは、SEOのためにやるべきことを見ていくと、良いコンテンツをつくることとそう変わらないのではないかということです。情報が豊富だとか、ユーザーが検索しそうなキーワードだとか、読み込みが速いだとか、ユーザーのために良いコンテンツをつくろうとすることで達成されるのではないかなと感じました。

    UIデザイナーのおしごと

    SpeakerDeckのスライドから。グッドパッチのUIデザイナーさんのお話です。
    UIデザイナーの仕事についてわかりやすく書かれているので、これからUIを考えようとするときにも参考のできそうでした。
    ここでもまずは自分がアプリやサービスを使うときのことを想定して設計するのが良さそうだと感じました。

    効果的なフォームをデザインする:構造、入力、ラベルおよびアクション

    フォームについての記事。入力しやすいフォームというのはなかなか難しい。自分が使っていてもなんか使いにくいなっていうものが多いように感じます。PCではもちろんですが、スマホで使いやすいフォームというのをもっと突き詰めていく必要があるなと感じました。
    みなさんはどんなフォームがいいと思いますか?

    今週は以上です。ほかにも勉強になった記事はたくさんあったのですが、特に残しておきたいものをピックアップしました。
    UI/UXとかそれに関係したものが多いように思いますね。優れた制作者は良いアプリやサービスをたくさん知っておく必要がありそうです。

    毎週こんな感じでまとめていけたらと思います。それでは。

    yori3

    2016年5月28日
    【Web】いろいろ試してみた話
    記事紹介
  • フロントエンドカンファレンス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 … 5 6 7 8 9 … 11
次のページ

©️ 2024 yori3 All rights reserved.