- 投稿日：2021-06-20T23:03:52+09:00
Vue.jsでカスタムページネーションを作る
Vue.jsにはVue Pagination 2というpagination用のライブラリがありますが、仕組みを理解したいと思い自作しました。今回はそのカスタムページネーションについて記事にします。ソースコードはGitHubにて公開しています。 手っ取り早く実装したい方は上記ライブラリを使うことをお勧めします。時間があり、仕組みから理解したい人は読んでくれたら嬉しいです。 完成図 手の込んだことはしておらず、ページボタンを押すと表示するアイテム一覧が変わるだけの簡単な実装にしています。 対象読者 普段pagination実装はライブラリで済ませているけど、今こそ中身を理解したいと言う人 既存ライブラリのpaginationに満足しておらず、自作paginationを作りたいと思っている人 内容 方針 やっていることは決して難しいことではなく、表示したい部分のインデックスを取得して、それに対応する配列の一部分を取ってくるだけです。ページの変更は、表示したいインデックスを変更するだけで大丈夫です。 それでは実装に移りましょう。 実装 紙面の都合上、重要な部分のみ取り上げます。詳細に関してはGitHubより確認して頂ければと思います。 Vue.jsの基本はすでに理解している前提で話を進めますが、難しいことはしていないので基本を押さえている方であれば大丈夫だと思います。 ページネーションコンポーネントには次の2つを渡します。 1. アイテムを格納した配列 (items) 2. 1ページに表示したいアイテム数 (itemNumPerPage) App.vue <template> <div class="home"> <pagination :items="items" :itemNumPerPage="10" /> </div> </template> 今回はデモなので渡すアイテム配列は要素に文字列を持つ配列にしています。 続いて、ページネーションコンポーネントについて見ていきます。 Paginaiton.vue <template> <div class="pagination"> <div class="item-list"> <item v-for="(item, idx) in displayItems" :key="idx" :title="item" /> </div> <div class="page-btns"> <page-button @changePage="changePage" v-for="n in pageNum" :key="n" :pageNumber="n" :curPage="curPage" /> </div> </div> </template> <script> import Item from '@/components/Item.vue'; import PageButton from '@/components/PageButton.vue'; export default { components: { Item, PageButton }, props: { items: Array, itemNumPerPage: Number, }, data() { return { curPage: 1, // curPage starts from 1 pageNum: 0, // number os pages } }, created() { this.calcPageNum(); }, computed: { displayItems() { const startIdx = (this.curPage - 1) * this.itemNumPerPage; const endIdx = startIdx + this.itemNumPerPage; return this.items.slice(startIdx, endIdx); }, }, methods: { changePage(value) { this.curPage = value; }, calcPageNum() { this.pageNum = Math.ceil(this.items.length / this.itemNumPerPage); } } } </script> itemコンポーネントは単に渡した数字を表示しているだけなので省きます。 実際に画面に表示したいアイテム部分列を選んでいるのは算出プロパティdisplayItemsです。 displayItems() { const startIdx = (this.curPage - 1) * this.itemNumPerPage; const endIdx = startIdx + this.itemNumPerPage; return this.items.slice(startIdx, endIdx); } 表示したい配列部分の開始、終了インデックスを計算して、スライス関数を使って部分配列を作成して返しています（現在のページ番号を保存する変数curPageは画面に表示されているページ番号と揃えるために1スタートにしている点に注意）。 ページ数の計算はcalcPageNum関数で行っています。この関数はcreatedで呼び出しています。 calcPageNum() { this.pageNum = Math.ceil(this.items.length / this.itemNumPerPage); } Math.ceil()にしているのは、最終ページの表示アイテム数がitemNumPerPageより小さい場合でも表示できるようにするためです。 続いてPageButtonコンポーネントについて見ます。 PageButton.vue <template> <div class="page-btn"> <button @click="btnPressed" :class="{active: isCurrentPage}" >{{ pageNumber }} </button> </div> </template> <script> export default { props: { pageNumber: Number, curPage: Number }, computed: { isCurrentPage() { return this.pageNumber === this.curPage; } }, methods: { btnPressed() { this.$emit('changePage', this.pageNumber); } } } </script> propsでcurPageを受け取り、同じページ番号のボタンの背景色は変えています。 ボタンが押されたときに親コンポーネントに対してcurPageを変更するように知らせています。親コンポーネントであるpagination.vueではその知らせを受け取ったら、changePage関数を呼び出して新しいページ番号にcurPageを変更しています。 pagination.vue changePage(value) { this.curPage = value; } 以上で実装に関しては終わりです。 まとめ 本記事ではVue.jsを使ったカスタムページネーションの作成について解説しました。 時間ができたときに、一つ前、先のページに進むボタンなどを付け加えたいと思っています。 「もっとこうした方が良いよ」「こういうやり方もあるよ」というアドバイスがあれば、ぜひコメントを書いてくださると助かります。 参考資料 Pagination in Vanilla Javascript
- 投稿日：2021-06-20T22:36:00+09:00
JavaScriptでカウントダウンタイマーを作る
HTML + CSS + JavaScript でカウントダウンタイマーを作りました。ソースコードに直接記述した日時までカウントダウンします。 URL https://cordelia-sixth.github.io/countdown_timer_js/ ソースコード https://github.com/cordelia-sixth/countdown_timer_js ディレクトリ構成 app ├── index.html ├── script.js ├── style.css └── background.jpeg index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Countdown Timer</title> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <h1>Time left in 2021</h1> <div class="countdown-container"> <div class="countdown-elm"> <p class="time-text" id="days">0</p> <span>days</span> </div> <div class="countdown-elm"> <p class="time-text" id="hours">0</p> <span>hours</span> </div> <div class="countdown-elm"> <p class="time-text" id="mins">0</p> <span>mins</span> </div> <div class="countdown-elm"> <p class="time-text" id="seconds">0</p> <span>seconds</span> </div> </div> </body> </html> script.js const daysElm = document.getElementById('days'); const hoursElm = document.getElementById('hours'); const minsElm = document.getElementById('mins'); const secondsElm = document.getElementById('seconds'); // ここに好きな日時を記述する // 西暦 月 日 const target = '2022 1 1'; function countDown() { const targetDate = new Date(target); const currentDate = new Date(); const totalSeconds = (targetDate - currentDate) / 1000; const days = Math.floor(totalSeconds / 3600 / 24); const hours = Math.floor(totalSeconds / 3600) % 24; const mins = Math.floor(totalSeconds / 60) % 60; const seconds = Math.floor(totalSeconds % 60); daysElm.innerHTML = days; hoursElm.innerHTML = formatTime(hours); minsElm.innerHTML = formatTime(mins); secondsElm.innerHTML = formatTime(seconds); } function formatTime(time) { return time < 10 ? `0${time}` : time; } setInterval(countDown, 1000); countDown()がタイマー処理です。setInterval()により1秒ごとに呼び出されて時間が更新されます。 formatTime()で表示される時間を整形しています。時間、分、秒が10以下の場合は常にゼロを表示させてレイアウトが崩れるのを防いでいます。 style.css @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); * { box-sizing: border-box; } body { background-image: url(./background.jpeg); background-size: cover; background-position: center center; display: flex; flex-direction: column; align-items: center; min-height: 100vh; font-family: 'Source Sans Pro', sans-serif; margin: 0; } h1 { font-weight: normal; font-size: 4rem; margin-top: 5rem; } .countdown-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .time-text { font-weight: bold; font-size: 6rem; line-height: 1; margin: 1rem 2rem; } .countdown-elm { text-align: center; } .countdown-elm span { font-size: 1.2rem; } 終わりに 時間の計算方法がとても勉強になりました。こういった単位換算が苦手なので...。次は日時を入力できるフォームを追加したり、複数のタイマーを表示できるようにしてみたいですね！ 読んでいただきありがとうございました！フィードバックしていただけたら嬉しいです！ URL https://cordelia-sixth.github.io/countdown_timer_js/ ソースコード https://github.com/cordelia-sixth/countdown_timer_js 参考 リンク Github https://github.com/cordelia-sixth Products https://raindrop.io/cordelia/my-products-18715918 Qiita https://qiita.com/cordelia Twitter https://twitter.com/cordelia_sixth
- 投稿日：2021-06-20T16:33:04+09:00
CSS Architecture
CSS Architecture Pattern OOCSS http://oocss.org/ https://github.com/stubbornella/oocss https://www.slideshare.net/stubbornella/object-oriented-css/ SMACSS http://smacss.com/ja BEM https://en.bem.info/ APBCSS https://apbcss.com/ FLOCSS https://github.com/hiloki/flocss RSCSS https://rscss.io/ Detail OOCSS Object-Oriented CSS (オブジェクト指向CSS) - Separate structure and skin - Separate container and content SMACSS Scalable and Modular Architecture for CSS - ベースルール - このルールはほとんど単独で1つの要素セレクタとなるが、属性セレクタや疑似クラスセレクタ、子セレクタ、兄弟セレクタを利用することもできる。原則的にベーススタイルはあるページにおいての要素に対して、その要素の見た目がこうであると定義するものになる。 - レイアウトルール - レイアウトルールはページをセクション毎に分割する。レイアウトは1つ以上のモジュールを保持する。 - モジュール - デザインにおいて再利用可能なモジュラーパーツだ。吹き出しであり、サイドバーセクションであり、商品リストなどはその例になる。 - 状態(ステート) - ある特定の状態においてモジュールやレイアウトがどうスタイルされるかを説明する方法だ。 - テーマ - 状態(ステート)ルールとモジュールやレイアウトがどう見えるかという点では同様のルールとなる。 BEM BEM (Block, Element, Modifier) is a component-based approach to web development. - Block - The block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big). - The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block. - Element - The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.). - The structure of an element's full name is block-name__element-name. The element name is separated from the block name with a double underscore (__). - Modifier - The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top). - The modifier name is separated from the block or element name by a single underscore (_). APBCSS Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) - Atomic：Class name of atom - Module：UI package name - Skin：Class name of decoration - Number：Numbering of the class name - State：Class name that represents the state - Other：Other class name FLOCSS FLOCSSは次の3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。 - Foundation - reset/normalize/base... - Layout - header/main/sidebar/footer... - Object - Component - grid/button/form/media... - Project - articles/ranking/promo... - Utility - clearfix/display/margin... RSCSS Reasonable System for CSS Stylesheet Structure. - Elements - reset/normalize/base...Elements are things inside your component. - Variants - Components may have variants. Elements may have variants, too. - Nested components - Layouts - Helpers
- 投稿日：2021-06-20T12:20:08+09:00
フロントエンドで気をつけることをまとめる
あらすじ バックエンドがメイン開発な私がフロントエンドに苦闘した２週間を振り返る。HTML,CSS,JSの知識が多少なりともあってフレームワークだったらBootstrapが一番使ったことがあるって感じのエンジニアが、既存のデザインをいじったがレスポンシブ対応を完全にできなかった。そんな出来事から良くなかったことを反省して次に生かそうと思う。 VueのライブラリVuetifyを導入する策を講じた RailsオンリーのSSRでコツコツerbを使ってフロントエンドをつくってきたプロジェクトですが、レスポンシブ対応ができないんだったらVuetifyを入れてサーバーサイドとクライアントサイドで完全に分けちゃおうって思って、この策を講じることにした。vueをなぜ使おうかと思ったのは今後デザインの管理がしやすいのと、ライブラリが多様にあるのでレスポンシブやらSPAやらうまい具合に使ってUIめっちゃ向上するんじゃないのかと思ったからです。結論は、erbを使ったSSRでは、長時間かけないと切り替えられないなという結果でした。erb前提のroutingになっているのでAPI化にするのは作業工程が多すぎるなと感じて撤退しました。 そのまま突っ走って既存CSSで対応していこう メディアクエリが一応設けられているcssなのでこのまま細分化していって対応することもできると考えましたが、リソースがないのを考えるとbootstrapやらbulmaやらのフレームワークつかっちゃった方が得策だなと感じフレームワークを使うことになりました。 Bootstrapを使いましょうか 私自身がBootstrapを使ったことが一番多いので、他のフレームワークを使わずにBootstrapを使いますかと脳筋スタイルで進めようと思っていましたが、アメリカ人エンジニアさんがBootstrapは重いから軽量のレスポンシブ対応のみできるフレームワークを使おうよとなりBulmaへ。 Bulmaで決まりだ 結果的にBulmaになりました。実際に実装してもらったのはアメリカ人エンジニアさんなのですが、ボタンもBootstrapから卒業してレスポンシブ対応の方法も簡潔で違ったフレームワークを使うとデフォルト感がなくなるので良いですね。どうしてもBootstrap使うと見慣れた感を感じるユーザーがいると思うのでデザインに手を抜いているなとか思われる可能性考えたら良い到着点だったのかなと思います。本当、試行錯誤は長い時間かけたらまずいですが、早いスパンで繰り返すのは大切だなと改めて感じました。 まとめ フロントエンドに時間をかけるリソースがない開発は、用途にあったフレームワークを決めるのは大切。 vueやらreactを使った方が間違いなくUIは改善できると思う。 話し合いは大切。 技術選定はなるべく早く。切り替えるのは時間がもったいない。
- 投稿日：2021-06-20T12:20:08+09:00
フロントエンドの技術選定に時間がかかった話
あらすじ バックエンドがメイン開発な私がフロントエンドに苦闘した２週間を振り返る。HTML,CSS,JSの知識が多少なりともあってフレームワークだったらBootstrapが一番使ったことがあるって感じのエンジニアが、既存のデザインをいじったがレスポンシブ対応を完全にできなかった。そんな出来事から良くなかったことを反省して次に生かそうと思う。 VueのライブラリVuetifyを導入する策を講じた RailsオンリーのSSRでコツコツerbを使ってフロントエンドをつくってきたプロジェクトですが、レスポンシブ対応ができないんだったらVuetifyを入れてサーバーサイドとクライアントサイドで完全に分けちゃおうって思って、この策を講じることにした。vueをなぜ使おうかと思ったのは今後デザインの管理がしやすいのと、ライブラリが多様にあるのでレスポンシブやらSPAやらうまい具合に使ってUIめっちゃ向上するんじゃないのかと思ったからです。結論は、erbを使ったSSRでは、長時間かけないと切り替えられないなという結果でした。erb前提のroutingになっているのでAPI化にするのは作業工程が多すぎるなと感じて撤退しました。 そのまま突っ走って既存CSSで対応していこう メディアクエリが一応設けられているcssなのでこのまま細分化していって対応することもできると考えましたが、リソースがないのを考えるとbootstrapやらbulmaやらのフレームワークつかっちゃった方が得策だなと感じフレームワークを使うことになりました。 Bootstrapを使いましょうか 私自身がBootstrapを使ったことが一番多いので、他のフレームワークを使わずにBootstrapを使いますかと脳筋スタイルで進めようと思っていましたが、アメリカ人エンジニアさんがBootstrapは重いから軽量のレスポンシブ対応のみできるフレームワークを使おうよとなりBulmaへ。 Bulmaで決まりだ 結果的にBulmaになりました。実際に実装してもらったのはアメリカ人エンジニアさんなのですが、ボタンもBootstrapから卒業してレスポンシブ対応の方法も簡潔で違ったフレームワークを使うとデフォルト感がなくなるので良いですね。どうしてもBootstrap使うと見慣れた感を感じるユーザーがいると思うのでデザインに手を抜いているなとか思われる可能性考えたら良い到着点だったのかなと思います。本当、試行錯誤は長い時間かけたらまずいですが、早いスパンで繰り返すのは大切だなと改めて感じました。 まとめ フロントエンドに時間をかけるリソースがない開発は、用途にあったフレームワークを決めるのは大切。 vueやらreactを使った方が間違いなくUIは改善できると思う。 話し合いは大切。 技術選定はなるべく早く。切り替えるのは時間がもったいない。
- 投稿日：2021-06-20T09:54:04+09:00
jQueryを使った企業の宣伝サンプルWebページ
jQueryを使った企業の宣伝サンプルWebページを作成いたしました。 <!DOCTYPE html> <!-- 作成者 乃木坂好きのITエンジニア --> <!-- 作成日 2021/6/20 --> <html lang="ja"> <head> <meta charset="utf-8"> <title>アニメーション2</title> </head> <script src="jquery.js"></script> <script> $(function(){ $('h1').click(function(){ $('h1').css('color','blue'); }); }); $(function(){ $('h2').click(function(){ $('h2').css('background-color','yellow'); }); }); $(function(){ $('h3').click(function(){ $('h3').css('color','black'); $('h3').css('background-color','aqua'); }); }); $(function(){ $('h5').click(function(){ $('h5').css('color','black'); $('h5').css('background-color','lightgreen'); }); }); $(function(){ for(var num=0;num<10;num++){ $('h6').fadeOut(); $('h6').fadeIn(); } }); function fuori(){ let i = 0; while (i< 1){ window.open('http://www.fuoriclasse2.com','flora','width=480,height=360'); i++; } } </script> <style> .euro2020 { color:red; font-size:80px; text-align:center; padding:120px; } .fra { color:black; font-size:70px; text-align: center; padding:100px; } .esp { color:lawngreen; font-size:50px; text-align: center; color:darkred; padding: 100px; } .por { background-color:lightgreen; text-align: center; color:darkred; font-size:50px; padding: 100px; } .freestyle1 { background-color:floralwhite; text-align: center; color:mediumvioletred; font-size:50px; padding: 100px; } .fuori { background-color:lightgreen; text-align: center; border: 1px solid #b7a077; border-radius: 5px; color:deeppink; font-size:40px; padding: 50px; float:right; } #aono1 { font-size:50px; color:red; background-color:aquamarine; text-align: center; padding:200px; } .aono2 { font-size:10px; color:blue; } </style> <body> <h1 class="euro2020">EURO2020開催中</h1> <h2 class="fra">フランスがやらかした</h2> <h3 class="esp" >スペインもやらかした</h3> <h4 class="por">ポルトガル・・・・</h4> <h5 id="aono1" onLoad="tm()"><img src="aono.jpg" alt="ダークヒーロー青野" width="800",height="600" ><br><br>フリースタイル社長の<span>青野豪淑</span>です</h5> <h6 class="freestyle1">フリースタイルはサッカーゲームを作ります。<br>fuori-classeの皆さん期待してください</h6> <br> <a class="fuori" onclick=fuori()>fuori-classe</a> <br> <br> <br> <br> <br> <br> <br> </body> <footer> <small class="aono2">© 青野豪淑</small> </footer> jQueryの機能を使うとタグの文字を変えたり、タグ部分の背景色を変えたり、for文で文字の表示、非表示が出来ます。動的にWebページが出来て便利です。
- 投稿日：2021-06-20T09:41:04+09:00
CSSだけでうちわを作る
どうも7noteです。毎日暑い日が続くからCSSでうちわを作って涼みたい。 毎日毎日汗を拭いながら働く日々。 そんな辛い日々を癒してくれるうちわがあればいいなと。 CSSで作ってしまいましょう。 ソース index.html <div class="uchiwa"> <div class="mochite"></div> </div> style.css .uchiwa { width: 200px; height: 200px; background: #D9E3EC; /* background: url(uchiwa.png) center center / contain; */ /* 画像うちわ用 */ /* border: 1px solid #ccc; */ border-radius: 50%; position: relative; } .mochite { content: ''; width: 75%; height: 75%; background: #fff; border-radius: 50%; overflow: hidden; display: inline-block; position: absolute; bottom: -50%; left: 0; right: 0; margin: auto; } .mochite::before { content: ""; width: 80%; height: 70%; display: inline-block; background-image: linear-gradient(90deg, #fff 25%, #DDB76D 25%, #DDB76D 50%, #fff 50%, #fff 75%,#DDB76D 75%, #DDB76D); background-size: 4px 4px; border-bottom: solid 2px #DDB76D; border-radius: 50%; transform: perspective(.6em) rotateX(-380deg); transform-origin: bottom; position: absolute; top: -40%; left: 0; right: 0; margin: auto; } .mochite::after { content: ''; width: 9%; height: 50%; background: #DDB76D; display: inline-block; position: absolute; bottom: 20%; left: 0; right: 0; margin: auto; } 解説 丸に白い丸を重ねて紙の部分を作成。 そこに持ち手をつければ完成です。 紙の部分は好きな写真をはめ込んで推しうちわを作ったりもできますよ。 骨組みの部分はかなり無理矢理作ってるので解説は省きます。。。 まとめ 「結論」 CSSでうちわを作っても涼しくはならない。 けどCSSの練習にはなるかも。クーラー最高！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-06-20T05:55:35+09:00
初心者がWEBデザインするなら、STUDIO ！（ヘッダー編）
今回はwebサイト制作で挫折しまくり初心者の私が、見つけた救世主"STUDIO"を使用して レスポンシブ対応からSEO対策まで備えたウェブサイトを作成します！ しかも全て、、、、、、、ノーコードで！！！最高すぎませんか？ STUDIOは日本に本社を構えるSTUDIO株式会社が2018年4月に正式リリースした国産のホームページ制作ツールです。２０２０年6月にはCMS機能も追加されました！ 公式サイトSTUDIOで登録を行い基本無料で作成から公開までできる。 また有料コンテンツでは追加機能や独自ドメイン接続、外部アプリ連携などもできます。 STUDIOについてメリット、デメリットを説明します。 メリット ・ノーコードでデザインができる ・テンプレだけでなく自由度の高いデザインができる ・動きのあるデザインも簡単に作れ、細かく設定できる ・デザイン⇨公開までが簡単 ・レスポンシブ対応が簡単にできる ・チュートリアル動画も無料で充実 デメリット ・html、cssの必要最低限の知識がいる ・STUDIOに実装されていない機能は使えない 今回はheader部分を作成しレスポンシブ対応にさせました。モバイル対応のところは憧れのハンバーガーメニューを実装しました。STUDIOを使ってわずか３時間程で完成しました。 操作方法に慣れるまで大変かもしれませんが、それでも圧倒的に目で確認しながらレイアウトできると、楽しいですし分かりやすいと思います。 ではheaderの作成方法について ①、左作業スペースにあるメニューからボックスを選ぶ初期値は ②、右側の作業メニューでタブの種類変更ができるので、headerに変更。大きさは適当に横１００％、縦７０pxとかに始めはしてます。 ③、まず私は企業のロゴを配置したかったのでボックスからimageを選択 右クリックでimageボックスに入れる画像を選ぶ。アップロードした画像を指定 ④、headerのボックスにimageを入れます ※この時 imageボックスの横幅、縦幅がhederボックスより大きいと入らないので注意！ ⑤、上記と同じような手順でメニューバーも作って行きます。テキストをlistボックスに入れて 一つ目の文字サイズ、文字間を調節したらコピーアンドペーストで必要項目分作ると時短です。 ⑥、メニュー項目ができたら、nuvボックスを作って中に入れて行きます。 要素を入れたら横並びに指定しましょう。padding等間隔調整もここでします。上部メニューに項目がありますので各要素ごとに行ってください。 ⑦、nuvボックスをheaderボックスに入れます。あとはボックス外側にある整列ようタブで調整するだけです。 ⑧、完成です。 ちなみに私が作ったのはこちら（PC用header） （モバイル用header）ハンバーガーメニューで メニューを開く動きからシャドーなど簡単にボタンで操作できます。 上記説明で分かりずらい方もいらっしゃると思うのでまずは自分でチュートリアルも見ながら、STUDIOを使ってみることをオススメします！ハンバーガーメニューはチュートリアルの項目にもありますのでぜひ作ってみてください！ では、また作成次第更新して行きます