一言Ubuntu

2021-01-06

python3,Linux MintにwxPythonをインストールする

OS : Linux Mint19 xfce

wxPyhtonは、高機能なpython3のGUIだ。

python 2 で使用していたが、python 3 では一時期対応していなかったが、現在では使用可能となっている。
標準のtkinterと比べて、機能面で優れているようだ。

Python3-wxgtk4.0 をインストールすると

import wx

でエラーが出力されない。

2020-12-20

エディタGeanyをpythonプログラムを独立したターミナルで実行させる

OS : Linux Mint 20 xfce
エディタ : Geany 1.36

pythonのプログラムを作成するためのエディタの一つに、Geanyがある。

プログラム実行時に、エディタ内蔵の端末か、OSの端末を介するかを設定することができる。

操作上、OSの端末のほうが使いやすい。

初期設定では、エディタ内蔵の端末のため、変更するためには次の通り。

「エディタ内蔵の端末」（デフォルト）の設定
VTEでプログラムを実行にチェクを入れる

「OSの端末」の設定
VTEでプログラムを実行のチェクを外す

OSの端末での実行

2020-12-16

Linux Mint xfce, パネルのアイコンを左右に配置する

OS : Linux Mint 20 xfce

Mint 20 xfce はディスクトップをカスタマイズできる割に、動作が軽いディストリビューションである。

アイコンが左寄せになっている状態

アイコンを左右に配置し、中央エリアを空けるには、セパレーターを使う。

パネルの設定から、アイテムタブを選び、空ける位置にセパレーターを配置する。

セパレータを編集する。（赤丸をクリック）

スタイルを透明に、拡張にチェックを入れる。

セパレーターが可能な範囲で空を作り、左右にアイコンが配置される。

左右にアイコンが配置されている状態

2020-11-21

Drupal8,ckeditorで文字色を使用可能にする

[ バーション ] Drupal8 8.7.7
[ データベース ] Sqlite

Drupal8のエディタは、ckeditorを使用している。しかし、標準で文字装飾でカラー機能はない。
このため、手作業で文字色の機能を追加するしか無い。

以下の手順で行う

１．ダウンロード

【必要ファイル】
A) panelbutton-8.x-1.1.zip
B) panelbutton_4.8.0.zip
C) colorbutton-8.x-1.1.zip
D) colorbutton_4.8.0.zip

【ダウンロード元】
A) https://www.drupal.org/project/panelbutton
B) https://ckeditor.com/cke4/addon/panelbutton
C) https://www.drupal.org/project/colorbutton
D) https://ckeditor.com/cke4/addon/colorbutton

※上記ファイルは 2018年1月現在のもので、最新版は以下のサイトで検索する
https://www.drupal.org/project/project_module

２．フォルダー作成

ダウンロードファイルを解凍＆コピーする前に、libraries フォルダーを手作業で作成する。

http://サイト名/libraries

３．解凍＆コピー

上記A〜Dの解凍したファイルを module, librariesに振り分けてコピーする。

上記 A,C は http://サイト名/module 手動でフォルダーへコピーする。
B,D は http://サイト名/libraries 手動でフォルダーへコピーする。

４．インストール

機能拡張で「CKEditor Color Button」、「Panel Button」をインストールする。

５．設定

環境設定 > テキストフォーマットとエディターで、ツールバーの構成を設定する。

設定は以上

上記で文字色アイコンが表示されなかった場合、B,Dのファイルをコピーしたlibrariesフォルダーを次の場所に置いてみる。

1) http://libraries フォルダーに置く。

2) http://サイト名/sites/all/libraries フォルダーに置く。

1) 2) のいずれか、またはどちらかを試してみる。
原因は不明だが、解決したこともあった。

ちなみに、
Drupal9 (9.0.8) でやってみた結果、うまくいかなかった。アイコンは表示されたものの、色の選択アイコンは表示されなかった。

#ckeditor, #drupal, #libraries, #colorbutton, #panelbutton

2020-11-16

Drupal8から9へテンプレートを移行する方法、初期設定編

[ バージョン ] Drupal 9.0.7

<< エラー状況 >>

Drupal8から9へ移行する時、テンプレートをそのまま適用すると、

「サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。」

というエラーメッセージが表示され、サイト自体が表示されない。

