20210411のHTMLに関する記事は13件です。

cssだけで電球を作ったので、jsと組み合わせてwebサイトを明るくしてみた

どうも7noteです。電球を作って、サイトを明るく照らしてみた。 全然関係ないですが、市販の電球って、わざと寿命が設定されているらしいですね。 中心部分のぐるぐるのところ(フィラメント)を超ほそくしておくことで、何年かで切れるとか。 なのでフィラメントがそれなりに太い電球を作れば生きてる間は切れない電球とかも作れるのかも。(実際に100年以上ついてる電球があるらしい) 余計な話をはさみつつ、本題のソースもたいして使い道がないものですが、cssだけで電球を作ってみたくなって、さらにクリックで電気付けられたら面白いのでは?というただの思いつきで作ってみました。 HTML・CSS・javascriptだけでゲーム作ります!ってときくらいにしか使えなさそう。 電気屋さんのホームページを作るのにこのアイデア使ってwebサイトとか作ったら面白そうかも。 (探せばすでにそんなサイトあるかも・・・) ソースはかなり汚いかもですがご容赦ください。 ソース index.html <div class="light"> <div class="grass"> <div class="circle"></div> <div class="neck"></div> <div class="filament"><span></span><span></span></div> </div> <div class="screw"><span></span><span></span><span></span></div> </div> style.css body { background: #000; /* 初期状態はまっくらにしておく */ } .light { width: 200px; } /* 電球のガラス部分のcss */ .light .grass { width: 150px; margin: 0 auto; position: relative; } .light .grass .circle { width: 150px; height: 150px; border: 2px solid #111; border-radius: 100%; } .light .grass .neck { width: 60px; height: 20px; margin: -9px auto 0; border-left: 2px solid #111; border-right: 2px solid #111; } /* 電球のフィラメント */ .light .grass .filament { position: absolute; bottom: 40px; left: 40%; } .light .grass .filament span { width: 30px; height: 15px; border-radius: 15px 15px 0 0; border-top: 2px solid #111; position: relative; display: inline-block; margin-left: -10px; } .light .grass .filament span:first-child::after { content: ""; display: block; width: 10px; height: 5px; border-radius: 0 0 5px 5px; border-bottom: 2px solid #111; position: absolute; right: 0; bottom: -6px; } /* 電球のネジ部分 */ .light .screw { width: 70px; margin: 0 auto; position: relative; } .light .screw::after { content: ""; width: 20px; height: 20px; border: 2px solid #111; border-radius: 50%; display: inline-block; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: -1; } .light .screw span { display: block; height: 7px; border: 2px solid #111; border-radius: 10px; } /* カーソルについてくる文字 */ #cursor{ position: fixed; z-index: 2; pointer-events: none; color: #CCC; } /* 明るくなったときの色を指定 */ body.on { background: #fff; } body.on .light .grass .circle { background: #ECD05D; } body.on .light .grass .neck { background: #ECD05D; } body.on .light .screw::after { background: #A5A3A5; } body.on .light .screw span { background: #A5A3A5; } /* 明るくなったらカーソルについてくる文字は消す */ body.on #cursor { display: none; } script.js /* 電気のスイッチ */ $('body').click(function() { $(this).toggleClass("on"); }) /* カーソルについてくる文字 */ $(function(){ var cursor=$("#cursor"); // カーソルになる要素を指定 $(document).on("mousemove",function(e){ // マウスカーソルが動いた時に実行 var x=e.clientX + 10; // カーソルの横座標を取得 var y=e.clientY + 10; // カーソルの縦座標を取得 // 取得した座標をCSSに反映させる cursor.css({ "top":y+"px", "left":x+"px" }); }); }); (※jQueryを使用しています。jQueryってなんだという方はこちら) まとめ 各種パーツの作り方解説 ・ついてくる文字の作り方はこちら ・またフィラメントのぐるぐるの作り方はこちらから 本当は集中線とか付けて明るくなっている感じを作るのも考えたのですが、きれいに書ける方法が思いつかなかったので保留しました。 また思いついたらいろいろ作ってみようと思います。 おそまつ! ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

imgタグにImageFluxを適用するjQueryプラグインを作った

ピクシブ株式会社とさくらインターネット株式会社が開発した画像変換配信サービス ImageFlux をimgタグに簡単に適用できるjQueryプラグインを作ってみました。 ImageFluxの仕組み ImageFluxにはオリジンサーバを設定し、それに対応したドメインが割り当てられます。CDNに似てますね。 ImageFluxのドメインに対して変換パラメータ付きで画像のパスを指定することで、変換パラメータ通りに変換され、キャッシュされます。 最も簡単で効果的な使い方はWebPへの変換でしょう。 例えば、オリジンが https://www.example.com/、 対応するImageFluxのドメインが p1-XXXXXXXX.imageflux.jp の場合、imgタグを以下のようにすることで、WebPに対応したブラウザに対してWebPで画像を配信することができます。 変更前 <img src="https://www.example.com/images/some-image.jpg"/> 変更後 <img src="https://p1-XXXXXXXX.imageflux.jp/f=webp:auto/images/some-image.jpg"/> ImageFluxではいろいろと変換パラメータを指定することができます。詳しくはドキュメントをご覧ください。 (フォーマット webp:auto は、ブラウザがWebPに対応している場合はWebP、対応していない場合はオリジナル画像のフォーマットで出力されるオプションです。) jQuery ImageFlux Plugin 上記のようなパラメータをsrc属性に指定するのはめんどくさいので、まとめて指定できるjQueryプラグインを作りました。 github.com/chibiegg/jquery-imageflux 詳しい使い方はREADME.mdに書きましたが、簡単に紹介したいと思います。 imgタグの src 属性の代わりに、data-imgflx-src属性に画像へのパスを指定し、プラグインを実行するという形になります。 変換パラメータはプラグインへのオプション辞書として渡すか、imgタグのdata属性として渡すことができます。 例えばこんな感じの使い方になります。 JavaScript <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.imageflux.min.js"></script> <script type="text/javascript"> $(function(){ $('img[data-imgflx-src]').imageflux({ host: 'p1-XXXXXXXX.imageflux.jp', format: 'webp:auto', allowUpscale: false, width: 300 }); }); </script> HTML <img data-imgflx-src="/images/some-image.jpg" /> <img data-imgflx-src="/images/awsome-image.jpg" data-imgflx-width="500" data-imgflx-quality="60" /> この例では、オプション辞書により、フォーマットは webp:auto、拡大はしない、幅は300px、とし、2つめの画像では幅と品質をdata属性で上書きしています。 このようにすることで、以下のようなsrc属性と同様の効果が得られます。 変換後 <img src="https://p1-XXXXXXXX.imageflux.jp/f=webp:auto,u=0,w=300/images/some-image.jpg" /> <img src="https://p1-XXXXXXXX.imageflux.jp/f=webp:auto,u=0,w=500,q=60/images/awsome-image.jpg" /> さいごに 現在ImageFluxは問い合わせ対応によってサービス提供がされていますが、簡単に利用できるようにしたいですね。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

[web制作] 痒いところに手が届くカード実装 ①

皆さんはこのデザインをどの様に実装しますか。 このデザインをコーダーさんに依頼した際に帰ってくる実装は大きく分けて3パターン考えられると思います。 HTMLは以下です。 index <ul class="list"> <li class="card"> <p class="title">タイトル</p> <figure><img src="http://placehold.it/200" alt=""/></figure> <p class="text">本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります</p> </li> <li class="card"> <p class="title">タイトルタイトルタイトル<br>タイトル</p> <figure><img src="http://placehold.it/200" alt=""/></figure> <p class="text">本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります</p> </li> </ul> パターン1 画像と本文の開始位置がズレていますね。flexでチャチャッと実装するとこんな感じになります。 flexで二つのカードを横並びにしているのでカード自体の高さは揃いますが、それだけだとテキスト量が変わった時にレイアウトが崩れやすいので、注意が必要です。 コードはこちらです。 style .list{ display: flex; justify-content: space-between; } .card{ width: 350px; background: #f7f7f7; position: relative; padding: 20px 25px 25px; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.4); } .title{ text-align: center; font-size: 20px; margin-bottom: 20px; } .text{ margin-top: 20px; font-size: 18px; line-height: 1.5; } パターン2 こちらは、単体のカードに対してもflexboxを使い、その子要素である画像に対して、margin-top:auto;をかけることで開始位置を揃えています。 style .card{ display: flex; flex-direction: column; } figure{ margin-top: auto; } パターン1のズレは解消出来ていますが、タイトルの上下の余白が若干違っています。よく見るとデザインはタイトルの開始位置が揃っていませんね。 パターン3 こちらはデザイン通りに実装できていますね。 タイトル部分に固定値のheightを指定し、flexで位置を調整しています。 heightの値は、二行の方のタイトルの高さを測りそれを指定しています。 コードはこちらです。 style .title{ display: flex; align-items: center; justify-content: center; text-align: center; height: 60px; font-size: 20px; } 最後に 今回はデザインの正解をパターン3としましたが、パターン2のデザインもよく見られると思います。パターン3の実装に関しては、僕がこれしか思いつかなかったので、これを使っているだけです。正直、テキストにheightを指定するのは、違和感がありますよね。代替案があればご教授いただけると幸いです。 参考 flexboxを使って簡単に要素の高さを備える方法。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Reactハンズオン

Reactハンズオン はじめに この記事では、ハンズオン形式でReactの基礎を学ぶことができます。JavaScriptがなんとなく読める程度の知識があると読みやすいかと思います。 研修の流れ Reactとは Reactの環境構築 Reactでカウントアプリ/タスク管理アプリを作ってみる Reactとは ReactはJavaScriptのライブラリです。Reactを使うことでWEBページを独自の記法で簡単に作成することができます。 HTMLとかCSSで作らないの? WEBページの作り方を学ぶ際、はじめにHTMLやCSSを使った作成方法を学ぶかと思います。ReactでWEBページを作成するときも、最終的にはReactの記述を元にhtmlやcssなどのファイルが自動で生成されます。具体的にはnpm run buildを実行するとbuildフォルダが生成され、その中にindex.htmlやその他諸々のファイルが生成されます。つまり、buildフォルダをサーバに置けばサイトを公開することができます。 Reactの特徴 コンポーネント単位でページを作成することができる コンポーネントとは、WEBページの各パーツのことです。例えば、ヘッダーとかボタンとかその他諸々 コンポーネントを再利用することで簡潔なコードになる Reactの環境構築 Node.jsが入っている前提です。 npmを最新にする。 npm update npm create-react-appをインストール。 npm install -g create-react-app これでReactの開発環境が整いました。 Reactでカウントアプリ/タスク管理アプリを作ってみる Reactアプリを作成して表示する デスクトップに移動。 cd デスクトップのパス アプリを作成する。 npx create-react-app my-app 作成したアプリに移動。 cd my-app サーバを立てる。 npm start これでサーバが立ち上がります。ブラウザを立ち上げてlocalhost:3000を開くとWEBサイトが表示できているかと思います。 Reactアプリの構成 ここで、my-appがどのような構成になっているか見てみます。my-appをエディタで開いてみてください。 フォルダの中にはいくつかのファイルやフォルダがありますが、まず知っておくべきものはpublicとsrcの2つです。 public:Webで公開されるファイルを置いておくフォルダ src:Reactのソースコードやそれに関連するデータを置いておくフォルダ HelloWorldを表示してみる では、今表示されているページの代わりにHelloWorldという文字だけのページを表示してみましょう。 1. src/App.jsの<div className="App">...</div>を削除する。 2. 代わりに<h2>HelloWorld</h2>と書き込む。 ブラウザを確認してみると、HelloWorldが表示されているかと思います。このように、表示する内容を変更する場合にはreturn内を変更することになります。ここではHTMLの記法で記述することができます。 厳密にはJSXという記法になります。HTMLとの違いはほとんどありません。強いて言えば、JSXではタグは必ず閉じなければならないので<img src="...">は<img src="..."></img>とするか<img src="" />とする必要があります。 表示処理の流れ 先ほどApp.jsを編集しましたが、変更したデータはどのような流れで処理され表示されるのでしょうか。結論から言うと、先ほど変更したApp.jsのデータは、同じ階層にあるindex.jsに渡された後、ReactDOM.render関数によってpublic/index.htmlの<div id="root"></div>の子要素として追加されます。 カウントアプリを作ってみる 表示までの流れがわかったところで、実際にカウントアプリを作成してみましょう。今回作成するカウントアプリは、ボタンを押すと表示されている数が+1されるシンプルなものです。 function App() { ... }を削除 代わりに以下のコードを貼り付け class App extends React.Component { render() { return ( <div> <h2>タイトル</h2> <div>0</div> <button>COUNT UP</button> </div> ); } } 冒頭部分にimport React from 'react';を追記。 ブラウザにカウントアプリのページが表示されているか確認してください。ここでは、function App() { ... }を削除しclass App extends React.Component { ... }に置き換えましたが、どちらもreturn内に記述した要素が表示されるという点は同じです。なぜ置き換えたかや細かい違いは後ほど説明します。 さて、表示されたページにはタイトルとカウント、ボタンが表示されています。現在はボタンを押してもカウント数は変わりません。ではここからReactの記法を使って機能を追加していきましょう。 まずはタイトルを変更していきます。 1. render() { ... }の上に以下を追加 constructor(props) { super(props); this.title = "カウントアプリ"; } タイトルを{ this.title }に置き換え ブラウザを確認するとタイトルだった所がカウントアプリになっていると思います。これは、{ this.title }の中のthis.titleがカウントアプリに置き換えられたからです。this.titleはconstructor内で定義されています。 Reactではこのように、{}の中にJavaScriptの変数を記述するとReactがhtml要素としてレンダリングしてくれます。 コメントアウトは{/* コメント文 */}で記述できます。 constructor(props) { ... }やsuper(props);の記述はJavaScriptのclassの用法になります。気になる方は「javascript class 書き方」などと調べてみてください。また、Reactではconstructorとsuperの引数にpropsを渡すことになっています。はじめのうちはこういうものなんだなぁと思っていただいて大丈夫です。 Stateを使う 次に、ボタンを押したらカウントアップしてくれる機能を追加します。 super(props);の下に以下を追加。 this.state = { count: 0 }; render() { ... }の上に以下のメソッドを追加。 countUp() { this.setState({count: this.state.count + 1 }); } <div>0</div>を<div>{ this.state.count }</div>に置き換える。 <button>COUNT UP</button>を <button onClick={ () => { this.countUp() } }>COUNT UP</button>に置き換える。 ブラウザに戻り、ボタンを押してみてください。カウントが増加しているかと思います。ここでは、ReactのStateという機能を使ってcountの値を管理しています。Stateは、変数を管理する場所のようなイメージです。 使い方は以下の通りです。 constructor内でthis.state = { 変数名: 値, 変数名: 値, ... }として初期値を指定 this.state.変数名で値にアクセス this.setState({ 変数名: 新しい値 })で値を変更 countの値を増加させるにはsetStateメソッドを実行する必要があります。今回のアプリでは、ボタンを押すとcountUpメソッドが実行され、countUpメソッドの中でsetStateメソッドが呼ばれています。 ボタンが押された時に関数を実行したい場合は、onClick={ 実行したい関数 }を属性に追加します。今回はonClick={ () => { this.countUp() } }としています。 カウントアプリの作成は以上ですが、countDownのような関数を作成して、ボタンのonClick属性にあてることでカウントダウン機能を実装することもできます。 タスク管理アプリを作ってみる では次にタスク管理アプリを作成してみましょう。今回作成するタスク管理アプリはタスク一覧の表示、タスク追加の機能があります。 class App extends React.Component { ... }を以下に置き換える。 class App extends React.Component { render() { return ( <div> <h2>タスク管理アプリ</h2> <input /> <button>追加</button> <div>1. 本を買う</div> <div>2. ランニングする</div> </div> ); } } ブラウザでタスク管理アプリが表示されていることを確認してください。今表示されているタスクは直書きです。そのため、一覧機能や追加機能は実装されていません。 では、一覧機能を追加していきましょう。まずはStateを使って、タスクの内容をまとめる配列を管理していきます。 render() { ... }の上に以下を追加する。 constructor(props) { super(props); this.state = { tasks: [ "本を買う", "ランニングする", "牛乳を買う" ] } } 以下のコードを <div>1. 本を買う</div> <div>2. ランニングする</div> 以下に置き換える。 { this.state.tasks.map( (task, index) => { return <div>{ index + 1 }. { task }</div> }) } ブラウザを確認すると、Stateのtasksで管理しているタスクが表示されているかと思います。書き換えた内容を順を追って説明していくと、 1.で、タスクを管理するtasks配列をStateの変数として定義。 2.で、tasks配列の中身を取り出して表示。 となります。2.はやや複雑ですが分解して考えるとそれほど難しくありません。 ポイントは、 アロー関数表記 mapメソッド returnの値 の3つです。 アロー関数表記 まずはアロー関数表記ですが、これは従来の関数の書き方を簡潔にした表記方法です。 // 従来 function sayHi(name) { const msg = "hi " + name; console.log(msg); } sayHi("Bob"); // hi Bob // アロー関数表記 const sayHi = (name) => { const msg = "hi " + name; console.log(msg); }; sayHi("Bob"); // hi Bob 慣れてしまえば難しくはありません。今はこういう書き方があるんだなぁくらいに思ってもらえれば大丈夫です。 mapメソッド mapメソッドは、配列の各要素に対してある処理を行うメソッドで、 配列.map(処理が書かれた関数)のように書きます。 例えば、配列array1の各要素を2倍した値からなる配列array2を得る場合は以下のように書けます。 const array1 = [2, 4, 5, 8]; const array2 = array1.map( (value) => { return value * 2; }); console.log(array2); // [ 4, 8, 10, 16 ] mapメソッドが引数にとっている関数の第一引数には配列の要素が入ります。第二引数をとると、取り出した要素のインデックスを取得できます。 returnの値 最後にreturnの値についてです。Reactではhtml要素を一つの値のように扱うことができます。 例えば、 const element = <h2>タスク管理アプリ</h2> といった扱いができます。 以上を踏まえ、改めて2.で置き換えた箇所を見てみると、 { this.state.tasks.map( (task, index) => { return <div>{index + 1}. {task}</div> }) } tasks配列に対してmapメソッドを使用し、mapメソッドの引数に、アロー関数表記で処理したい内容を記述していることがわかります。mapメソッドのreturnではhtml要素が返されています。 では次に、タスクの追加機能を実装したいと思います。 StateにtaskContent: ""を追加する。 inputタグの属性に value={ this.state.taskContent }と onChange={(e) => { this.setState({ taskContent: e.target.value }) }} を追加。 buttonタグの属性に onClick={ () => { this.addTask() } }を追加。 render() { ... }の上に以下を追加。 addTask() { let tasks = this.state.tasks; tasks.push(this.state.taskContent); this.setState({tasks: tasks}); this.state.taskContent = ""; } ブラウザで、テキストフィールドに適当なタスク内容を記入して追加ボタンを押してみてください。タスクが追加されたのがわかります。 追記した内容を順に説明すると、 1.でテキストフィールドの値を保持するtaskContent変数をStateにて初期化 2.では、 taskContentの値をテキストフィールドに表示 テキストフィールドに入力された値をtaskContentに反映 3.でボタンをクリックした時にaddTask関数を実行するように指定 4.でaddTask関数を定義 addTask関数でtaskContentの値をStateのtasks配列に追加しています。 コンポーネントとProps ここまでで、一覧機能と追加機能を実装することができました。ここで、コンポーネント設計の考え方を導入してタスクの表示パーツをコンポーネント化してみましょう。コンポーネント化することでより簡潔なコードで記述することができます。 srcフォルダの中にcomponentsフォルダを作成。 作成したcomponentsフォルダの中にTask.jsというファイルを作成。 Task.jsに以下を貼り付ける。 import React from 'react'; class Task extends React.Component { constructor(props) { super(props); this.number = props.number; this.task = props.task; } render() { return ( <div> { this.number }. { this.task } </div> ); } } export default Task; App.jsの冒頭部分に import Task from './components/Task.js'; を追記してTask.jsをインポート。 mapメソッドの戻り値になっている<div>...</div>を <Task number={index + 1} task={task}/>に置き換える。 ブラウザを確認して問題なくページが表示されているか確認してください。 手順を順に解説していくと、 タスクを表示するパーツをTaskコンポーネントにして置き換えたい コンポーネントをまとめるcomponentsフォルダを作成し、その中にTask.jsを作成 Task.jsの中身もApp.jsと同様の構造で、Taskクラスコンポーネントをエクスポートしている そのエクスポートされたTaskクラスをApp.jsの冒頭部分でインポート App.jsのmapメソッドの戻り値としてを置く という流れになります。 ここで、<Task .../>の...に当たる部分を見てみます。number={index + 1} task={task}とありますが、ここでTaskにnumberとtaskというpropsを渡しています。propsとはコンポーネントに渡す値のことです。 この2つのpropsがどのように使われているかTask.jsを確認してみると、constructor内でthis.number = props.number; this.task = props.task; としてクラス内の変数に渡されていることが分かります。このようにコンポーネントに渡されたprops の値は、props.props名とすることでコンポーネント内で使用することができます。 今回の例では、コンポーネント化のメリットをあまり感じられなかったかもしれませんが、もう少し大きな開発になってくるとコードの見易さや管理のし易さ、再利用性の観点からメリットが大きくなります。 以上で、2つのアプリの実装が完了しました! 関数コンポーネントとは Reactのコンポーネントにはクラスコンポーネントと関数コンポーネントの2種類のコンポーネントがあります。 今まで書いてきたコンポーネントはクラスコンポーネントです。 class コンポーネント名 extends React.component { render() { return ( <div> 表示内容 </div> ); } } 一方、関数コンポーネントは次のような書き方です。 // アロー関数表記で書かれることもある function コンポーネント名() { return ( <div> 表示内容 </div> ); } 関数コンポーネントはクラスコンポーネントよりも簡潔に書けるといったメリットがあります。クラスコンポーネントで出来ることは基本的には関数コンポーネントでも実装できますが、少し難解な記法を使ったりするのでクラスコンポーネントに慣れてから関数コンポーネントを触ってみると理解しやすいかと思います。 はじめにfunction App() { ... }を削除してクラスコンポーネントに置き換えたのはこのためです。 以上でReactハンズオンは修了です。お疲れ様でした。 紹介しきれなかったこと ReactHooks ReactRouter Redux
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google Colab のコード内で R・HTML・Markdown を利用する

はじめに 記事の内容は、表題の通りです。 ふと、「Colab の 1つのノートブック内で Python と R を両方実行できたりするかな」と思って調べたり試したりしたのがきっかけで、その後に「別のプログラミング言語やその他のものも使えたりするだろうか?」と思って、追加で「HTML・Markdown の利用」を試してみた時のメモです。 R・HTML・Markdown の件について、それぞれ以下を参照しました。 R Google ColabでRを使う HTML Jupyterで好きなHTMLを埋め込む - Qiita Markdown python - What is the purpose of the IPython.display.display_markdown() function? - Stack Overflow R の利用(Rpy2 を使う) 話は単純で Rpy2 を使えば良いようです。 Colab のノートブックで、まずは以下を実行します。 %load_ext rpy2.ipython あとは、R を利用したい部分で、最初の行に「%%R」を入れれば良いようです。 以下、冒頭で書いた参考ページの中の内容を、実際に Colab上で試した際の画面キャプチャです。 コードの部分はこんな感じです。 %%R curve(sin(x), -pi, pi) HTML の利用(IPython.display を使う) HTML については IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import HTML HTML("<h1>Hello world!</h1>") Markdown の利用(IPython.display を使う) Markdown も HTML と同様に IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import Markdown Markdown('# This is a Title') おわりに 今回使った IPython.display は、以下を見てみると他にもできることがいろいろありそうなので、試してみられればと思います。 ●Module: display — IPython 7.22.0 documentation  https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html#
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google Colab のコード内で R・HTML・Markdown を利用する(+α)

はじめに 記事の内容は、表題の通りです。 ふと、「Colab の 1つのノートブック内で Python と R を両方実行できたりするかな」と思って調べたり試したりしたのがきっかけで、その後に「別のプログラミング言語やその他のものも使えたりするだろうか?」と思って、追加で「HTML・Markdown の利用」を試してみた時のメモです。 R・HTML・Markdown の件について、それぞれ以下を参照しました。 R Google ColabでRを使う HTML Jupyterで好きなHTMLを埋め込む - Qiita Markdown python - What is the purpose of the IPython.display.display_markdown() function? - Stack Overflow R の利用(Rpy2 を使う) 話は単純で Rpy2 を使えば良いようです。 Colab のノートブックで、まずは以下を実行します。 %load_ext rpy2.ipython あとは、R を利用したい部分で、最初の行に「%%R」を入れれば良いようです。 以下、冒頭で書いた参考ページの中の内容を、実際に Colab上で試した際の画面キャプチャです。 コードの部分はこんな感じです。 %%R curve(sin(x), -pi, pi) HTML の利用(IPython.display を使う) HTML については IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import HTML HTML("<h1>Hello world!</h1>") Markdown の利用(IPython.display を使う) Markdown も HTML と同様に IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import Markdown Markdown('# This is a Title') おわりに 今回使った IPython.display は、以下を見てみると他にもできることがいろいろありそうなので、試してみられればと思います。 ●Module: display — IPython 7.22.0 documentation  https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html# 追記: その後に調べた内容 この記事を書いた後に、調べた内容をとりあえずメモしてみます。 ●Google Colab で GIF動画をインライン表示させる - Qiita  https://qiita.com/jun40vn/items/2efdaa3e599f8e7e8604 ●Jupyter で音声データを埋め込む - Qiita  https://qiita.com/mzmttks/items/13b5a67cf281215a69da
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Google Colab のコード内で R・HTML・Markdown・YouTube埋め込みを利用する(+α)

はじめに 記事の内容は、表題の通りです。 ふと、「Colab の 1つのノートブック内で Python と R を両方実行できたりするかな」と思って調べたり試したりしたのがきっかけで、その後に「別のプログラミング言語やその他のものも使えたりするだろうか?」と思って、追加で「HTML・Markdown の利用」を試してみた時のメモです。 R・HTML・Markdown の件について、それぞれ以下を参照しました。 R Google ColabでRを使う HTML Jupyterで好きなHTMLを埋め込む - Qiita Markdown python - What is the purpose of the IPython.display.display_markdown() function? - Stack Overflow YouTube埋め込み jupyter notebookで画像や動画を表示させる簡単な方法 | self-methods R の利用(Rpy2 を使う) 話は単純で Rpy2 を使えば良いようです。 Colab のノートブックで、まずは以下を実行します。 %load_ext rpy2.ipython あとは、R を利用したい部分で、最初の行に「%%R」を入れれば良いようです。 以下、冒頭で書いた参考ページの中の内容を、実際に Colab上で試した際の画面キャプチャです。 コードの部分はこんな感じです。 %%R curve(sin(x), -pi, pi) HTML の利用(IPython.display を使う) HTML については IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import HTML HTML("<h1>Hello world!</h1>") Markdown の利用(IPython.display を使う) Markdown も HTML と同様に IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import Markdown Markdown('# This is a Title') YouTube埋め込み(IPython.display を使う) YouTube埋め込み も IPython.display を使います。 以下、実行結果の画面キャプチャと、コードの部分です。 from IPython.display import YouTubeVideo YouTubeVideo('inN8seMm7UI', width=400, height=300) 埋め込んだ動画は以下になります。  ●Get started with Google Colaboratory (Coding TensorFlow) - YouTube   https://www.youtube.com/watch?v=inN8seMm7UI おわりに 今回使った IPython.display は、以下を見てみると他にもできることがいろいろありそうなので、試してみられればと思います。 ●Module: display — IPython 7.22.0 documentation  https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html# 追記: その後に調べた内容 この記事を書いた後に、調べた内容をとりあえずメモしてみます。 ●Google Colab で GIF動画をインライン表示させる - Qiita  https://qiita.com/jun40vn/items/2efdaa3e599f8e7e8604 ●Jupyter で音声データを埋め込む - Qiita  https://qiita.com/mzmttks/items/13b5a67cf281215a69da ●KaggleのNotebookでコミットせずにファイルをダウンロードする方法 (Python) - Qiita  https://qiita.com/sakabe/items/a9c3ac138b25a3f261af
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

jQuery UI で要素をドラッグしよう

はじめに みなさん、要素をドラッグして移動したいと思ったことはありませんか? これからjQuery UIを使って要素をドラッグしていきます。 jQuery UI jQuery UIを使うためには読み込む必要があります。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 適当な場所からjQueryとjQuery UIを読み込みます。今回は Google Hosted Libraries から読み込むことにしました。 ご自身でダウンロードして読み込んでいたただいても構いません。 移動させたい <div class="drag"> <div class="drag-content">content1</div> <div class="drag-content">content2</div> <div class="drag-content">content3</div> </div> See the Pen Qiita-drag by Risuney (@risuney) on CodePen. こうしても当然の如く要素の移動はできません。 jQuery UIを使う $('.drag').sortable() See the Pen Qiita-drag-2 by Risuney (@risuney) on CodePen. jQuery UIを使って要素の並べ替えができました。 要素をまたいでで移動 ただ並び替えただけではつまらないですね。 親要素とその他の要素間をまたいで移動させましょう。 $('.drag').sortable({ connectWith: '.drag', items: '.drag-content' }) See the Pen Qiita-drag-3 by Risuney (@risuney) on CodePen. 要素をまたいで移動することができました。 connectWithでまたぐ要素、itemsでドラッグする要素を指定しています。 追記 コメントで報告してくださいました。 この機能はスマートフォンなどのタッチディスプレイでは非対応のようです。 まとめ sortableで簡単に要素の移動ができる
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Chrome で username がオートフィルされて困った件

困った username でない入力欄に Chrome に保存した ID がオートフィルされてしまい、困った。 調べた 上記 §4.10.18.7.2 (Processing model) の末尾: ユーザーエージェントは、ユーザーが要素のオートフィルフィールド名を上書き可能にしてもよい。 フォームのコントロール New autofill field name an input element whose type attribute is in the Text state that is followed by an input element whose type attribute is in the Password state "username" つまり、当該の input は、password の直前にあったので、username とという名前に補正されたようだ。 なお、password 欄の記述はポップアップ用なので、問題の input と同時に表示されることはなく、謎に見えたという顛末。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

BoxShadowを用いてクリックするとボタンが凹むようにする

実現したいこと 動画見たく、クリックするとボタンが凹むような挙動にしたい。 結論 以下の2つをやります hover要素でbox-shadowを付与 active要素でbox-shadowを削除。margin-topを付与 コード こんな感じになります。 a { display: inline-block; text-decoration: none; background-color: #0ACC64; color: #FFF; border-style: none; border-radius: 5px; padding: 5px 10px; } a:hover { cursor: pointer; font-weight: bold; box-shadow: 0 5px 10px black; } a:active { box-shadow: 0 0 5px black; margin-top: 5px; ポイント active要素でmargin-topを付与する。これをやらないと以下のようになる。影はなくなっているけど、ボタンが凹んでいる感じがしない。 これを解決するために、margin-topを付与する。margin-topのpxはbox-shadowの2番目の値(上下方向の影のpx)に合わせる。こうすると影がなくなるだけでなくボタンが凹んでいる風の挙動になる。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

box-shadowを用いてクリックするとボタンが凹むようにする

実現したいこと 動画見たく、クリックするとボタンが凹むような挙動にしたい。 結論 以下の2つをやります hover要素でbox-shadowを付与 active要素でbox-shadowを削除。margin-topを付与 コード こんな感じになります。 a { display: inline-block; text-decoration: none; background-color: #0ACC64; color: #FFF; border-style: none; border-radius: 5px; padding: 5px 10px; } a:hover { cursor: pointer; font-weight: bold; box-shadow: 0 5px 10px black; } a:active { box-shadow: 0 0 5px black; margin-top: 5px; ポイント active要素でmargin-topを付与する。これをやらないと以下のようになる。影はなくなっているけど、ボタンが凹んでいる感じがしない。 これを解決するために、margin-topを付与する。margin-topのpxはbox-shadowの2番目の値(上下方向の影のpx)に合わせる。こうすると影がなくなるだけでなくボタンが凹んでいる風の挙動になる。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

BLOG記事からAPIを叩きたい

最近とあるブログ記事を書いた。 https://motochan1969.hatenablog.com/entry/20210411/1618098387 https://motochan1969.hatenablog.com/entry/20210410/1618016031 しかしながら、クロスブラウザ仕様になっておらず、 そもそもスマホからは、表示できない → ちなみにスマホは、XIAOMIでブラウザも中華性・・・ 音読API そんなわけで、HTMLからGoogleのテキストスピーチをコールしたいが HTMLソースにAPIトークンを書かなければならなくなる。 (余計なユーザー認証などは、一切噛ましたくはない・・・) 選択肢 いろいろ考えてはみたが、ソースが見れない状態にするには、 デバッグができないように、バックエンドで処理するしかない・・・ かと言って、わざわざ HEROKUなんかのサービスを覚えてまでもやりたくないし(いや、スキルがないし) WORDPRESSなんか立ち上げて、PHPまで覚えたくない(いや、やりかけて放置してるし) 模索中 可能性を考えたが、単にGOOGLE翻訳に文章をいれて、REDIRECTしたらええんじゃないか? と思った。 <システム> 普通のスクレイビングの要領である HTML上にWEBブラウザのフォームを立ち上げる URLをGOOGLE翻訳にする INPUT要素に、読みたいテキストを書き込む 翻訳ボタンを押す しかしながら、一点の懸念としては クロスオリジンに引っかかる・・・ そう、いま作っている、10か国語の辞書アプリも、これが原因でHTMLの音声を使わざる得なくなっている。(もしくは、いったんバックエンドでPOSTを受けて、APIサーバーにKICKするしかない)   https://qiita.com/EasyCording/items/502769016329571db520 やはり、HTMLアプリにはいろんな限界があるなあと思う。 そもそもスマホ対応で、全ブラウザのチェックするのも大変だし・・・ いったいフロントエンドの開発って、どうやっているんだろうか?
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLのheaderとfooterを挿入するVB Script

概要 複数あるHTMLファイルにheader部分とfooter部分を挿入してくれるVB Scriptです。 経緯 phpなどで作成しているならなんら不要なVBSです… AWS(Amazon Web Service)のS3ストレージにホームページを作成し 置く仕事をしております。ホームページの運用費が非常に安くなります。 通常サーバー運用費3000~5000円ですが約500円でできている実績です。 ※あまりにも大きなファイルとかになりますと金額に差が出ますので参考までにお願いします。 別途ドメイン費用などは掛かります。 方法 insert.vbsを作成するhtmlファイルと同じフォルダ(ディレクトリ)に配置してください。 htmlで共通となるheader部分のheader.htmlファイルを作成してください。 htmlで共通となるfooter部分のfooter.htmlファイルを作成してください。 各種コンテンツとなるhtmlファイルは後ろを_before.htmlファイルとして作成してください。 ヘッダー挿入部分に 「・・insert_header」と書き込んでください。 フッター挿入部分に 「・・insert_footer」と書き込んでください。 例:3ページありましたら index_before.html hogehoge1_before.html hogehoge2_before.html と言った感じに作成してください。 hogehoge部分は各自作成したファイルでよいので名前のhogehogeやindexはあくまで例です。 insert.vbs ソース insert.vbs Option Explicit Dim FSO,oFolder,oFile,strFolder,oADO_Read,oADO_Write,oADO_ReadBefore Dim oInsert_Headertext,oInsert_Footertext Dim strHeaderText,strFooterText,strHTML,strNewFile Dim bln_INsert Set FSO = CreateObject("Scripting.FileSystemObject") '各種ファイルの読み込み専用ADO(UTF-8で読み込みを行う。) Set oADO_Read = CreateObject("ADODB.Stream") With oADO_Read .Charset = "UTF-8" .Open End With Set oADO_ReadBefore = CreateObject("ADODB.Stream") '_beforeファイルを開くためのADO(UTF-8で読み込みを行う。) With oADO_ReadBefore .Charset = "UTF-8" End With 'ファイルの書き込み専用ADO(UTF-8で読み込みを行う。) Set oADO_Write = CreateObject("ADODB.Stream") With oADO_Write .Charset = "UTF-8" End With 'このinsert.vbsファイルがある場所を取得しておきます。 strFolder = FSO.getParentFolderName(WScript.ScriptFullName) & "/" 'FSOでフォルダーオブジェクトを設定。 set oFolder = FSO.getFolder(strFolder)'フォルダーオブジェクト取得 'header.htmlとfooter.htmlのファイルパス strHeaderText = strFolder & "header.html" strFooterText = strFolder & "footer.html" '各ファイルの存在チェック If FSO.FileExists(strHeaderText) = False Then MsgBox strHeaderText & "が存在しません。" WScript.Quit End If If FSO.FileExists(strFooterText) = False Then MsgBox strFooterText & "が存在しません。" WScript.Quit End If 'ヘッダーを読み込んで変数に格納 oADO_Read.LoadFromFile strHeaderText strHeaderText = oADO_Read.ReadText 'フッターを読み込んで変数に格納 oADO_Read.LoadFromFile strFooterText strFooterText = oADO_Read.ReadText oADO_Read.Close'oADO_Readは閉じておく 'すべてのファイルでループ For Each oFIle in oFolder.Files If instr(oFile.Name,"_before.html") <> 0 Then strNewFile = changeFileName(oFile.Name)'ファイルの名前から新規_beforeがないファイルの作成を行う。 '編集前の内容を読み込む oADO_ReadBefore.Open oADO_Write.Open oADO_ReadBefore.LoadFromFile oFile.Name Do Until oADO_ReadBefore.EOS strHTML = "" strHTML = oADO_ReadBefore.ReadText(-2)'1行読み込む bln_Insert = False'ヘッダー・フッターを挿入したかのチェックフラグ 'headerの挿入 If instr(strHTML,"・insert_header") <> 0 Then bln_Insert = True'挿入したことを判断 oADO_Write.WriteText strHeaderText,1 oADO_Write.WriteText " ",1 End If 'footerの挿入 If instr(strHTML,"・insert_footer") <> 0 Then bln_Insert = True'挿入したことを判断 oADO_Write.WriteText strFooterText,1 oADO_Write.WriteText " ",1 End If If bln_Insert = False Then'インサートされていないときは通常書き込み oADO_Write.WriteText strHTML,1 End If '最終行書き出しだったらloopを終了させる If instr(strHTML,"</html>") <> 0 Then exit do End If Loop oADO_Write.SaveToFile strNewFile,2 oADO_ReadBefore.Close oADO_Write.Close End If Next '使ったオブジェクトをしまいましょう Set FSO = Nothing Set oADO_Read = Nothing Set oADO_Write = Nothing Set oADO_ReadBefore = Nothing MsgBox "処理完了",64,"insert.vbs" Function changeFileName(strFileName) changeFileName = Left(strFileName,Len(strFileName) - Len("_before.html")) & ".html" 'もし_beforeが存在していたらこれから生成するので削除しておく。 If FSO.FIleExists(changeFileName) = True Then FSO.DeleteFile changeFileName End If End Function FSOを使用していますが通常通り利用すると文字コードがUTF-8にならないところがポイントです。 サンプル header.html <!doctype html> <html lang="ja"> <head> <titel>サンプルページ</title> </head> <body> ヘッダー書き込み開始<br> どのページも大体&lt;head&gt;~&lt;/head&gt;は一緒だよねww<br> ヘッダー書き込みはここまで~<br> footer.html <footer> フッターの書き込み開始<br> 共通フッター情報をここに書く<br> フッターの書き込み終了<br> </footer> index_before.html ・insert_header 実態の内容をここに書くwww<br> </html> これらのファイルを同一フォルダに入れ、insert.vbsを実行してください。 処理完了のメッセージが表示されましたら終わりです。 同一フォルダーに、hogehoge_before.htmlではないhogehoge.htmlが作成されます。 サンプルだとindex.htmlになります。 事前に***.htmlが存在している場合はvbsで削除していて上書き状態になりますのでご注意ください。 サンプルのindex.html 生成されたindex.html index.html <!doctype html> <html lang="ja"> <head> <titel>サンプルページ</title> </head> <body> ヘッダー書き込み開始<br> どのページも大体&lt;head&gt;~&lt;/head&gt;は一緒だよねww<br> ヘッダー書き込みはここまで~<br> 実態の内容をここに書くwww<br> <footer> フッターの書き込み開始<br> 共通フッター情報をここに書く<br> フッターの書き込み終了<br> </footer> </html> となります。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む