タグ「Step」 - はてブログ

タグ Step

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 108件)

GitHub ActionsにおけるStep/Job/Workflow設計論

2022/05/17 195 users job GitHub Actions コマンド複数個処理

この記事について GitHub Actionsには、以下3つの実行単位が存在します。 Workflow Job Step パイプラインを組む中で出てくる複数個の処理を、1つの実行単位でまとめてしまうか、それとも分割するのかというのは悩むポイントかと思います。一つのstepのrunフィールドにコマンドを詰め込む？それともstepを分けた方がい... 続きを読む

相談役　島耕作 - 弘兼憲史 / ＳＴＥＰ　３７　Ｉ　Ｈｅａｒ　Ａ　Ｓｙｍｐｈｏｎｙ | コミックDAYS

2021/02/26 176 users 弘兼憲史コミックDAYS 軸足島耕作金字塔

相談役　島耕作弘兼憲史テコット会長を退任した島耕作は、相談役へ就任する。社業を離れ、その軸足は政治、経済、国際の諸問題へ。日本の未来のために島が次に取り組む仕事とは――。「島耕作」シリーズ開始から36年目、新たな局面を迎えたサラリーマン漫画の金字塔！続きを読む

Reactを自作しよう

2020/11/22 351 users React アーキテクチャ必須機能実際

この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: Concurrent Mode Step 4: ファイバー Step 5: Render Phase と C... 続きを読む

ノーコードでWebページをスクレイプできるChrome拡張「AnyPicker」 - エンジニア・プログラマのソーシャルITメディア

2019/10/09 433 users プログラマ Chrome拡張エンジニアノーコード全部

◆ AnyPicker https://anypicker.ryang-studio.com/ 紹介「AnyPicker」は、ノーコードでWebページをスクレイプできるChrome拡張ツールです。 Chrome拡張機能をインストール後、スクレイプするWebサイトを開くとこのようなサイドバーが出現します。 STEPは全部で5つあり、その1つ目がこちら。今回は初めての登録なので「N... 続きを読む

[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It | コリス

2019/01/28 149 users コリス class stylesheet スクリプト Libs

アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jque... 続きを読む

[JS]ふわりとした動きが気持ちいい！スクロールするとコンテンツが後から追いかけるように表示されるスクリプト – Flow Up | コリス

2015/10/09 73 users エフェクトコリスデモパネル定位置

ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されるシンプルなスクリプトを紹介します。ずっと気にかけてたエフェクトだったのですが、このスクリプトを使うと簡単に実装できます。デモの動きスクロールすると、後から追いかけるようにふわりと定位置に収まります。 Flow Upの使い方 Step 1: 外部ファイル当スクリプトとjquery.j... 続きを読む

ブログを月間30万PVまでアクセスアップさせた全手法 | ブログマーケッターJUNICHI

2015/10/04 271 users ブログマーケッターJUNICHI 多くアクセス数書き方

今のあなたのブログ運営状況に合わせた方法を実践してみて下さい！ STEP１　WordPressブログを作ろう！ STEP2　ブログを書きはじめるまでに考えておきたい事 STEP3　ブログの書き方 STEP4　ブロブログを運営しているなら、一人でも多くの人に読んでもらいたいですよね？でも、書いても書いてもアクセス数が上がらない！そんなあなたの為に、ブログのアクセスアップ方法をまとめ... 続きを読む

[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height | コリス

2015/09/10 179 users コリス script Body スクリプトレスポンシブ対応

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備当スクリプトを外部ファイルとして記述し、初期化しておきます。スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init();... 続きを読む

GitHub + CircleCI + Capistrano + Slack + Hubot で快適リリース生活 | QUARTETCOM TECH BLOG

2015/09/07 71 users GitHub Capistrano Hubot Slack

こんにちは、@qckanemotoです。先日、Symfony Meetup #5のLTでChatOpsについて発表させていただきました。発表に使用したスライドはこちらにあります。ここでは、その発表の内容をもう少し詳しく解説したいと思います。大きく5つのステップに分けて、一つずつ解説していきます。少し長いですがお付き合いください。 Step 1. CIの導入 Step 2. Capistrano... 続きを読む

[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop | コリス

2015/09/01 72 users コリススライダー stylesheet rotate

アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="pa... 続きを読む

[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid | コリス

2015/08/25 93 users コリスチューイングガム CSS head レスポンシブ対応

テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。デモはサイズの可変可能 chewing-grid.cssの使い方 Step 1: 外部ファイル当スタイルシートを外部ファイルとして記述します。 <head> ... ... 続きを読む

[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid | コリス

2015/08/03 338 users jQuery コリス Body スクリプトデモ

レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。デモのアニメーション minigridの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/m... 続きを読む

[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js | コリス

2015/07/13 69 users jquery.js ヘッダ Body コリススクリプト

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <body... 続きを読む

[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js | コリス

2015/06/30 90 users コリス script プルダウンエレメント Body

デモページ物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定... 続きを読む

[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons | コリス

2015/06/16 97 users メタファコリススクリプトアニメーションデモ

Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル当スタイル... 続きを読む

[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu | コリス

2015/05/29 77 users コリス stylesheet スクリプトスクロールバー

デフォルトのスクロールバーも表示ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head>... 続きを読む

[JS]変形アニメーションがかっこいい！アイコンをクリック・タップすると別のアイコンに変えるスクリプト -iconate.js | コリス

2015/05/26 129 users コリススクリプト変形アニメーション単体アニメーション

オフキャンバスメニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させる単体のスクリプトを紹介します。実装も非常に簡単で、それぞれのアイコンとアニメーションを指定するだけでOK。「zoomOut」「rubberBank」のアニメーション例 iconate.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとし... 続きを読む

実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー | コリス

2015/05/19 143 users head スピナーコリス link rel ローディング時

ページのローディング時によく使われる、デザインがかわいく、アニメーションもかわいいCSSで実装されたスピナーを紹介します。 divひとつのミニマルなHTMLで、簡単に実装できます。スピナーの実装実装は、簡単です。「弾むボール」を例に、説明します。 Step 1: 外部ファイル各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel=... 続きを読む

[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js | コリス

2015/05/13 156 users コリス ESC boot Bootstrap スクリプト

デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Boot... 続きを読む

[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory | コリス

2015/04/09 78 users コリスイージングミニマルスライダースクリプト

デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides">... 続きを読む

旅のお供

2015/03/29 159 users お供しおり順番 Step1 地図

「旅のお供」は旅のしおりを作って、友達と共有できるサービスです。「旅のお供」は旅のしおりを友達と共有できるサービスです旅の名前を決めてさっそくしおりを作ってみよう！「旅のお供」の使い方 step1 旅のタイトルを決めましょう。 step2 行きたい場所を挙げていきましょう。地図を入れたり、行きたい順番に並び替えると便利に使えます。 step3 できたしおりはみんなに送りましょう。共有した人... 続きを読む

[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js | コリス

2015/03/16 140 users コリス jQuery head jquery.js スクリプト

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type... 続きを読む

Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas | コリス

2015/03/06 187 users コリス head Bootstrap CSS スクリプト

Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <l... 続きを読む

[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs | コリス

2015/01/26 64 users head コリス jquery.js script src

デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></sc... 続きを読む

各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR | コリス

2014/12/19 65 users Onepager コリス div section要素カーテン

div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファ... 続きを読む