検索件数 : 3 件
こんにちは。明月です。この投稿はデザインパターンのメメントパターン(memento pattern)に関する説明です。メメントパターンはクラスの現在の状況を別にクラスに格納するパターンです。クラスのデータを格納する型ではメメントパターンではなく、クラスのコピー(インスタンスのコピー)で現在状況を格納することができます。でも、そのようにすると現在のインスタンスオブジェクトではなく、新しいインスタンスオブジェクトを生成することで、もしオブジェクト中でリソース(ioやsocket)を使っている場合は新しいコネクションを生成しなければならない問題もあります。つまり、メメントパターンはインスタンスのオブジェクトは変わらず、中の値だけ更新して、状態を復旧する役割をするパターンがメメントパターンです。reference - https://en.wikipedia.org/wiki/memento_pattern上の例でnodeクラスの状態を格納するmementoインスタンスを取得しました。このmementoクラスで該当なクラスをファイルに書き出しするし、また、ファイルから読み込んでnodeインスタンスに更新するとデータが以前データに復旧することを確認できます。例えば、ゲームの中でファイルにセーブしてまたファイルから読み込んで現在の状態を復旧することと同じ流れのパターンです。c/c++で作成したソースの構造と似ています。ただ、memenoクラスをnodeクラスのインラインで作成しました。つまり、mementoクラスの仕様は状態を格納する役割があるので、nodeクラスの以外ではデータ設定ができないようにすることが基本ルールです。メメントのインスタンスの値を外部で設定することが可能にすると、それはメメントのパターンではなく、単純なパラメータをやり取りのクラスの役割になることです。c#もjavaと似ている構造なソースです。mementoクラスがnodeクラスにインラインで設定して、nodeクラスの外部では設定できないように作成しました。でも、c#はインラインクラスでも、publicではなければアクセスができないので、reflectionの機能を利用して直接にprivate変数を設定できるように作成しました。ここまでデザインパターンのメメントパターン(memento pattern)に関する説明でした。ご不明なところや間違いと
#designpattern,#mementopattern
作成日付 : 2021/11/16 20:01:36 修正日付 : 2021/11/16 20:02:25
こんにちは。明月です。この投稿はデザインパターンのイテレータパターン(iterator pattern)に関する説明です。イテレータパターン(iterator pattern)は我々がデザインパターンを知らない状況でもよく使うパターンです。c#にはlistをforeachで使うパターンだし、javaにはfor(var x : list)の型でよく使うパターンです。一般的に配列(array)には当たり前にindexで配列を参照するのでイテレータパターンが意味がありませんが、連結リスト(linkedlist)なら話が違います。get(100)を取得するためにはindex 0から100まで移動するので実際にforで使うことならすごく遅くなります。例えば、0番目はリストの最初なので問題がありませんが、forの1になると0を参照して1番目を取得します。また、2になると0を参照して1に移動、2を取得します。3になると0を参照して1に移動、2に移動して3を取得します。なのでイテレータパターンを利用して毎回に参照するたびにポインタを移動して探す必要がなしで現在の位置を格納して現在の値をリターン、そして次のポインタに移動する型のパターンが必要です。実務ではこれを実装する必要がなしで、listタイプはすべてイテレータパターンを継承しているのでforeachで使ったら自動にイテレータパターン(iterator pattern)に変わるにで、ただこのパターンの内容だけ認知して応用して使うと良いでしょう。reference - https://en.wikipedia.org/wiki/iterator_pattern我々が実際にプログラムで使うイテレータパターンはforを利用して値のポインタを取得、一連の順番とおりに出力するパターンです。実は私がc/c++でイテレータパターンを実装しようと思いましたが、難しいですね。c/c++を使うのも古くなったし、いざ実装するのが簡単ではありません。それでここではただイテレータパターンを使う方法だけ説明します。もし、イテレータパターンを実装する人がいらっしゃいならお知らせてください。上の例は簡単な連結リストのアルゴリズムです。そして任意で連結リストのlinkedlistクラスをforの繰り返し文にイテレータパターン(iterator pattern)でデータが順番とおりに出力されることを確認で
#designpattern,#iteratorpattern
作成日付 : 2021/11/15 19:31:28 修正日付 : 2021/11/15 19:32:13
こんにちは。明月です。この投稿はデザインパターンのコマンドパターン(command pattern)に関する説明です。コマンドパターン(command pattern)は少し複雑なパターンですが、簡単に言うと発動子(invoker)が受信子(receiver)を実行するためのコマンド(command)を中に置くパターンです。普通のコマンドパターンの例なら電灯の例で説明しますが、スウィッチ(invoker)があり、電灯(receiver)があります、それを電源のonとoffのコマンド(command)が型です。reference - https://en.wikipedia.org/wiki/command_pattern上の例をみると理解しやすくなります。コマンドパターンは発動子(invoker)の関数をクラス別に分け割ったことです。関数はインスタンスで実装することができないので、関数別でインスタンスを作った型がコマンドパターン(command pattern)です。関数をクラスのインスタンスで生成ができれば、上みたいにlistなどで命令順番を設定することもできます。コマンドパターンは重要なポイントは発動子(invoker)の関数をクラス別で割り分けしたことです。つまり、様々な関数を複合的にコマンドパターンで作成することができます。ここでの例は発動子(invoker)のクラスを一つだけ生成してコマンドパターンを作りましたが、数多く発動子クラスをコマンドパターン別で割り分けてストラテジーパターンとともに使うことができます。ここまでデザインパターンのコマンドパターン(command pattern)に関する説明でした。ご不明なところや間違いところがあればコメントしてください。
#designpattern,#commandpattern
作成日付 : 2021/11/05 17:01:42 修正日付 : 2021/11/05 17:02:32
こんにちは。明月です。 この投稿はapache-tomcatでロードバランシング(load balancing)する方法とセッションクラスタリング（セッション共有）に関する説明です。 以前の投稿で私がapacheとtomcatを連携する方法に関して説明したことがあります。link - [centos] apacheとtomcatの連携 その時にはapache-tomcatの1:1の連携だったんですが、今回はapacheから数多くのtomcatを連結してトラフィックを分散する方法です。運用中でウェブサイトで接続者が多くなると始めに構成することがapache-tomcatとの分散です。動的なウェブサイトなら以外にこのweb servletで処理トラフィックが多くなります。なぜならservletでデータベース接続もしなければならないし、様々な設定ファイルを読み込し、複雑な仕様だったらservletで処理することが多くなります。これを数多くのサーバで運用してapacheでトラフィックを集まってロードバランシング、つまり、トラフィックに合わせてservletを分散してサイトがトラフィックにより遅くなることを少しでも改善することではないかと思います。apache段階でのトラフィックが多くなるとdns段階でapache分散するべきですね。私もそこまでの作業をしたことがないので、正確に言うことは難しいです。 apacheでmod_jkを連携するためにはworkers.propertiesを修正しなければならないです。httpd.confにはworker listを設定すれば良いでしょう。上の例をみればjkmanagerを別途に設定しました。jkmanagerはapache - tomcatを連結する時にロードバランシングの状態を確認できるページです。apache-tomcatで数多くのサーバを管理する時、しっかり連携されているかを確認するページです。もし、一つのtomcatが問題になると状態ページでその結果を知らせてくれます。ここまで設定すっればロードバランシング設定は完了です。でも実際にウェブサーバを運用すればロードバランシングだけ設定する場合にセッション共有がしなかったので、変な現象が発生します。。代表的に急にログアウトされる場合があります。なぜ
#apache,#tomcat,#loadbalancing,#sessionclustering
作成日付 : 2021/11/05 16:58:45 修正日付 : 2021/11/05 17:00:24
こんにちは。明月です。 この投稿はapacheでmod_jkとmod_proxyの差異、apacheでtomcatのwebsocketのプロキシフォーワードする方法に関する説明です。 以前にtomcatとapacheを連携する方法に関して説明したことがあります。link - [centos] apacheとtomcatの連携link - [php] apache環境の同じホスト中でphpとjava(servlet)を同時に起動、運用する方法 上のリンクを見るとapacheとtomcatを連携する方法に関してmod_jkを利用する方法があるし、mod_proxyを利用する方法があります。始めのリンクはmod_jkでapacheとtomcatを連携する方法で説明したし、二つ目はmod_proxyでapacheとtomcatを連携してcomplex languageを使う方法に関して説明しました。 二つの連携方法に関して各の特徴がありますが、mod_jkで連携する方がapacheとtomcatを完全に連結することです。つまり、仮想ディレクトリを作成するならapacheだけ設定することではなく、tomcatにも設定をしなければならないです。もちろん、apacheにも仮想ディレクトリを設定することが可能ですが、様々な問題が発生する可能性があります。mod_jkで連携したvirtualhostですが、ここで私が「jkmount /* websocketex」を「jkmount /java/* websocketex」に設定を変わると「localhost/java」や「localhost:8009/」をフォーワードすることではなく、「localhost:8009/java」を指すことになります。つまり、tomcatにも仮想ディレクトリを合わせなければならないです。このように設定するとかなり複雑になります。なぜならルートは仮想ディレクトリに使うことができなくなったからです。でも、complex languageにはルート(/)をphpで使って「proxypass /java ajp://localhost:8009/」を使う場合は「localhost/java」が「localhost:8009/」にフォーワードすることになります。つまり、tomcat
#window,#apache,#mod_jk,#mod_proxy,#tomcat
作成日付 : 2021/11/05 16:55:05 修正日付 : 2021/11/05 16:56:55
こんにちは。明月です。この投稿はデザインパターンの責任の連鎖パターン(chain of responsibility pattern)に関する説明です。責任の連鎖パターンとはクラス間に連結リストアルゴリズムを掛けて、特定な関数を実行すると連鎖的に実行するパターンということです。reference - https://en.wikipedia.org/wiki/chain-of-responsibility_patternこれがすごくよく使うパターンではないですが、ログ処理や一つの処理で様々な結果を同時に作成する時に使うパターンです。ソースコードを作成したら完全に連結リストのアルゴリズムになりました。連結リストのアルゴリズムをよく知っている方はよく目に入れると思いますが、アルゴリズムの分野が弱い方はすごく複雑に見える可能性がありますね。内容は私がloggermanagerにconsoleloggerとfileloggerのインスタンスを格納しました。そしてwrite関数を呼び出したら順番とおりにコンソールに出力されますね。つまり、setloggerの関数でインスタンスを格納した数程、write関数で連鎖的に出力するパターンです。javaには連結リストのlinkedlistクラスがあります。つまり、javaには連結リストが実装されているのでそれを使ったら良いでしょう。もちろん、必ずlinkedlistを使う必要なく、arraylistでも構いません。つまり、責任の連鎖パターン(chain of responsibility pattern)はポインターで連結すると言いますが、c/c++にもvectorオブジェクトを使っても実装することでは問題ないでしょう。loggermanagerというクラスが必要なく、loggerクラスに次のポインタを連結して最初に生成されたインスタンスの関数を呼び出すと連鎖的に実行する方法もあります。責任の連鎖パターンはクラスの結合度を弱くして様々な応用にかなり良いパターンですが、以外に使用頻度が低いパターンです。適応する仕様が多くないからではないかな。ほとんどファサードパターンとストラテジーパターンで解決される仕様が多いからかなここまでデザインパターンの責任の連鎖パターン(chain of responsibility pattern)に関する説明でした。ご不明なところや間違いところが
#designpattern,#chainofresponsibility
作成日付 : 2021/11/04 19:27:58 修正日付 : 2021/11/04 19:28:32
こんにちは。明月です。この投稿はデザインパターンのストラテジーパターン(strategy pattern)に関する説明です。この投稿からは振り舞パターンに関する説明です。生成パターンはプログラムでインスタンスをどのように生成するかに関する型だし、構造パターンはインターフェースと抽象クラス、そして一般クラス間の構造的な定義に関する型です。振り舞パターンはクラスとアルゴリズムを実際のプログラムでどのように使うかに関する説明するパターンです。その中でストラテジーパターンは戦略という意味があるパターンですが、使うクラスに入力されるクラスのインスタンスにタイプにより結果を別にするパターンと言います。reference - https://en.wikipedia.org/wiki/strategy_patternすごく単純な構造です。processクラスにストラテジーパターンを設定しなければそのまま10の値が出力されるし、normalstrategyインスタンスを入力すると100の値が出力、specialstrategyインスタンスを入力すると1000が出力されます。仕様に違いますが、ストラテジーパターンのクラスをフライウェイトパターンと一緒に使えばクラスの再使用率が高めるし、性能改善にもいい利点があります。上の例はストラテジーパターンにflyweightパターンを追加してストラテジーパターンのインスタンスを取得する時、メモリ使用を最小にしてクラスの再使用率を高めにしました。ストラテジーパターンはできればクラスの結合度を低くして再使用率を高めにして性能改善がメイン目標です。そしてクラスはできれば分ける作業によりプログラムのutテストや個別テストが良いと利点があります。でも、このストラテジーパターンの欠点はクラスを分けすぎることでストラテジーパターンで分散化すると可読性が悪くなることがあります。そしてクラス作成が多くなるので、プロジェクト管理が難しくなるし、プロジェクト難易度が高くなる問題があります。ここまでデザインパターンのストラテジーパターン(strategy pattern)に関する説明でした。ご不明なところや間違いところがあればコメントしてください。
#designpattern,#strategypattern
作成日付 : 2021/11/03 18:38:52 修正日付 : 2021/11/03 18:38:52
こんにちは。明月です。この投稿はデザインパターンのフライウェイトパターン(flyweight pattern)に関する説明です。フライウェイトパターン(flyweight pattern)という英語の意味は軽量化するという意味です。なので、インスタンスの生成を最小化してメモリの使用をできれば節約する方法です。構造パターンのシングルトンバージョンだと思えば良いでしょう。でもsingletonみたいにstaticを利用することではなく、普通のmap(dictionary)を利用します。reference - https://en.wikipedia.org/wiki/flyweight_patternbuilderというクラスでgetnodeからnodeインスタンスを取得します。そのことでaのキーで取得した時にはcountが2になりました。その意味はaを二回呼び出しましたが、インスタンスは同じという意味ですね。つまり、二回目から呼び出したらインスタンスを新しく生成しなくて、mapに同じインスタンスを取得することがフライウェイトパターンです。実はフライウェイトパターンは上のファクトリーメソッドパターンとともによく使います。factoryでインスタンスを生成せずに一回生成されたインスタンスは再使用ということです。でも、ファクトリ―メソッドパターンなのでclassを追加するたびにfactory関数を修正しなければならないですね。上のれ例ではjavaの例と似ていますが、factorydao中をreflectionとgeneric機能を利用してインスタンスを取得することにしました。このパターンどのところで使うかと思えば、ormフレームワークのdaoを取得する関数で使う方法です。特にspringで依存性注入でdaoを取得する時に、フレームワークでは上みたいな構造でインスタンスを取得することです。つまり、一回に生成されたインスタンスは再使用しようという意味ですね。ここまでデザインパターンのフライウェイトパターン(flyweight pattern)に関する説明でした。ご不明なところや間違いところがあればコメントしてください。
#disignpattern,#flyweightpattern
作成日付 : 2021/10/29 19:48:27 修正日付 : 2021/10/29 19:48:27
こんにちは。明月です。この投稿はデザインパターンのデコレーターパターン(decorator pattern)に関する説明です。デコレーターという英語の意味では飾るという意味です。その意味でデコレーターパターンはインターフェースから継承したクラスの機能を拡張するためのパターンだと言えます。reference - https://en.wikipedia.org/wiki/decorator_pattern上の例をみると始めのnodeクラスからは単純なnode->print()の出力だけあるでしょう。でも、nodetimedecoratorのデコレーターを追加して、nodelogdecoratorのデコレーターを追加しました。結果はnodelogdecoratorのprintが呼び出してnodetimedecoratorのprintが呼び出して、最終的にnodeクラスのprintが呼び出されました。デコレーター構造は抽象クラスからインターフェースを継承してコンストラクタには継承したインターフェースを継承したインスタンスを受け取ります。そしてデコレーター抽象クラスを継承したクラスにはインターフェースの定義により作成してメンバー変数にある継承したインターフェースのインスタンスを実行します。そうならデコレータークラスはinodeを継承したすべてのインスタンスの抽象化された関数にデータを追加することができます。上の例はデコレーターパターンでファクトリーメソッドパターンを追加したことです。getnodefactory関数でcaltypeタイプのパラメータの結果により取得するインスタンス種類が違いますね。個人的に構造パターンの中でファサードパターン(facade pattern)の以外によく使うパターンではないかと思います。例えば、フレームワークや.net frameworkで提供する基本クラスを仕様により変更することが多いですが、その場合、デコレーターパターンを適用するとすごくコーディングが楽になることを感じますね。特にログ処理クラスやデータベースのデータ処理クラスでよく使います。ここまでデザインパターンのデコレーターパターン(decorator pattern)に関する説明でした。ご不明なところや間違いところがあればコメントしてください。
#designpattern,#Decoratorpattern
作成日付 : 2021/10/28 20:11:13 修正日付 : 2021/10/28 20:11:13
こんにちは。明月です。この投稿はデザインパターンのコンポジットパターン(composite pattern)に関する説明です。コンポジットパターン、合成パターンと呼ばれるパターンです。一つのクラスと複合クラス(つまり、リスト)を同一な構成して使うパターンという意味です。reference - https://en.wikipedia.org/wiki/composite_patternコンポジットパターンの基本的な型です。共通のインターフェースに一つは単一実行に関するインスタンスにprint関数を再定義して、一つは複数のインスタンスに関するprint関数を再定義して実行しました。つまり、コンポジットクラスは同じなインターフェースから継承してリストタイプのメンバー変数を生成し、add関数を通って同じインターフェースを継承したインスタンスを受け取って同じ関数名を実行する型のパターンです。普通はlistをメンバー変数に実装しますが、listを継承して実装することもできます。個人的にlistを継承するほうが別にadd関数やremove関数を実装する必要がなくて便利だと思いますが、仕様によりメンバー変数でlistの関数を隠すことやアダプターパターンで別の型に変換する可能性もあります。一つのクラスに対するパターンではありません。inodeを継承したすべてのインスタンスを同じ構造のcompositeクラスで一括的に実行するための目的です。ここまでデザインパターンのコンポジットパターン(composite pattern)に関する説明でした。ご不明なところや間違いところがあればコメントしてください。
#designpattern,#compositepattern
作成日付 : 2021/10/27 20:30:54 修正日付 : 2021/10/27 20:30:54
こんにちは。明月です。この投稿はデザインパターンのアダプターパターン(adapter pattern)に関する説明です。アダプターパターンからは構造パターンです。構造パターンとは様々なクラスやオブジェクトを組み合わせてもっと大きい構造を作るパターンです。以前の生成パターンはnewキーワードを利用してインスタンスを生成する型がメインだったら、構造パターンはクラスやオブジェクトの構造をどのように構成するかをメインに考えるパターンです。アダプターパターンはインターフェースに連結されてない他のクラスを同じインターフェースの型に変換することが目標です。reference - https://en.wikipedia.org/wiki/adapter_pattern上の例をみれば私がmain関数でinodeインターフェースタイプのインスタンスをvectorを使って格納するため、宣言しました。でも、node2クラスはinodeインターフェースを継承したクラスではないので、inodeインターフェースグループに格納することができません。クラス構造は似てますが。。。node2をinodeから継承したら簡単に解決するかも知れませんが、状況によりnode2クラスを修正したらダメなら上みたいにadapterクラスを作成してnode2クラスをinodeインターフェースから継承したらしく使えます。adapterパターンが必ずクラスだけ使うことではありません。上みたいにinterfaceアダプタークラスを作成してinodeanotherから継承したクラスはinodeインターフェースを化粧したアダプタークラスに変換することが可能です。アダプターパターンは基本的にコンストラクタでタイプを変更しようと思うクラスのインスタンスを受け取って新しいクラスで包むことです。でも、必ずコンストラクタでインスタンスを受け取ることではなく、上みたいに継承を利用してアダプターパターンを実装することができます。ここまでデザインパターンのアダプターパターン(adapter pattern)に関する説明でした。ご不明なところや間違いところがあればコメントしてください。
#designpattern,#adapterpattern
作成日付 : 2021/10/26 19:12:40 修正日付 : 2021/10/26 19:12:40
こんにちは。明月です。この投稿はデザインパターンの抽象ファクトリーパターン(abstract factory pattern)に関する説明です。デザインパターンの生成パターンの中で一番複雑なパターンの抽象ファクトリーパターン(abstract factory pattern)です。構造は複雑ですが、細かく見るとファクトリーメソッドパターンでファクトリーをクラスで作成してその上に抽象インターフェースによりファクトリーを取得するし、そのファクトリーでクラスを取得する構造です。つまり、ファクトリーメソッドパターンが重畳していると思えば良いです。reference - https://en.wikipedia.org/wiki/abstract_factory_pattern上の例をみればfactoryクラスをgetfactoryという関数からインスタンスを受け取ります。また、factoryクラスにはgettypedaoを通ってインスタンスを受け取ります。私はここでビルドパターンを通ってidaoを受け取りますが、gettypedaoにパラメータを入れてまたファクトリーメソッドパターンを使えます。上の例はjavaで作成した抽象ファクトリーパターン例です。c/c++と違い、ファクトリークラスの中でビルドパターンを代わりにファクトリーメソッドパターンでインスタンスを取得します。上の例はc/c++と同じく、ファクトリークラスでビルドパターンでインスタンスを取得して実行します。私がfactoryクラスではなく、一般クラスをdaoというクラス名で作成しました。なぜならこの抽象ファクトリーパターンがormフレームワークで一番よく使うパターンからです。例えば、データベースの各テーブルのdaoクラスを作成します。でも、仕様によりこれがoracleになれるし、mssqlになれるし、mysql(mariadb)になれる可能性があります。各データベースのシステムのテーブルの設計構造は同じだと思えば、この抽象ファクトリーパターンを使ったらoracle用dao生成ファクトリーを生成することができるし、mssql用dao生成ファクトリーを生成することができます。その以外にデータ管理や生成、pdf生成やexcel生成などで仕様により装置を区分する時、該当なクラスの構造は同じく作ろうと思えば、よく使えるパターンです。ここまでデザインパターンの抽象
#designpattern,#Abstractfactorypattern
作成日付 : 2021/10/15 19:31:03 修正日付 : 2021/10/15 19:31:03
こんにちは。明月です。この投稿はwebのfull calendar(スケジュールカレンダー)の使い方法に関する説明です。我々がwebプログラミングを作成したら普通はyahooみたいなポータルサイトより会社や様々なグループなどで使うコミュニティサイトやスケジュール管理サイトを作成することが多いと思います。そのプロジェクトの中で一番よく使うプレームワークライブラリはwysiwygエディタでウェブ環境でメモ帳みたいに使うエディタ機能だと思います。その以外は多分スケジュール管理するカレンダープレームワークではないかと思います。カレンダープレームワークに関しても様々なプレームワークがありますが、個人的にfull-calendarというライブラリが一番使いやすいではないかと紹介しようと思います。リンク - https://fullcalendar.io/一応fullcalendarを使うために該当なjavascriptとスタイルシート(css)をダウンロードして使ってもよいですが、ウェブ環境の性能のため、cdnリンクを使うほうをお勧めします。ダウンロードリンク - https://fullcalendar.io/docs/initialize-globalscdnリンク - https://www.jsdelivr.com/package/npm/fullcalendar .fc-header-toolbar { padding-top: 1em; padding-left: 1em; padding-right: 1em; } #calendar-container { border: #000 1px solid; padding: 10px; margin: 20px 0px; } #calendar a { color: #000; } #calendar1 a { color: #000; } #calendar2 a { color: #000; } (function(){$(function(){ var calendarel = $('#calendar')[0]; var calendar = new fullcalendar.calendar(calendarel, { height: &
Open source / Javascript, Jquery, CSS
作成日付 : 2021/07/15 21:35:36 修正日付 : 2021/07/15 21:40:55
こんにちは。明月です。この投稿はpythonでstringフォーマッティング(formatting)と補間法(interpolation)に関する説明です。stringフォーマッティングは定数タイプなどを文字列タイプに変換することやstringのデータタイプにstringの値を入れるような方法です。フォーマッティングはパーセント(%)を利用します。パーセント(%)の前はformat文字列、後は置換する値を設定します。最終結果はイコールで左の変数に格納されます。フォーマッティングの文字列で置換領域もパーセント(%)で区分します。そしてパーセント(%)の後は置換値のタイプによるコードを入力します。置換値は複数(2個以上)ならタプルで入力します。 コード 説明 %s 文字列(string) %c 文字一つ(character) %d 定数(integer) %f 浮動小数点(floating-point) %o 8進数 %x 16進数 stringタイプでフォーマッティングではなく本当にパーセント(%)を使いたい時があります。その時にはパーセント(%)を二つ入れることで入力します。pythonはフォーマッティングで文字列整列も可能です。補間法とはフォーマッティングする文法でもっと見やすくするための文法です。例えば置換するデータが多い時に置換場所を迷う時があります。補間法は文字列の表現するダブルクォートやクォートの前でfを付けます。そうすると領域中では中括弧で直接にフォーマッティングを作成することができます。stringフォマード(formattingと補間法(interpolation)に関して各長所、短所がありますが、私の場合は補間法(interpolation)のほうが見やすいのでよく使います。ここまでpythonでstringフォマード(formatting)と補間法(interpolation)に関する説明で
#python,#Formatting,#interpolation
作成日付 : 2020/06/23 19:03:21 修正日付 : 2020/06/23 19:03:21
こんにちは。明月です。この投稿はpythonで関数(function) - インライン関数、callbak、ラムダ(lambda)そしてクロージャに関する説明です。プログラムで変数と制御文を学ぶと次に学ぶのはこの関数ではないかと思います。関数はpythonで一番小さい単位のコードだしコードを再使用ができる文法です。関数の基本構造は下記通りになります。関数はdefで定義して最後にはコロン（:)を付けます。関数領域のはじめはインデントで区分します。インデントが終わるところが関数の末です。パラメータは小括弧の中で定義します。関数を呼び出すところで値を受け取るところです。pythonで関数名を作成する方法は決めてないですが、コード標準では動詞+名詞の形式で作成するようにお勧めしています。他のプログラム言語と似ていますが、動詞、名詞の区分を大文字ではなくアンダーバーで区分します。pythonではパラメータを使う方法が二つあります。一つはパラメータ位置で値を渡す方法(一般的な方法)があり、キーワードでパラメータを渡す方法があります。そしてパラメータの個数を決めなく、可変的に設定することもできます。結果をみれば可変パラメータはタプルタイプになります。パラメータをディクショナリタイプで渡すこともできます。pythonはjavascriptと似ている文法が多いです。インライン関数で関数の中の関数を設定することができます。関数をオブジェクトタイプで設定することもできます。get_functionの中で関数をリターンしました。javascriptの経験がある方ならどの意味か分かると思います。callbackはデザインパターンでvisitパターンで関数をパラメータで渡す意味です。javascriptみたいにcallback関数が作成されました。やはり、スクリプト言語なので似ている文法が多いです。参考にnoneのキーワードは他のプログラム言語だとnullと同じ意味です。この頃になるとjavascriptみたいにクロージャやラムダ(lambda)があるか知りたくなります。pythonもクロージャがあるしラムダ(lambda)があります。クロージャ機能は関数の中で宣言したデータではなく、外部で宣言したデータを持ち込んで使う方法ということです。それならラムダ(lambda)式はどのように実装できましょうか？lambdaの作成方法はコンプ
#python,#function,#inlinefunction,#callback,#lambda
作成日付 : 2020/06/02 20:51:22 修正日付 : 2020/06/02 20:51:22
こんにちは。明月です。この投稿はpythonでリスト(list)とタプル(tuple)、そしてディクショナリ(dictionary)、セット(set)に関する説明です。一般のプログラム言語の流れだと変数宣言とデータタイプを確認すると次は制御文を確認します。でも、pythonの場合はリスト系のデータ集合から確認します。リストとタプルはデータが集まっている配列タイプでリストは追加、削除が可能、タプルは不可能なタイプです。その中でディクショナリはリストでキーがあるデータセットです。セットはリストと似ていますが、数学の集合計算の和集合、積集合を計算するようなデータタイプです。pythonには同じリストタイプでも種類がもっと精密に分けています。リスト(list)リストは他のプログラム言語と同じく、push(append)とputが存在するリスト構造のアルゴリズムです。リストはpythonで大括弧([])で宣言します。リストには格納、挿入、削除機能もありますが、ソート、コピー機能もあるのでデータ集合管理がしやすいです。タプル(tuple)タプルは上のリスト機能で宣言だけできるし、挿入、格納、削除ができないし、ソート、コピーもできないです。タプルはpythonで小括弧(())で宣言します。タプルの0番のデータを修正しようとすればエラーが発生します。タプルは関数の結果、キーなどで使うタイプです。なのでタプルになっているデータを一つの変数に変換ができますが、それをpythonではタプルアンパッキングといいます。タプルアンパッキングはコンマ(,)の区切りでやりますが、タプルの個数は一致しないとエラーが発生します。ディクショナリ(dictionary)pythonのディクショナリはjavascriptのjsonの構造と同じです。ディクショナリはpythonで中括弧({})で宣言します。セット(set)setは集合計算専用のデータタイプです。つまり、数学の特性をもっているデータタイプです。セットはpythonで中括弧({})で宣言します。ここで区分することはディクショナリも中括弧({})で宣言します。差異はディクショナリはキーがあるしセットはキーがないことです。セットとリストの差はリストはユーザーが格納順番でデータがありますが、セットは順番がありません。格納したことが初めにある可能性もあるし、最後にある可能ですもあります。集合の
#python,#list,#set,#dictionary,#tuple
作成日付 : 2020/05/27 18:49:08 修正日付 : 2020/05/27 18:49:08
こんにちは。明月です。この投稿はjavaのstringbuilderとstringbufferの差異に関する説明です。javaの中で文字列タイプのデータタイプは「string」があります。「string」はプリミティブデータタイプ(primitive data type: int, char, double...)じゃなく、objectクラスから継承されたクラスタイプです。すなわち、「string」の内部はbyte(unsigned char)タイプになっています。それで我々が「string data1 = "abc";」ということに宣言すれば内部は「byte[] data1 = new byte[] {'a', 'b', 'c'}」になります。そのため、「string」タイプと「string」タイプの文字列を合わせると思えば、下記の処理になります。stringで文字列を合併すれば上のフローとおりに文字列が合併されます。つまりstringにstringを合併すれば新しいstringが割当します。それなら「string test = "abc" + "def" + "ghi" + "jkl";」は合併フローがすごく複雑になります。そのため、stringとstringを合併することはパーフォーマンスに影響があります。そうすれば上のarrayタイプじゃなく、連結リストタイプ(list)みたいに文字列を「add」関数で追加する方法がないかと疑問になります。それがarrayタイプじゃなく、listタイプで文字列を合併するのが「stringbuffer」と「stringbuilder」です。上の例だけでみれば差異がそんなになさそうです。でも文字列の合併が多いほどパーフォーマンスの差異は確かに出ると思います。それなら「stringbuffer」と「stringbuilder」の差異はなにでしょうか。同期化の差異です。stringbufferの場合はクラス内部で同期化しますが、stringbuilderの場合は同期化がありません。初めのスレッドで10個、２つ目のスレッドで10個を入れたので全ての文字桁数は20個になるはずです。結果はstringbuilderには2
#java,#StringBuilder,#StringBuffer
作成日付 : 2020/03/02 07:52:22 修正日付 : 2020/03/02 07:52:22
こんにちは。明月です。phpのはウェブスクリプト言語です。ウェブサービスを立ち上がってウェブブラウザと連携すれば様々な情報をブラウザから受け取ります。例えば、ウェブサービスの環境情報やブラウザからのrequest情報、セッション、クッキーなどの情報がありますね。それをphpは「$_server, $globals, $_get, $_post, $_request, $_cookie, $_session, $_files, $_env(getenv())」の変数でサーバとクライアント間で発生した情報を取得するのができます。上の変数を理解するようにはウェブ環境の理解が少し必要です。ウェブとは簡単に考えるとウェブサーバとブラウザ間で非同期通信するプログラムです。ブラウザからurlのアドレスでウェブページをサーバに要請(request)するとサーバの場合はその要請によってhtmlファイルを作成してブラウザに応答(response)します。すごくシンプルな形式でその以外のファイルはファイルサーバみたいにイメージやjavascriptファイル(.js)、style sheetファイル(.css)をダウンロードして、ブラウザで動作するし(javascript)、デザインを描画(styel sheet)、イメージを表示するなどの動作します。ブラウザからウェブサーバに要請するタイプは２つがあります。それはget方式とpost方式があります。getの場合はブラウザのurlの中でクエスチョンマークの区切りでデータをurlに付けサーバに要請するタイプです。postの場合はデータをプロトコールのヘッダに含めて要請するタイプですね。各サーバとブラウザにはプログラム実行中でデータを格納して使っていますが、ブラウザ側でデータを持っていることをクッキー(cookie)というし、サーバ側にデータを持っているのはセッション(session)といいます。しかしブラウザ単位でどのセッションを使うかの設定はブラウザ側のクッキーの格納して要請するたびにセッションキーでサーバ側のセッションを持って来て使う流れで運用しています。すごくシンプルに説明しましたが、詳細のは下記のところで確認してください。link - https://developer.mozilla.org/ja/docs/web/http/overview$_serverlink -
#php,#$_SERVER,#$GLOBALS,#$_GET,#$_POST,#$_REQUEST,#$_COOKIE,#$_SESSION,#$_FILES,#$_ENV
作成日付 : 2020/01/17 03:00:00 修正日付 : 2020/01/17 03:00:00
こんにちは。明月です。前述でphpのclassを宣言して使う方法に関して説明しました。link - [php] functionとclass使用方法、アクセス修飾子、そしてstaticphpもクラスがあるのでインタフェース(interface)と抽象クラス(abstract class)があります。個人的な考えはphpにはデータタイプの指示子がないのでインタフェース役がコンパイル言語(javaやc#)より活用性が少ないではないかと思います。筆者も実際にphpでinterfaceを使ったことがないですね。でも抽象クラスはよく使います。上の例をみればitestインタフェースとabstract抽象クラスとtestクラスがあります。依存層は「itest -> abstracttest -> test」でなっています。それでtestを宣言してrunを実行すればabstracttestのrunメソッドが実行してrunメソッド中では派生クラスの「print()」関数を呼び出す結果は「helloworld」になります。ここでparentとthisの概念ですね。$thisの場合は実行しているクラスのメンバーをさしています。すなわち、メンバー変数か関数を指しています。$thisの場合はc++のポインタの形で矢印で指示(->)をしています。しかしparentの場合はparent::の形で指しています。&parent->の形ではエラーが発生します。文法が面白いですね。上の例はobj->runを通ってabstracttestのrunが呼び出してrun関数で抽象メソッドprintが呼び出します。抽象メソッドprintが呼び出したのでtestクラスのprintが呼び出してprint関数で上位クラスのsetdataにデータを入れてgetdataでデータを持ってきて変換する形です。私がデータを「hello world」を入れたので結果は「hello world」が出ます。
#php,#interface,#abstract,#parent,#this
作成日付 : 2020/01/13 03:00:00 修正日付 : 2020/01/13 03:00:00
こんにちは。明月です。今まで、cssスタイルに関して説明しました。cssスタイルはセレクトからデザインスタイル、トランジションなど様々な機能がありますね。html編集ツールもあるし、他のプログラム言語はideや開発ツールがありますが、cssの場合はないかと疑問になりますね。cssの開発は全てウェブアプリケーションで画面の領域です。cssことでサーバサイドの開発はないですね。画面なので、普通はブラウザにcssの編集や開発ツールがありますね。クロームの基準で「設定」の「その他」の「開発ツール」があります。上のイメージはクロームですが、全てのブラウザがその開発ツールの機能を持っているはずです。ショットキーでは「ctrl+s方法hift+i」です。開発ツールを起動すると下記のイメージみたいなタブが出ます。上の「elements」、「console」、「sources」などのサブタブがありますが、「elements」以外はほとんどjavasciprtと関係があるものなので、ここでは省略します。「elements」タグでみるとウェブサイトのタグ構成が見えます。「elements」のタブの下を見るとスタイルというタブでcssスタイルがありますね。それで使用方法は下記通りです。開発ツールの右上をクリックして確認した要素を選択します。選択すると開発ツールの下の部分でcssスタイルがでます。様々のスタイルの設定を試すことができますね。今までcssのスタイルや値について説明しましたが、実は開発ツールを利用すると別に全て覚えてスタイル作成する必要はないですね。ただ、概念だけ知っていれば開発ができます。でも、ブラウザで設定して画面でスタイルが反映することみても実際のソースには反映されないので、気をつけてください。そのツールを見れば、「-webkit-」がつけているcssスタイルがあります。cssを設定してファイアフォックスやオペラ、ie、クロームを同じページを見ればスタイルが微妙に違います。その時に上の接頭辞でブラウザ別で設定できます。 接頭辞 説明 -webkit- クローム、サパーリブラウザ -moz- ファイアフォックスブラウザ
Study / Javascript, Jquery, Css
作成日付 : 2019/12/25 07:54:31 修正日付 : 2019/12/25 07:58:13
こんにちは。明月です。cssで色のスタイルは色名で設定することもできるし、rgb表現式で設定もできるし、hexの値で設定もできます。/*色名設定*/.color-1{ color:blue;}/*rgb表現式*/.color-2{ /*赤、緑、青*/ color:rgb(255,0,0);}.color-3{ color: #008000;}color-1color-2color-3色の参照は下記のurlで参考できます。link - https://www.w3schools.com/cssref/css_colors.aspこの投稿では基本色設定ではなく、グラデーションに関して調べてみました。初めのdivタグのlinear-gradientは線形のグラデーションです。パラメータはグラデーションの変換角度で180度で設定すれば水平で上から下の段階でシルバー色から紫色に変わると意味で色の設定です。二つ目は上右から下左の角度ですが、角度では45度ですね。初めは赤色で、真中は白色、最後は青色に設定されます。三つ目のradial-gradientは丸系のグラデーションです。パラメータはcircle設定ですが初めは真中から外側に黄色から緑色に設定することです。四つ目は丸の設定ですが、丸のサイズが横50px、縦50pxです。「at」の後は丸の位置ですね。右から80px、上から30pxの中心であずき色、オリーブ色、アクア色順になります。五つ目のネイビー色20%、teal色80%、水平(0deg,180deg)角度で繰り返いしてグラデーションになります。六つ目の角度(-45deg = 315deg)で繰り返いして初め白色から白色まで5px、黒色5pxから黒色10pxまでグラデーションになります。七つ目のrepeating-radial-gradientは繰り返し丸系のグラデーションです。ここのキーワードは四つがありますが、closest-side、closest-corner、farthest-side、farthest-cornerがありますね。 キーワード 説明 closest-side グラデーションの終了形状は、その中心に最も近いボックスの側面（円の場合）または中心に最も近い垂直および水
Study / Javascript, Jquery, Css
作成日付 : 2019/12/24 07:37:22 修正日付 : 2020/03/10 23:27:05
こんにちは。明月です。アニメーションスタイルは前述で紹介したトランジションと似ているな効果になります。link - [css] トランジション(transition)様々な要素を動的に動く効果と関係があることですね。差異というとトランジション(transition)の場合は指定したcssスタイルによる効果を制御するが、アニメーションの場合は様々なアクションをもっと複雑な効果ができることだといいます。複雑な効果というとトランジション(transition)の場合はスタイルで色の変換、要素移動する時に遅くしたり、早くしたりする制御ですが、アニメーションは要素を回しながら色をキラキラすることができると意味です。私の場合は「loading」イメージやコンテンツの効果よりアイコン要素で動的要素を作る時によく使います。@keyframes test-animation{ 0% { min-width:0%; background-color:red; } 50% { min-width:50%; background-color:blue; color:white; } 100% { min-width:100%; background-color:green; color:white; } } div.example-box { display:inline-block; animation-name : test-animation; animation-duration :3s; animation-delay:1s; animation-timing-function:linear; animation-fill-mode:both; animation-iteration-count: infinite; animation-direction:reverse; } div.example-box:hover { animation-play-state:paused; }マウスをバーの上に置いてみてくたさい。アニメーションスタイルをみれば、ほぼトランジションと似
Study / Javascript, Jquery, Css
作成日付 : 2019/12/20 20:51:38 修正日付 : 2019/12/23 07:44:49
こんにちは。明月です。トランスフォームとは3dな表現するように回転、拡大、縮小するスタイルといいます。何かというと下記の形です。 p.sample{ border: 1px solid #000; width: 300px; height: 70px; font-size: 20px; margin-left: -50px; margin-top: -40px; transform: translate(50px,50px) skew(200deg,-5deg); } おはようございます。こんにちは。こんばんは。トランスフォーム属性は「transform」,「transform-origin」,「perspective」,「transform-style」,「perspective-origin」,「backface-visibility」の６つがあります。「transform」の属性は変更スタイルを指定することです。回転しようか(rotate)、移動するか(translate),3d軸で移動(translate3d)するオプションもあります。心痛なオプション(scew)、拡大、縮小(scale)、3d的な拡大、縮小(scake)もあります。参照 - https://www.w3schools.com/cssref/css3_pr_transform.asp参照 - https://www.w3.org/talks/2012/0416-css-www2012/demos/transforms/demo-translate3d-cube.html「transform-origin」は回転の軸を決定するもので基本値は「transform-origin: center center」です。回転、拡大、縮小、心痛で使います。「perspective」は遠近感の設定です。「perspective-origin」は上の遠近感の設定する時に位置になります。「perspective-origin:top left;perspective:100px」なら上左の基準で100px距離の遠近感に表示することです。「transform-style」は上の「perspective」と「perspective-origin」をしようとすると設
Study / Javascript, Jquery, Css
作成日付 : 2019/12/19 13:00:26 修正日付 : 2019/12/19 15:23:12
こんにちは。明月です。cssのトランジション(transition)とは属性変更時に変更の速度を調節すること、変更のサイクルを設定することだと思われます。例えば、「div」タグの背景色を黄色にしてマウスを置く(hover)と緑色になることに設定すると思うと実際にタグで設定するとあっというまで処理されますね。例 .example-1 .item{ background-color: yellow; height: 50px; } .example-1 .item:hover{ background-color: green; } マウスを上に置いてください。でもユーザによってこの変更することをスムースにアニメーションのようなアクションを与えたい人が言うと思います。その時にトランジション(transition)を利用すると設定ができます。例 .example-2 .item{ background-color: yellow; height: 50px; transition: background-color 2s ease-out 50ms; } .example-2 .item:hover{ background-color: green; transition: background-color 2s ease-out 50ms; } マウスを上に置いてください。トランジションは４つのスタイル属性があります。４つと言ってもdelayの属性以外にはすべて設定しなければ作動しないですね。「transition-property」はトランジションの属性を与えるcssスタイル名です。上の例では「background-color」に効果を与えますね。「transition-duration」は変換する時間です。上の例とは黄色から緑色に変換することで2秒かかりますということですね。「transition-timing-function」は変換のタイプですが、「ease-out」は初めは遅くて早く変換するタイプ、「ease-in」は初めは早くて遅く変換するタイプ、「ease-in-out」は初めは早くて遅くなるがまた、早く変換するタイプ、「lin
Study / Javascript, Jquery, Css
作成日付 : 2019/12/18 20:33:57 修正日付 : 2019/12/18 20:35:20
こんにちは。明月です。前述からcssのスタイルに関して纏めています。今回は要素の表示タイプと位置(postision）に関して調べてみます。上の例を見ればスタイルで「display」を使いました。displayは要素のスタイルの形態を決めるものです。displayの要素の値には下記とおりにあります。 値 説明 inline 要素をインライン要素（<span>など）として表示します。 高さと幅のプロパティは効果がありません。 block 要素をブロック要素（<p>など）として表示します。 新しい行から始まり、幅全体を占有します。 contents コンテナを非表示にし、要素の子要素をdomの次のレベルに上げます。 flex ブロックレベルのフレックスコンテナとして要素を表示します。 grid 要素をブロックレベルのグリッドコンテナとして表示します。 inline-block 要素をインラインレベルのブロックコンテナとして表示します。 要素自体はインライン要素としてフォーマットされますが、高さと幅の値を適用できます。 inline-flex 要素をインラインレベルのフレックスコンテナとして表示します。 inline-grid 要素をインラインレベルのグリッドコンテナとして表示します。 inline-table 要素はインラインレベルの表として表示されます。 list-item 要素を<li>要素のように動作させます。 run-in コンテキストに応じて、要素をブロックまたはインラインとして表示します
Study / Javascript, Jquery, Css
作成日付 : 2019/12/13 20:08:50 修正日付 : 2020/01/29 22:58:35
こんにちは。明月です。cssはhtmlタグでスタイルを付ける言語です。webの構造は基本文字でなっているドキュメント形式です。そこでcssで文字スタイルを付けるのが基本ではないかと思います。実はfontのスタイルは上よりもっと多いですね。でも筆者も使ったことがないし、よく使うことは上の以外にはないかと思います。font-sizeは文字のサイスのスタイルです。文字単位では、「px」、「pt」、「em」、「rem」があります。「px」の場合はピクセルの単位で文字のサイズを幅、縦がモニターの12ピクセルサイズになることです。「pt」の場合はフォントサイズの単位ですが、基準としては筆者もよく知りません。でもwordやメモ帳でよく使うフォント単位なので大体にどのサイズかは分かると思います。「em」と「rem」は比率サイズですが、「em」の場合は違いところで設定したサイズによって倍率、「rem」の場合は「root」のサイズ、つまり「html」で設定したサイズの倍率です。上の例は「em」で定義しました。「div.test」は「body」の派生位置になっているので、bodyタグの「font-size:12px」の「1倍」で設定されます。「font-style」はイタリックなどの設定です。「font-family」はフォントの種類を設定することですね。「font-weight」はフォントの太さを設定するところです。数値は何の意味かを詳しくしらないですが、「100」単位で大きい数字だと太くなります。boldやbolder、lighterでも設定ができます。font-colorはフォントの色の設定ですが、代表的な色は英語で設定してもいいです。でも細かい色はhexの色値で設定ができます。hexの色は下記のリンクを参照してください。link - https://htmlcolorcodes.com/text-alignはテキストの整列設定です。text-decorationの場合は取り消し線やアンダーラインなどの設定ができます。text-shadowの場合は影効果ですが、「左右 上下 遠さ」の順番で設定ができます。white-spaceは文字列の折り返し設定ですが、テーブルの場合は自動に折り返すことがあるので、たまにテーブル見方が崩れることがあります。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/11 21:13:22 修正日付 : 2019/12/11 21:13:45
こんにちは。明月です。今回でcss選択子の整理が全て終わると思います。今日、紹介する選択子の使用頻度はよく使いますが、よく使わない。つまり、ウェブサービスのスタイルよって違いますが、よく使うところには使いますが、使わないところは全然使わない、その選択子です。上の例をみれば、３つの「a」タグと「div」タグ、そして５つの「input」タグがあります。先、「a」タグの「link」、「visited」は「link」タグによっては一回もクリックしなかった場合の「a」タグを選択、「visited」は一回以上にクリックした場合の「a」タグを選択することです。つまり、初めは赤色の「a」タグが３つありますが、「選択１」をクリックしてしまうと「選択１」の「a」タグはピンク色になりますね。「:target」は「a」タグで「id」によってフォーカスされたものを選択するものです。つまり、ブラウザのアドレスに「#id」名が指しているものが選択されます。「:enable」と「:disabled」は「input」タグで「diabled」属性が「disabled」か「none」かの選択子です。タグの属性で「enabled="enabled"」とはありませんので、「disabled="disabled"」がなければ、「:enabled」の対象、あれば「:disabled」の対象になります。「hover」はマウスのイベントによって選択するものです。「hover」は要素でマウスが上にあると選択されます。つまり、テキストボックスの上にマウスを置くとテキストが白色になりますね。「focus」の場合はテキストボックスの場合、キーボードのカーソルがテキストボックスにあると選択する選択子です。テキストで入力がおわり、他のことを選択するとこの選択子は解除してしまいます。ここまでcssの選択子に関してほとんど纏めて説明しました。cssの選択子はjavascriptやjqueryでも同じ形式で選択子を使うので「css選択子」はウェブで重要な部分だと思います。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/10 07:31:28 修正日付 : 2019/12/10 07:32:01
こんにちは。明月です。前述で疑似クラス選択子に関して説明しましたが、今回は疑似要素選択子ですね。名称が似てますが、選択対象に関しては全然違いますね。疑似クラスの場合は同じタグのリストで何番目の要素を選択ということですが、疑似要素選択子はタグ要素を選択するという意味が近いではないかと思います。この疑似要素はよく使いますが、特に内容を強調やiconを付ける時によく使いますね。「first-line」は「p」、「span」、「div」タグなどの文字列を入れられるタグに使う選択子です。文字列で一行目だけ反映する選択子、つまり「br」タグの前までの適用される選択子です。タグの形式ではなく、文字列で選択する特徴をもっています。「first-letter」の場合、初めの文字だけ反映する選択子です。日本語より英語で似合う選択子で、筆者も使ったことがないですね。そして「before」と「after」はタグの前後に「content」の値を入れるタグです。疑似要素選択子はメニューやアクティブ効果などで使うとよい選択子だと思います。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/09 07:28:27 修正日付 : 2019/12/09 07:28:47
選択された要素の基準で隣接された要素や派生(下位)要素を選択する方法に関する記述です。styleでアスタリスクマーク(*)はすべての要素を選択する方法です。すべての要素はfont-styleや基本padding、marginを設定する時に使いますが、すべての要素に反映があるのでよく使わない選択子です。そしてstyle設定でタグあるいはidやclass、属性で要素を選択しますが、コンマ(,)を使えば複数選択も可能です。例えば「p, div」といえばpタグとdivタグを選択することです。そして孫選択子、子選択子の意味は孫選択子の場合、選択要素の中であるすべての派生タグをいうことで子選択子は選択した直下の派生タグを選択することです。上の条件の構造でhtmlが作成したと思えば、aタグの孫要素は「b, c, d, e」タグになるし、子要素は「b, c」にあんることです。つまり、「a d」の指定みたいに、aとd間にスペースを置くと、aタグの孫要素のdタグを選択することです。子要素でみると「a > b > d」の選択子になります。隣接選択子で「+」を使用すれば同じレベルの要素で次(派生ではない)に配置された要素、つまり「b + c」で設定するえば「c」を選択することです。「b + f」の場合はbタグすぐあとで「f」タグがないので何も選択されない結果になります。「~」の場合は「+」みたいに派生ではなく同じレベルの後で配置された要素ですが、すぐ後ろふくめすべての要素ですね。上の例をみれば初めは孫要素を選択するので.p1のh1と.p3のh3になります。でも.p2のh2の場合は.p2の子要素なので.p4のh2タグは当該事項ではありません。~を使って+をつかったので先にクラスが.p1タグの後のdivタグの背景をすべて黄色に設定して、p1タグの次の要素を赤色に設定しますね。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/06 07:27:36 修正日付 : 2020/01/14 18:04:37
こんにちは。明月です。前述で疑似クラス nth-childとnth-of-type,first-child,fist-of-typeに関して説明しました。link - [css] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-typelink - [css] 疑似クラス - first-child, last-child, first-of-type, last-of-type今回の投稿ではonly-child, only-of-type, empty, empty, rootを調べると思いますが、あまり使わない選択子ですね。それで例を確認しましょう。そしてcssで「only-child, only-of-type, empty, empty, root」を作成してまましょう。「only-child」の疑似クラスは「test」クラスの派生タグで「p」タグが一つだけあることを探します。そしたら「p」タグを持っている「.test」クラスのエレメントは初めの「div」タグと２つ目の「div」タグですね。でも２つ目の「div」タグは「p」タグ以外に「span」タグも持っているので、「only-child」では初めの「dev > p」タグが文字が赤くなると思います。次は「only-of-type」です。「only-of-type」は「only-child」と似てますが、結果は全然違います。「p:only-child」の場合は全ての派生タグで一つの「p」タグと意味です。「span:only-of-type」の場合は全ての派生タグではなく「span」のバグが一つだけのタグですね。「div.test」タグを見ると２つ目と３つ目が「div」タグで「span」タグを持っていますが、２つ目の場合は「span」タグが２つですね。３番目の「div」タグだけ対象です。「:empty」の場合は派生のタグがないタグを調べます。参考に「<タグ>テスト値</タグ>」の形式も派生データがあることで判断します。つまり、「:empty」に選択されません。「:root」は「html」を選択することと同じ意味です。「html」や「body」選択することと「:root」で選択することと差異があるかな。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/05 07:29:15 修正日付 : 2019/12/05 07:29:41
こんにちは。明月です。前述で疑似クラス nth-childとnth-of-typeに関して説明しました。link - [css] 疑似クラス - nth-child, nth-of-type, nth-last-child, nth-last-of-type今回は「first-child」と「first-of-type」に関して調べてみます。簡単に「first-child」に説明すると「first-child」は「nth-child(1)」と同じ意味です。上のテーブルで全ての枠を描こうと思いまして、「td」のタグで重ねないようにしようと考えています。初めの行の初めの列だけの左上の枠を描いて全ての「td」の右下を描くと全ての枠が描くことに出来ます。参考に「first-child」の代わりに「nth-child(1)」を入れても同じ結果になります。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/04 07:28:37 修正日付 : 2019/12/04 07:29:26
こんにちは。明月です。cssの擬似クラスは役12個ごろありますが、そのなかで「nth-child」、「nth-of-type」、「nth-last-child」、「nth-last-of-type」に関して調べてみました。先、nth-childやnth-last-childは要素のn番目を選択することです。offsetタイプで数えることではないので初めの番後は「1」から始まります。(プログラムで配列などを数える時にoffset概念で「0」から数えますが、cssの場合は人間が数えるみたいに「1」から始まります。)上の例のテーブルで「4」を選択するようには「tbody > tr:nth-child(1) > td:nth-child(2) > p:nth-child(2)」で選択すると選択されます。でも、nth-childで「8」番を選択しようと思うと少し迷ってしまいます。なぜなら、8番のタグは「p」タグではなく「span」タグなのです。簡単に考えるとその「td」の中である「span」タグは一つだけなので「tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-child(1)」で選択するとできそうです。でも、実際はできないですね。理由はnth-childの選択子はタグの要素に関係しずに、選択するからです。つまり、span:nth-child(1)の場合はtr:nth-child(2)の派生タグでspanタグがないので、何も選択されない状況になります。纏めて、上のspanタグを選択したいなら「tbody>tr:nth-child(2)>td:nth-child(2)>span:nth-child(2)」の選択子で選択しなければならないです。この状況になると何か迷いますね。単純な構造ならすぐ気づきますが、複雑なタグ構造なら迷ういますね。それでタグ別で順番を選択できる選択子はnth-of-typeです。このことは同じレベルの同じタグ要素のn番目を選択するのができます。その後は「nth-last-child」と「nth-last-of-type」の選択子です。この選択子はネーミングで気づきますが、逆に選択する選択子です。今回は「6」と「5」を
Study / Javascript, Jquery, Css
作成日付 : 2019/12/03 07:21:20 修正日付 : 2019/12/03 07:22:19
こんにちは。明月です。cssの選択子で一番良く使う選択子はタグによって、「id」によって(#id)、「class」によって(.class)が一番良く使う選択子で次がこの属性選択子ではないかと思います。htmlタグではタグ名があるし、タグテキストがあります。そして属性(アトリビュート)がありますね。css側で上の属性によって選択しましょう。上の例は全て「input」タグが４つ、「a」タグが３つがありますね。cssｍｐ属性選択子で選択してスタイルを付けましょう。上の例をみればbodyの中でタグは全て７つがあります。inputタグは４つで、aタグが３つがあります。属性選択子はブランケット([])で選択します。上の通りで一番上のテキストボックスは枠が黒くなりますね。２つ目のスタイルはボタンタイプのinputタグの枠が赤になります。３つ目はvalue属性、つまり、値がsubmitを含めているボタンは枠が青になります。４つ目はhrefの属性が「https」で始まる「a」タグの文字が緑になります。５つ目はhrefの属性が「localhost」で終わる「a」タグの文字がグレーになります。属性選択子はcss selectorの中で良く使う選択子です。
Study / Javascript, Jquery, Css
作成日付 : 2019/12/02 07:32:37 修正日付 : 2020/01/14 17:25:53
こんにちは。明月です。cssでselectorというのはhtmlドキュメントにスタイルを付けるような指示子ということです。このselectorは単一のタグを設定も可能し、復讐のタグの設定も可能です。そして、タグだけの指示だと特定タグを選択するのは大変ですが、アトリビュート、配列順番なのでも選択が可能です。参照リンク - https://www.w3schools.com/cssref/css_selectors.aspcss selectorを確認するように先にhtmlドキュメントを作成しましょう。上のhtmlタグは普通のテーブルタグです。htmlタグを作成したことがある方なら構造がすく理解すると思いますね。そうすると我々は「tbody」タグの１番の「tr」タグの１版「td」タグを選択したいならどうしましょうか？簡単にタグで選択すると「table#test > tbody > tr:nth-child(0) > td:nth-child(0)」になります。意味としてはtableのアトリビュートのiｄがtestのタグの直下派生のtbodyの直下派生のtrタグの０番目の直下派生のtdタグの0番目のタグを指しています。複雑ですね。でもタグを指しる時にはこんなに細かく全てのタグ名を書く必要はないです。タグでスタイルを定義するのはそんなに難しくないですね。それなら、css selectorに関して纏めます。 選択子 説明 .class class=”class”の全てのオブジェクトを選択 #id id=”id”のオブジェクトを選択(タグのidはページの雄一が仕様です。) * 全体選択子全てのオブジェクトを選択 element 要素選択子 - 指定した要素を選択 element1,element2 要素選択子 - 選択する要素を様々を指定(element1とelement2を選択) element1 element2
Study / Javascript, Jquery, Css
作成日付 : 2019/11/28 07:28:03 修正日付 : 2020/01/13 13:59:26