解決するためには、テンプレートファイルの内容を書き換えることによって、解決される。
ここでは、Drupal8から9への完全移行ではなく、非表示なったサイトを表示させるだけの解決方法。

<< 解決方法 >>

テンプレートファイルの内容を一部書き換える。

まず、テンプレートをフォルダーごとを以下に置く

{ サイト名 }/themes/custom/

以下のファイルの内容を一部書き換える

< ファイル名 >

{ サイト名 }/themes/custom/{テンプレート名}/{テンプレート名}.info.yml

▶ 書き換え内容

core: 8.x

を

core_version_requirement: ^8 || ^9

に書き換える。

サイトから、Drupal8から移行したテンプレートをインストールする。

以上

なお、一部を書き換えてもDrupal9への完全移行とはならなかった。CSSなどの修正が必要である。完全移行は後日に。
修正結果をすぐに反映するために、全てのキャッシュをクリアーしキャッシュ機能の一時停止の設定が必要だ。
全てのキャッシュのクリアーは、ホーム > 管理 > 環境設定 > 開発 > パフォーマンスから行う。

[ 参照サイト ] https://www.drupal.org/docs/theming-drupal

■インストール時につまづいたこと

[ バージョン ] Drupal 9.0.7
[ データベス ] Sqlite

セキュリティのエラーについて、以下のような警告が表示された

「settings.php の trusted_host_patterns が設定されていません。セキュリティ面で脆弱となる恐れがあるため、設定することを強くおすすめします。・・・」

<< 解決方法 >>

ファイル名 { サイト名 }/sites/default/settings.php の内容を書き換える。

以下のコードを追加する。（コメントを外す）

▶ http://localhost/xxxxxにサイトを設定する場合

*/
$settings['trusted_host_patterns'] = [
  '^localhost$'        # localhost access
];
 /*

上記例では、サンプルとして記述されているコメント行を外すだけ。

意味は http://localhost/ 以外からの操作アクセスを禁止することである。
なお、カンマで区切れば複数設定可能だ。

[ 参考 ] Drupal7およびDrupal8のサポートは2022年11月に終了予定。
[ ダウンロード ] Drupal Japan ( http://drupal.jp/core_download )
[ 環境/データベス ] MySQL, Sqlite, PostgreSQL

2020-10-25

CSSだけでスライドメニューを作成する基礎の基礎

ホームページの上部に漢字の三（ハンバーガーボタン）に似たアイコンをクリックするとメニューが表示される。ことのき、メニューは右または左からスライドするものがある。

スライドメニュー（またはドロワーメニュー）は、CSSだけで作成することができる。

<< 作成ポイント >>

CSSの transform: translateX() または transform: translateY() でメニュー領域を表示したり、隠したりすることがポイント。
表示したり、隠したりするスイッチは HTMLの inputタグ を記述し。CSSの :checked でスイッチとして、オン（有効）／オフ（無効）する要素を指定する。

実際のホームページでは、チェックするクリック領域を三記号に変えているだけである。

ポイントは以上

今回は、以下のように右側、左側、上部または下部からスライドさせてメニュー領域を表示したり、隠したりするコードを記した。

<< 右、左、上または下からスライドさせる使い分け >>

メニューを画面のどこに隠しておくかである。
例えば右からスライドさせる場合に、画面右側の見えない位置に隠して、ハンバーグボタンでオン（チェックを入れる）にすると、隠れたメニュー領域が画面の右から移動し、表示される。
この時、移動する速さを CSSの transition: 0.6s などのように設定することによって、瞬時に表示させるのではなく、移動するように見せることができる。

三　メニュー表示　（チェックが入る）
×　メニューを閉じる（チェックが外れる）

図メニューが表示されていない状態

右からスライド

左からスライド

上から

下から

<< HTMLコード　共通 >>

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Test left-right</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">

	<div id="nav-drawer">
		<!-- 開くボタン｜ハンバーガーアイコン -->
		<input type="checkbox" id="nav-input" class="nav-unshown" />
		<label id="nav-open" for="nav-input"><span>三</span></label>
		<label class="nav-unshown" id="nav-close" for="nav-input"></label>
		<!-- //開くボタン｜ハンバーガーアイコン -->
		
		<div id="nav-content">

			<!-- 閉じるボタン｜Ｘアイコン -->
			<label class="nav-unshown" id="nav-close2" for="nav-input">
				<span>×</span>
			</label>
			<!-- //閉じるボタン｜Ｘアイコン -->
		
		<br>ここはメニューです。ボックスにチェックが入ると、表示されます。<br>
		チェックを外すと閉じます。<br><br>
		原理は、デフォルトで表示領域外に設定し、チェックを入れることによって移動させて表示させています。<br>

		</div> <!-- //id="nav-content" -->
	</div> <!-- //id="nav-drawer" -->

</div> <!-- //container -->
</body>
</html>

<< CSSコード　右からスライド >>

style.css

body {
	background-color: #c0c0c0;
}

#container {
	margin: auto;
}

#nav-drawer {
	float: left;
}

/* メニュー表示要素 */
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	width: 90%;
	max-width: 330px;
	height: 100%;
	background-color: white;
	transition: 0.6s;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
	z-index: 9999;
}

