文系プログラマによるTIPSブログスマートフォン用の表示で見る文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。開発日誌TwitterGooglePocketおかしいwww.getmdl.io新サイトを開発するにあたり、UIフレームワークにMDLを採用してみたのですが、なんかjs周りがおかしいです。jquery製の様々なプラグインが動かないのです。lazyload、smoothscroll、あたりは確実に動きません。src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>これがあると動きませんでした。mdl-layout--fixed-header">この「mdl-js-layout」があると動きません。work)」という情報がワラワラと出てきました。対してスクロールイベントを設定するのですが、MDLではこれはNGのようです。http://codepen.io/mdlhut/pen/BNeoVahttp://stackoverflow.com/questions/32035052/material-design-lite-and-jquery-smooth-scroll-not-workingこのレスにあるcodepen.ioを見ると、「.mdl-layout__content」にanimationを設定しています。http://codepen.io/mdlhut/pen/BNeoVawow.jsが動かないのも、恐らくこれが原因と思われます。追記)ちょっとだけ原因が判明しました今回使ってみて動かなかったスクロールのpluginは以下になります。).scrollTop()が常に0を返してしまっているのが原因でした。);これはMDL以外ではちゃんとスクロールしますが、MDLではスクロールしませんでした。残念ながら以下に関しても常に0が返るようです。).scrollTop());これが様々なpluginが動かない原因だと思われます。これって相当致命的なのではないでしょうかね・・・・ほとんどのアニメーション系pluginは$(window)とか使ってるでしょうから、動くpluginの方が少ないような気がします。ちなみに「.mdl-layout__content」に対してスクロール設定すると確かに位置も取得できてスクロールもできたんですが、タイミングによっておかしな値が取れたりして、正直挙動がよく解りませんでした。雑感さて困りましたね。この状態だと様々なjsのpluginが動かない事になるので、MDLを使うという選択肢自体を見直す必要がありそうです。bootで静的リソースにキャッシュ回避のための「?xxx=xxx」を自動追加するできるんだな、これが。週間)昔は業務系SIer、今はベンチャー企業でプログラムを書いています。INFILEを実行できるようにするmacのAutomatorでhomebrewのコマンドをFinderのサービスから実行できるようにするReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。単行本(ソフトカバー)この商品を含むブログを見るAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。大型本この商品を含むブログを見るSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。