/* メニュー表示中の背景設定 */
#nav-close {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: 0.6s;
	z-index: 99;
}

/* チェックボックス */
#nav-input:checked ~ #nav-content {
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
	display: block;
	opacity: 0.6;
}

<< CSSコード　左からスライド >>

style.css

body {
	background-color: #c0c0c0;
}

#container {
	margin: auto;
}

#nav-drawer {
	float: right;
}

/* メニュー表示要素 */
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 90%;
	max-width: 330px;
	height: 100%;
	background-color: white;
	transition: 0.6s;
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);
	z-index: 9999;
}

/* メニュー表示中の背景設定 */
#nav-close {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: 0.6s;
	z-index: 99;
}

/* チェックボックス */
#nav-input:checked ~ #nav-content {
	transform: translateX(0%);
	-webkit-transform: translateX(0%);
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
	display: block;
	opacity: 0.6;
}

<< CSSコード　上部からスライド >>

style.css

body {
	background-color: #c0c0c0;
}

#container {
	margin: auto;
	position: absolute;
	bottom: 0;	
}

#nav-drawer {
	float: left;
}

/* メニュー表示要素 */
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;	
	right: 0;	
	width: 100%;	
	height: 90%;	
	max-height: 330px; 
	background-color: white;
	transition: 0.6s;
	-webkit-transform: translateY(-105%);
	transform: translateY(-105%);
	z-index: 9999;
}

/* メニュー表示中の背景設定 */
#nav-close {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: 0.6s;
	z-index: 99;
}

/* チェックボックス */
#nav-input:checked ~ #nav-content {
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
	display: block;
	opacity: 0.6;
}

<< CSSコード　下部スライド >>

style.css

body {
	background-color: #c0c0c0;
}

#container {
	margin: auto;
}

#nav-drawer {
	float: left;
}

/* メニュー表示要素 */
#nav-content {
	overflow: auto;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 90%;
	max-height: 330px;
	background-color: white;
	transition: 0.6s;
	-webkit-transform: translateY(105%);
	transform: translateY(105%);
	z-index: 9999;
}

/* メニュー表示中の背景設定 */
#nav-close {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: 0.6s;
	z-index: 99;
}

/* チェックボックス */
#nav-input:checked ~ #nav-content {
	transform: translateY(0%);
	-webkit-transform: translateY(0%);
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
	display: block;
	opacity: 0.6;
}

メニューを開く（三）／閉じる（X）記号は、上記ではHTMLに直接文字として簡易的に表したが、実際にCSSコードを使って記述する。labelタグやborder(CSS)を駆使すると可能。

今回は、仕組みを理解しやすくするために、最小限のコードで記した。
上記のコードを基に、実際のホームページで配置、デザインを追加していく。

登録: 投稿 (Atom)

ページ

2021-01-06

2020-12-20

2020-12-16

2020-11-21

１．ダウンロード

２．フォルダー作成

３．解凍＆コピー

４．インストール

５．設定

2020-11-16

■インストール時につまづいたこと

2020-10-25

<< 作成ポイント >>

<< 右、左、上または下からスライドさせる使い分け >>

<< HTMLコード 共通 >>

<< CSSコード 右からスライド >>

<< CSSコード 左からスライド >>

<< CSSコード 上部からスライド >>

<< CSSコード 下部スライド >>

<< HTMLコード　共通 >>

<< CSSコード　右からスライド >>

<< CSSコード　左からスライド >>

<< CSSコード　上部からスライド >>

<< CSSコード　下部スライド >>